非著名的得瑟演员赵鹏的博客,记录赵鹏的一点或者得瑟或者低调或者高兴或者闷骚的心情
有一份祝福,记在心里,默默滴保佑着...加油! :)

用JS数组控制图片循环

At 2009-04-16 08:13

今天做一处图片展示,需要把一组图片循环无缝滚动,以往的做法大多都是克隆对象而实现循环,今天突然想到用JS的数组来实现,代码如下(项目用到jquery)

 

JavaScript代码
  1. <script type="text/javascript">  
  2.     var tplArray=new Array();  
  3.         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>';  
  4.         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>';  
  5.         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>';  
  6.         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>';  
  7.         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>';  
  8.         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>';  
  9.       
  10.     var iLength=tplArray.length;  
  11.     var showNum=5; //屏幕默认显示图片数量  
  12.     for(var i in tplArray){  
  13.         $("#tplBox")['0'].innerHTML+=tplArray[i];  
  14.     }  
  15.     var tplUlObj=$("#tempShow ul");  
  16.     $("#left").click(function(){  
  17.         showNum+=1;  
  18.         if(showNum>iLength){  
  19.             var tplArrayOne=tplArray.shift(); //删除并返回数组第一项元素,并赋给tplArrayOne  
  20.             tplArray.push(tplArrayOne); //把tplArrayOne作为最后一项元素添加到数组  
  21.             $("#tplBox")['0'].innerHTML=""; //清空页面显示内容  
  22.             for(var m in tplArray){  
  23.                 $("#tplBox")['0'].innerHTML+=tplArray[m]; //重新innerHTML  
  24.             }  
  25.         }  
  26.     });  
  27.     $("#right").click(function(){  
  28.         showNum+=1;  
  29.         if(showNum>=iLength){  
  30.             var tplArrayLast=tplArray.pop() //删除并返回数组最后一项元素,并赋给tplArrayLast  
  31.             tplArray.unshift(tplArrayLast);  //把tplArrayLast作为第一项元素添加到数组  
  32.             $("#tplBox")['0'].innerHTML="";  
  33.             for(var k in tplArray){  
  34.                 $("#tplBox")['0'].innerHTML+=tplArray[k];  
  35.             }  
  36.         }  
  37.     });  
  38. </script>  

 

演示 : http://www.zhaopeng.info/notes/20090416/index.html

Tags: javasript, 数组, 图片, 无缝循环

笔记 | 评论:0 | Trackbacks:0 | 阅读:558