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