如何使滚动重复使用jQuery

Question

我试图做这样Snapchat网站幻灯片，但我不知道该怎么

This is snapchat example

This my code : 

https://jsfiddle.net/hrcp9rsg/

谢谢！请帮我

Answer 1

 
    $(document).ready(function() {  \t 
 
    \t var start_in = 0; 
 
    \t setInterval(function() { 
 
    \t start_in += 226; 
 
    \t $(".screenshots-slide-elms ul").each(function() { 
 
    \t $(this).css({ 
 
    \t "transition" : "-webkit-transform 500ms ease 0s", 
 
    \t "transform" : "translate3d(-"+start_in+"px, 0px, 0px)", 
 
    \t }); \t 
 
     
 
     if(start_in>1500) 
 
     { 
 
     start_in = 0; 
 
     $(this).css({ 
 
    \t "transition" : "-webkit-transform 500ms ease 0s", 
 
    \t "transform" : "translate3d(+"+start_in+"px, 0px, 0px)", 
 
    \t }); \t 
 
     } 
 
    \t }); \t 
 
    \t },2000);  
 
    });

  body,html {margin:0; padding:0;} 
 
      .screenshots-slide {position:relative; max-width:1100px; margin:0 auto;} 
 
     .screenshots-slide img {width:100%;} 
 
     .screenshots-slide li {display: inline-block; width:200px; margin:0 22px 0 0; } 
 
     .screenshots-slide-elms ul { 
 
     \t opacity: 1; 
 
      transform: translate3d(0px, 0px, 0px); 
 
      /* width: 4620px; */ 
 
      transition: -webkit-transform 500ms ease 0s; 
 
      /*margin-left: 145px;*/ 
 
     } 
 
     .screenshots-slide-elms {position:absolute; top:60px; white-space:nowrap; max-width:100%; 
 
     -webkit-transform: translate3d(0, 0, 0); 
 
     -moz-transform: translate3d(0, 0, 0); 
 
     -ms-transform: translate3d(0, 0, 0); 
 
     -o-transform: translate3d(0, 0, 0); 
 
     transform: translate3d(0, 0, 0); 
 
     display: block; 
 
     overflow: auto; 
 
     margin: 0; 
 
     padding: 0 
 
     } 
 
    .header-phone-background {position:relative; z-index: 1; overflow:hidden; width:100%; max-width:232px; height:480px; margin:0px auto 0 auto; background:url("http://i.imgur.com/KBGCki9.png") no-repeat scroll 0% 0%/100% auto;}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="screenshots-slide"> 
 
    <div class="header-phone-background"></div> 
 
    <div class="screenshots-slide-elms"> 
 
    <ul> 
 
    <li data-saf="1"><img src="https://lh3.googleusercontent.com/A5KYbufCprxt0PO57ilqs2E42MKEzCLMRn_JYLQiKZUlE1w-wN_gx_8M1qvNne3cPuYNnwEv86BQbZqxgNLyLAkVcQ"/></li> 
 
    <li data-saf="2"><img src="https://lh3.googleusercontent.com/7cIJUKDkKwgKMiYB19AqnD8m75xWGGsoTc5ifcVr1UPZGUh_sGgIX9jTyY_LiXgk6p2NydTOjqln0b3DL3nxDe7chA"/></li> 
 
    <li data-saf="3"><img src="https://lh3.googleusercontent.com/GndgN9b3NKFFDPjDxtpqzTPOPhtFFGpAf_pxQ0OU-gQciDeqKRM_AwOnCwvOV78bFU6BWGFPfwwoIGG72I72-0Oe-NU"/></li> 
 
    <li data-saf="4"><img src="https://lh3.googleusercontent.com/_v-HbNHvVCzS0GN0kSGkYWAF8JmJ15D7fCMKgYSa3YMFBCU0ClNSw2Ksfql7w3V1DUQc_oRZf5adnYcFSEbQyBAT"/></li> 
 
    <li data-saf="5"><img src="https://lh3.googleusercontent.com/Q-tFwVB3rhhoxSq45GZ_P0O6k1EMg5TEsmVvnH1xqEOZUgRr9JTqK_Q-akm3cwIPLLhKdFHxaWqE6BcZIUnSTWkzCOk"/></li> 
 
    <li data-saf="6"><img src="https://lh3.googleusercontent.com/ut4BuHGec6SD3y_RLQkfOmxfll6sSHgERWjfO3dLhKXuD11czuwK1sUlKymyP7EVNYgk2n2Pl_bFcL7ZXG1J750thg"/></li> 
 
    <li data-saf="7"><img src="https://lh3.googleusercontent.com/ut4BuHGec6SD3y_RLQkfOmxfll6sSHgERWjfO3dLhKXuD11czuwK1sUlKymyP7EVNYgk2n2Pl_bFcL7ZXG1J750thg"/></li> 
 
    <li data-saf="8"><img src="https://lh3.googleusercontent.com/MaxAAO8dqk08VUFKiOg3xp4wzcU9BsUfCq_d0kFGW-wOFSCU_rjJkloWnhhY6wxd1e_TZ6o5NhGxbnpSD6IUnUXGrfE"/></li> 
 
    <li data-saf="9"><img src="https://lh3.googleusercontent.com/MaxAAO8dqk08VUFKiOg3xp4wzcU9BsUfCq_d0kFGW-wOFSCU_rjJkloWnhhY6wxd1e_TZ6o5NhGxbnpSD6IUnUXGrfE"/></li> 
 
    </ul> 
 
    </div> 
 
    </div>