简单轮播框
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数目的属性,这种方式是否影响前端页面的优化,还有待商榷。在后面的学习中会持续关注。