今天做一处图片展示,需要把一组图片循环无缝滚动,以往的做法大多都是克隆对象而实现循环,今天突然想到用JS的数组来实现,代码如下(项目用到jquery)
JavaScript代码
- <script type="text/javascript">
- var tplArray=new Array();
- tplArray['0']='<li><span><a href="http://shuishenghuo.1dusou.com/" target="_blank"><img src="images/Temp/shuishenghuo.jpg" /></a></span><span><a href="http://shuishenghuo.1dusou.com/" target="_blank">水生活水族</a></span></li>';
- tplArray['1']='<li><span><a href="http://gzwtwj.1dusou.com/" target="_blank"><img src="images/Temp/wangtongwujin.jpg" /></a></span><span><a href="http://gzwtwj.1dusou.com/" target="_blank">旺通五金</a></span></li>';
- tplArray['2']='<li><span><a href="http://riye.1dusou.com/" target="_blank"><img src="images/Temp/riyenanyang.jpg" /></a></span><span><a href="http://riye.1dusou.com/" target="_blank">日野南洋</a></span></li>';
- tplArray['3']='<li><span><a href="http://leshi.1dusou.com/" target="_blank"><img src="images/Temp/leshi.jpg" /></a></span><span><a href="http://leshi.1dusou.com/" target="_blank">乐事水族</a></span></li>';
- tplArray['4']='<li><span><a href="http://bafangshun.1dusou.com/" target="_blank"><img src="images/Temp/bashun.jpg" /></a></span><span><a href="http://bafangshun.1dusou.com/" target="_blank">八方顺水族</a></span></li>';
- tplArray['5']='<li><span><a href="http://zhaojinwei.1dusou.com/" target="_blank"><img src="images/Temp/jinwei.jpg" /></a></span><span><a href="http://zhaojinwei.1dusou.com/" target="_blank">金伟鱼行</a></span></li>';
- var iLength=tplArray.length;
- var showNum=5; //屏幕默认显示图片数量
- for(var i in tplArray){
- $("#tplBox")['0'].innerHTML+=tplArray[i];
- }
- var tplUlObj=$("#tempShow ul");
- $("#left").click(function(){
- showNum+=1;
- if(showNum>iLength){
- var tplArrayOne=tplArray.shift(); //删除并返回数组第一项元素,并赋给tplArrayOne
- tplArray.push(tplArrayOne); //把tplArrayOne作为最后一项元素添加到数组
- $("#tplBox")['0'].innerHTML=""; //清空页面显示内容
- for(var m in tplArray){
- $("#tplBox")['0'].innerHTML+=tplArray[m]; //重新innerHTML
- }
- }
- });
- $("#right").click(function(){
- showNum+=1;
- if(showNum>=iLength){
- var tplArrayLast=tplArray.pop() //删除并返回数组最后一项元素,并赋给tplArrayLast
- tplArray.unshift(tplArrayLast); //把tplArrayLast作为第一项元素添加到数组
- $("#tplBox")['0'].innerHTML="";
- for(var k in tplArray){
- $("#tplBox")['0'].innerHTML+=tplArray[k];
- }
- }
- });
- </script>
#1
.