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

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

WBOY
WBOYoriginal
2016-05-16 17:03:20996parcourir

思路:

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

复制代码 代码如下:




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




Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn