1、把所有图片放在一起使其浮动,a绑定事件,向左移动800的倍数(第几张图片)
window.onload=function(){
var li = document.getElementById('banner_imgs');
var a = document.getElementsByClassName('number')[0].getElementsByTagName('a');
for(var i=0;i<a.length;i++){
a[i].id=i;
a[i].onmouseover=function(){
for(var j=0;j<a.length;j++){
a[j].className=''; //清除当前a样式
}
a[this.id].className='on'; //给当前a添加样式
li.style.left=-this.id*800+'px';
}
}
}
2、创建一个定时器,每过一段时间更换一张图片。封装一个函数,遍历所有图片并设置属性dsplay为none。index作为参数传入恢复为block。再绑定移入移出事件停止和继续定时器。
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
// 定义并调用自动播放函数
if(timer){
timer.clearInterval(timer);
timer=null;
}
timer=setInterval(function(){
index++;
if(index>4){
index=0;
}
changepic(index);
},2000)
// 定义图片切换函数
function changepic(cindex){
for(var i=0;i<5;i++){
list[i].className="";
pic[i].style.display="none";
}
list[cindex].className="on";
pic[cindex].style.display="block";
index=cindex;
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover=function(){
clearInterval(timer);
timer=null;
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>4){
index=0;
}
changepic(index);
},2000)
}
// 遍历所有数字导航实现划过切换至对应的图片
for(var j=0;j<5;j++){
list[j].id=j;
list[j].onmouseover=function(){
changepic(this.id);
}
}
}
.3、使用myfocus插件,还可以更换焦点图的样式。省去写代码的过程