用JS实现轮播图效果(二)_

《用JS实现轮播图效果(二)_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、用JS实现轮播图效果(二)_这篇文章主要介绍了用JS实现轮播图效果（二）的相关资料,需要的伴侣可以参考下js代码如下：window.onload=function(){//轮播初始化varlunbo=document.getElementById('content');varimgs=lunbo.getElementsByTagName('img');varuls=lunbo.getElementsByTagName('ul');varlis=lunbo.getElementsByTagName('li');varne

2、xt=document.getElementById('next');varprev=document.getElementById('prev');varitem=0;//初始状态下，一个圆圈为高亮模式lis[0].style.fontSize='26px';lis[0].style.color='#fff';imgs[0].style.display='block';//定义一个全局变量，用来进行自动轮播图片挨次的改变varpic_index=1;//自动轮播.用法pic_time记录播放，可以随时用法clearI

3、nterval()清除掉。varpic_time=setInterval(autobofang,1000);//自动播放的大事处理functionautobofang(){if(pic_index=lis.length){pic_index=0;}picChange(pic_index);pic_index++;}//手动轮播for(vari=0;ilis.length;i++){lis[i].addEventListener("mouseover",change,false);}functionchange(even

4、t){varevent=event

5、

6、window.event;vartarget=event.target

7、

8、event.srcElement;varchildren=target.parentNode.children;for(vari=0;ichildren.length;i++){if(target==children[i]){picChange(i);}}}//图片切换函数functionpicChange(i){//让全部图片都不显示，全部圆圈都为一般样式for(varj=0;jimgs.length;j+

9、+){imgs[j].style.display='none';lis[j].style.fontSize='24px';lis[j].style.color='#999';}//让选中的索引的图片显示，对应的圆圈高亮imgs[i].style.display='block';lis[i].style.fontSize='26px';lis[i].style.color='#fff';}//当鼠标移近图片区域内，自动播放停止lunbo.addEventListener("mouseover",function(){cl

10、earInterval(pic_time);},false);//当鼠标移出图片区域内，自动播放连续lunbo.addEventListener("mouseout",function(){pic_time=setInterval(autobofang,1000);},false);//后退箭头点击大事，图片会跟着点击大事不断改变next.addEventListener("click",movenext,false);functionmovenext(){if(item==2){item=0;}else{item+=

11、1;}picChange(item);}prev.addEventListener("click",moveprev,false);functionmoveprev(){if(item==0){item=2;}else{item-=1;}picChange(item);}}总结：基本轮播效果已经实现，后期需要做的事：是对代码要进行精简，封装，提高运行效率。...