标签:图片 滑块 ie6 滚动 javascript
图片滑块其实也与图片轮播一样,无需这么多奇奇怪怪的代码就能够实现,只是布局有点复杂,而且这东西在Bootstrap里面也没有,在网页中,这个组件也越来越少见的,毕竟这个小小的组件太浪费网络资源了,实现的逻辑还比较复杂,如果不要被特别要求,能不做最好不好。
有时候,如果一个如同《【CSS】黑色幽默,兼容IE6的纯原生态的门户网站》(点击打开链接)的简单网页就能够交货,就不要卖弄你的前端技巧了。
虽然这个组件的效率很低,但是还是讲解一下实现的原理,也是完美兼容IE6,同时包你能够随心所欲地放置这个组件。不会像网络那些一大堆复杂的代码,不知道写啥,也不知道怎么修改。
一、基本目标
还是《【JavaScript】原生态兼容IE6的图片轮播》(点击打开链接)那几张从windows自带壁纸拉过来图片,在WINXP原生态的IE6浏览器,实现下面的特效:
一个图片滑块组件,每2秒自动按顺序向右移动一次,里面总共四张图片,每次显示三张。
当然我们还提供两个按钮,用户能够自己移动图片
点击相应的图片自然能够最大化。选取再打开一个窗口来查看。很朴素。
二、基本布局
布局如下:
HTML布局代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>picmarquee</title> </head> <body> <div>sssssss</div> <div style="float:left;"><button onclick="pic_marquee_move(0)"><</button></div> <div id="picMarquee" style="float:left;"> <div style="padding-left:10px; float:left; display:block;"><a href="imgs/Ascent.jpg" target="_new"><img src="imgs/Ascent.jpg" width="50px" border="0" /></a></div> <div style="padding-left:10px; float:left; display:block;"><a href="imgs/Autumn.jpg" target="_new"><img src="imgs/Autumn.jpg" width="50px" border="0" /></a></div> <div style="padding-left:10px; float:left; display:block;"><a href="imgs/Azul.jpg" target="_new"><img src="imgs/Azul.jpg" width="50px" border="0" /></a></div> <div style="padding-left:10px; float:left; display:block;"><a href="imgs/Crystal.jpg" target="_new"><img src="imgs/Crystal.jpg" width="50px" border="0" /></a></div> <div style="padding-left:10px; float:left; display:block;"><a href="imgs/Ascent.jpg" target="_new"><img src="imgs/Ascent.jpg" width="50px" border="0" /></a></div> <div style="padding-left:10px; float:left; display:block;"><a href="imgs/Autumn.jpg" target="_new"><img src="imgs/Autumn.jpg" width="50px" border="0" /></a></div> </div> <div style="float:left; padding-left:10px;"><button onclick="pic_marquee_move(1)">></button></div> <div style="clear:both"></div> <div>sssssss</div> </body> </html>
见下图,红框代表正在展示的部分,一共四种状况,然后不停地循环,给人一种图片序列像右滑动之感。
如果你每次显示2张图片,则再于正常的图片序列之后,从开头开始重复添加一张的图片即可,同样是四种展示状态,这样刚好形成一个循环。也就是说如果你每次要显示N张图片,你就要在整个图片序列之后再从头开始增加N-1张图片。
或许有人提出为何要使用这种违背常人的思维的方式布置图片呢?就不能如下图,图片序列就放置四张图片,然后每次展示前三张,最后一张展示,利用脚本控制一下这个图片序列数组的元素即可,或者其他类似的方法。反正图片序列数组,能够像《【JavaScript】利用getElementsByTagName与getElementsByName改进原生态兼容IE6标签页》(点击打开链接)一样取到?
这在理论上行得通的,JavaScript里面还有两个方法:unshift()在数组之前添加一个元素与pop()删除数组最后一个元素并且返回这个元素,用来实现这种换位呢!然而,实际上,这个通过getElementsByTagName取到的节点序列数组,不像new array()建立的数组,它像是C语言里面的存放指针的数组一样,你是通过指针操作引用,因此不能交换这个节点序列数组的位置,如下图,看到没有?点一点这个数组,发现仅有两个方法。
或者有好事者见到HTML布局部分代码繁琐,再提出,为何就不能把这些NodeList存至一个new Array(),再交换位置呢?之后再通过这个new Array()在于父节点下生成元素呢?这样首先不说你没道理地增加一个N的空间复杂度与时间复杂度,反正我试过根本就行不通,存到存不了,“存完”之后alert一下这个new Array(),一堆控制。或许是因为NodeList不是正常元素的缘故吧?所以没有办法了,只能按照增加N-1图片的方法来做。网上对于图片滑块的做法都是利用这个思想的,我找了两个小时的资料,还没见过不用这个思想的……
三、核心脚本
Javascript的脚本也就根据上面的思想来写了,想清楚了之后编码就很简单了。
图片的显示与否就通过Javascript控制图片的display的属性控制就OK了,不用像网上部分代码一样,再用Javascript写一个遮罩图层,把不显示的遮罩。
当时我看了大汗典型的Flash狗转型到Web前端的ActionScript大神。
<script> //这是"显示框"的位置,从这个位置开始后面X张图片显示,其余隐藏 var display_tag=0; //网页加载就要调用这个函数了,参数1代表向右滚动,注意HTML的按钮调用的函数你就知道了 pic_marquee_move(1); //2S变换一次 setInterval("pic_marquee_move(1)",2000); function pic_marquee_move(leftOrRight){ //如果参数是0就向左滚,用户按向左按钮会有这种情况 if(leftOrRight==0){ display_tag--; //如果滚到最左,马上调到最右 if(display_tag<0){ display_tag=3; } } //反之亦然 else{ display_tag++; if(display_tag>3){ display_tag=0; } } //取出图片序列 var picMarqueeArr=document.getElementById("picMarquee").getElementsByTagName("div"); for(var i=0;i<picMarqueeArr.length;i++){ //从显示位置开始,后3张图片是显示的 if(i>display_tag-1&&i<display_tag+3){ picMarqueeArr[i].style.display="block"; } //其余隐藏 else{ picMarqueeArr[i].style.display="none"; } } } </script>
1、如果被要求做图片滑块,没有被指定要这种,你还不如直接在一排里面放上四张图片,如下图,不用烦!
如果图片太多,用《【JavaScript】原生态兼容IE6的图片轮播》(点击打开链接)的图片轮播来实现。毕竟这个组件如果有二十万张图片要显示的话,要加载39.9999万张图片,复杂度很糟糕。
2、向右滚动实际是“显示框”在动,给人一种视觉上的错觉
3、以后在Java或者C编程,遇到像这种需要把数组的最后一个元素移到最上方的问题,可以考虑像这样,在正常的序列多存几个元素序列开头的元素,实现一种移动错觉,如果里面的元素仅仅用于显示的话。
标签:图片 滑块 ie6 滚动 javascript
原文地址:http://blog.csdn.net/yongh701/article/details/43877211