用JS实现轮播图效果（二）

window.onload = function(){//轮播初始化var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');var next = document.getElementById('next');var prev = document.getElementById('prev');var item = 0;//初始状态下，一个圆圈为高亮模式lis[0].style.fontSize = '26px';lis[0].style.color = '#fff';imgs[0].style.display = 'block';//定义一个全局变量，用来进行自动轮播图片顺序的变化var pic_index = 1;//自动轮播.使用pic_time记录播放，可以随时使用clearInterval()清除掉。var pic_time = setInterval(autobofang,1000);//自动播放的事件处理function autobofang(){if(pic_index >= lis.length){pic_index = 0;}picChange(pic_index);pic_index++;}//手动轮播for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false);}function change(event){ var event=event||window.event;var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){if(target == children[i]){ picChange(i); } }} //图片切换函数function picChange(i){ //让所有图片都不显示，所有圆圈都为普通样式 for(var j=0;j<imgs.length;j++){ 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(){clearInterval(pic_time);},false);//当鼠标移出图片区域内，自动播放继续lunbo.addEventListener("mouseout",function(){pic_time = setInterval(autobofang,1000); },false);//后退箭头点击事件，图片会跟着点击事件不断变化 next.addEventListener("click",movenext,false);function movenext(){if(item == 2){item=0;}else{item+=1;}picChange(item);}prev.addEventListener("click",moveprev,false);function moveprev(){if(item == 0){item=2;}else{item-=1;} picChange(item);}}