可自定义速度的js图片无缝滚动示例分享_javascript技巧

WBOY
Lepaskan: 2016-05-16 17:03:20
asal
1005 orang telah melayarinya

思路:

一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了。你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了。

复制代码 代码如下:




   
    JS图片向左滚动
   



 
   
     

     

   
 

     
         
         
           
           
           
           
           
         
       
可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧

     


  


  //0:定速度
  var speed = 30;
  //1:获取元素  demo demo1 demo2
  var demo = $("#demo");
  var demo1 = $("#demo1");
  var demo2 = $("#demo2");
  //2:复制 demo1-->demo2
  var cont = $("#demo1").html();
  $("#demo2").html(cont);

 
  //3:创建方法定时执行
  function hello(){
     var left = $("#demo").scrollLeft();
  if(left >= $("#demo1").width()){
   left = 0;
  }else{
   left++;
  }
  $("#demo").scrollLeft(left);

 setTimeout("hello()",speed);
  }
  hello();
  //   移动demo.scrollLeft();




Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan