Question

我试图像Snapchat网站一样做幻灯片，但我不知道如何

This my code :

https://jsfiddle.net/hrcp9rsg/

谢谢！请帮帮我

Answer 1

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

如何使用jQuery进行滚动重复

1 个答案: