Heim > Web-Frontend > js-Tutorial > 可自定义速度的js图片无缝滚动示例分享_javascript技巧

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

WBOY
Freigeben: 2016-05-16 17:03:20
Original
1039 Leute haben es durchsucht

思路:

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

复制代码 代码如下:




   
    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();




Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage