非常适合js初学者学习,每一步都有详细的注释,和易错点
淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 77 次
觉得不错,可打赏下作者
免费共享
//自动播放
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";
}
}

