【JavaScript】兼容IE6可调可控的图片滑块

来源：互联网发布：淘宝一千零一夜活动编辑：程序博客网时间：2024/05/18 02:11

图片滑块其实也与图片轮播一样，无需这么多奇奇怪怪的代码就能够实现，只是布局有点复杂，而且这东西在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编程，遇到像这种需要把数组的最后一个元素移到最上方的问题，可以考虑像这样，在正常的序列多存几个元素序列开头的元素，实现一种移动错觉，如果里面的元素仅仅用于显示的话。

0 0