上下无缝滚动 

 1 (function(){
 2          var swiperBox = document.querySelector(".photo-wrapper");
 3          if(swiperBox.querySelector(".photo-wrapper img") == null){
 4              return false;
 5          }
 6          var height = swiperBox.querySelector(".photo-wrapper img").clientHeight;
 7          swiperBox.innerHTML = swiperBox.innerHTML + swiperBox.innerHTML;
 8          var during = (parseInt(swiperBox.dataset.during) || 15) * 1000;
 9          var speed = height/during * 17;
10          var distance = 0;
11          var timer = setInterval(function(){
12              distance = distance + speed;
13              swiperBox.style.transform = "translate3d(0," + (-distance + "px") + ",0)";
14              swiperBox.style.webkitTransform = "translate3d(0," + (-distance + "px") + ",0)";
15 
16              if(distance >= height){
17                  swiperBox.style.transform = "translate3d(0,0,0)";
18                  swiperBox.style.webkitTransform = "translate3d(0,0,0)";
19                  distance = 0;
20              }
21          },17)
22      })();
1 <div class="photo-wrapper">
2                                             <img src="../node/qnKgFA/res/icon2.png?time=1507878758" width="100%" />
3                                     </div>

 

posted @ 2017-10-17 15:45  小梨晓晓  阅读(303)  评论(0)    收藏  举报