非常适合js初学者学习,每一步都有详细的注释,和易错点
//自动播放
timer=setInterval(autoPlay,1000);//此处调用autoPlay函数时,()不能带,带就出错
//鼠标悬浮时,停止轮播
oBanner.onmousemove=function()
{
oBtn.style.display=\\\'block\\\';
clearInterval(timer);
}
//鼠标离开,继续轮播
oBanner.onmouseout=function()
{
oBtn.style.display=\\\'none\\\';
timer=setInterval(autoPlay,1000);//此处必须重新设置定时器
}
//点击左边按钮,上一页
oPrev.onclick=function()
{
index=index-1;
if(index<0)
{
index=aPic.length-1;
}
changePic(index);
}
//点击右边按钮,下一页
oNext.onclick=function()
{
index=index+1;
if(index==aPic.length)
{
index=0;
}
changePic(index);
}
//播放函数
function autoPlay()
{
index=index+1;
if(index==aPic.length)
{
index=0;
}
changePic(index);
}
//把数字与图片对应起来
for(var i=0;i<aList.length;i++)
{
aList[i].onmouseover=function()
{
clearInterval(timer);
index=this.innerText-1;
changePic(index);
}
}
//图片、编号切换
function changePic(curIndex)
{
for(var i=0;i<aPic.length;i++)
{
aPic[i].style.display=\\\'none\\\';
aList[i].className=\\\'\\\';
}
aPic[curIndex].style.display="block";
aList[curIndex].className="on";
}
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791