标签：
github地址：https://github.com/ziyekkk/carousel
首先轮播框的html与css要点有3：
1.主div属性position：relative
2.图片放在ul里，序号放在ul里
3.图片隐藏
其他细节不表，下面说一下js的主要思路。
首先要想到的是，鼠标指向序号时序号要显示不同颜色，而其他的序号要变为相同颜色，对应的图片要显示，而其他图片要消失。
var car1=document.getElementById("imageul");//获得图片ul var car2=document.getElementById("car1");//获得序号ul var imageChild=car1.getElementsByTagName("li");//获得序号下li var numChild=car2.getElementsByTagName("li");//获得图片ul下li var L=numChild.length; numChild[0].style.backgroundColor="red"; imageChild[0].getElementsByTagName("img")[0].style.display="block";//设置初始轮播序号 for(var i=0;i<L;i++){//为每个序号设置鼠标指向事件 setMouseActions(numChild[i],imageChild[i],i); } function setMouseActions(node,imgnode,i){ node.onmouseover=function(){//鼠标指向事件for(var m=0;m<L;m++){//首先设置所有的图片为消失，序号背景为白色（根据需要） numChild[m].style.backgroundColor="white"; imageChild[m].getElementsByTagName("img")[0].style.display="none"; } this.style.backgroundColor="red";//重新设置鼠标指向的目标 imgnode.getElementsByTagName("img")[0].style.display="block"; } }
接下来想到的是，当无鼠标事件时，轮播框应该自动的轮播，利用setInterval()函数实现，改变内容与上文类似。
但是如此可能出现这种情况，当鼠标指向1时，但是自动轮播到3，下一个本应是2却轮播到4，这时不妨设置一个全局变量G=0，当上文中设置鼠标事件时，让G与当前序号i相等，然后自动轮播如下：
var interval=self.setInterval(change,1500);//1.5秒执行一次change（）轮播事件 function change(){ if(G<L){//当当前序号G小于总序号数时 for(var m=0;m<L;m++){//改变轮播内容 numChild[m].style.backgroundColor="white"; imageChild[m].getElementsByTagName("img")[0].style.display="none"; } numChild[G].style.backgroundColor="red"; imageChild[G].getElementsByTagName("img")[0].style.display="block"; G++;//下一次轮播 }else{ G=0; } }
此时基本完成轮播效果。
但是此时有一种疑问，每次需要轮换时，需要设置项目数*2数目的属性，这种方式是否影响前端页面的优化,还有待商榷。在后面的学习中会持续关注。
标签：
原文地址：http://www.cnblogs.com/wukall/p/5751425.html
