关于焦点轮播图的总结

来源:互联网 时间:1970-01-01

目前来讲,在各大网站都会使用到焦点轮播图,因为它占用地方少,交互性好,是前端设计必须要掌握的技能之一。

原理:使用三层嵌套,最里层装载图片,图片需要浮动。最里层设置相对定位。然后再使用JavaScript设置一个定时器,每过一段时间便让最里层的块的left值改变。

而第二层则需要设置overflow:hidden;这个属性,否则将会导致这个层被子层撑大。不美观。

此图便为实现效果图。

下面先讲一讲如何布局。

首先布局分为三大块,一块为inner,包裹住所有的图片;一块为outer,决定展示的窗口;两个a标签为左右箭头;pagination块则包裹着下面的每一小块span标签;

wrap是最外面的块,控制着整个轮播图的位置。

然后,设置相关的样式。如图:

.wrap{width:510px;//显示窗口大小margin:20px auto;}#outer{//此样式代码必须全设,否则将无法成功width:510px;//显示窗口大小,可用百分比代替overflow: hidden;position: relative;left:0;top:0;}#inner{width:9999px;//为能装下所有图片position: relative;left:0;top:0;overflow: hidden;//清除浮动}#inner img{float:left;}#outer a{//确定两个小箭头的位置position: absolute;width:30px;height:30px;font-size: 30px;text-align: center;line-height: 30px;top:50%;margin-top: -15px;background-color: #ccc;opacity: 0;filter: alpha(opacity=0);}#outer .active{background-color: #9f9f9f;}#outer:hover a{opacity: 0.6;filter: alpha(opacity=60);}#outer .leftGo{left:0;}#outer .rightGo{right:0;}#pagination{position: absolute;bottom: 20px;width:100%;text-align: center;}#pagination span{display: inline-block;width:30px;height:30px;line-height: 30px;border-radius: 50%;background-color: #fbfbfb;opacity: 0.6;filter: alpha(opacity=60);cursor: pointer;-webkit-user-select: none;}

至此,相关的样式便设置完,我们开始进入高大上的Javascript。

首先我们思考整个页面将会发生的事件:

1.每过一段时间,最里层的inner的left就会改变。

2.每一个下标都对应着一个图片。当前显示图片改变,下标改变。

3.当点击下标时,当前显示图片改变成相对应的图片。

4.当鼠标移入到展示层,图片停止滑动,两边的箭头显示。当鼠标移出,回复滑动,两边的箭头虚化。

5.当鼠标点击左右两边的箭头,图片向前滑动/向后滑动;

当我们了解完基本的事件之后,我们便可以开始设置绑定相关的事件了。

1 timer = setInterval(AutoGo,2000);//设置计时器 2 leftGo.onclick=function(){ 3 Goleft();//点击左边的小箭头 4 }; 5 rightGo.onclick = function(){ 6 Goright();//点击右边的小箭头 7 }; 8 inner.onmouseover=function(){ 9 clearInterval(timer);//鼠标移入,清除计时器10 }11 inner.onmouseleave=function(){12 timer = setInterval(AutoGo,2000);//鼠标移出,启动计时器13 }14 function AutoGo(){15 //自动轮播16 var start =inner.offsetLeft;//距离左边的边框的长度17 var end = - index * picWidth;//终点18 var moveDistance = end - start;19 var speed = 20;//要走的步数20 var speedCount = 0;21 clearInterval(AutoTimer);22 //清除之前的计时器,否则会越走越快23 clearInterval(timer);24 AutoTimer = setInterval(function(){25 speedCount++;26 if(speedCount >=speed){27 //步数足够28 clearInterval(AutoTimer);29 clearInterval(timer);30 timer = setInterval(Goright,1000);31 //再次启动计时器32 }33 inner.style.left = moveDistance * speedCount/speed +start+"px";34 //每步要走的距离35 },100)36 for(var i = 0 ; i<spanArr.length;i++){37 //下标的样式改变,以及点击事件的绑定38 spanArr[i].index = i;39 spanArr[i].className="";40 spanArr[index].className="active";41 spanArr[i].onclick =function(){42 index=this.index;//传递当前点击的位置43 AutoGo();44 }45 }46 }47 function Goleft(){48 //往左走一步;49 index--;50 if(index<0){51 index =imgArr.length-1;52 }53 AutoGo();54 55 }56 57 function Goright(){58 //往右走一步59 index++;60 if(index>imgArr.length-1){61 index =0;62 }63 AutoGo();64 }

至此,相关的设置就完成了。

但是在此过程中有一些问题需要注意:

1.计时器在每次调用之前必须清除,否则当有多个事件触发的时候计时器会叠加,从而会越走越快。

2.一些重复的代码没必要重复写,应该要封装到函数里面去。

3.当对多个相同的元素进行操作时,注意不要让数组越界。

4.要考虑兼容性问题

5.要注意代码的格式化。

如若转载,请说明出处,谢谢


相关阅读:
Top