seamless carousel

　　Implementation principle of seamless carousel:

　　Arrange some pictures with the same size in the columns horizontally, use CSS syntax to display only one of the pictures, and hide the rest of the pictures. Switch pictures by changing the lmargin-left value of the box containing the pictures.

　　Switch to the left, switch from image img1 to img2, change the value of margin-left: margin-lef t: -1180px, display the second image in the visible area, then cut the first image and append it to the end of the image column.

　　Repeat this process to achieve seamless rotation of the picture to the left. The same is true in the opposite direction. As shown in Figure 1, if I want to switch img1 to img4, I will do the following:

　　First, insert img4 into the head of the picture column, and then move the margin-left from margin-left: -1180px to margin-left: 0 to switch the picture to the right.

　　Repeat this operation to switch the picture to the right.

　　Code snippet:

　　The html layout is as follows:

<div class="banner-wrapper">
   <ul class="banner-content">
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1514545968_297.jpeg" alt="" />
      </li>
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1514200192_680.jpeg" alt="" />
      </li>
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1513652033_127.jpeg" alt="" />
      </li>
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1514169471_728.jpeg" alt="" />
      </li>
   </ul>
   <a href="javascript:void(0)" class="ear left-ear"><</a>
   <a href="javascript:void(0)" class="ear right-ear">></a>
</div>


css渲染如下：

.banner-wrapper{
   width: 1180px;
   height: 350px;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
}
.banner-content{
   width: 5000px;
}
.banner-wrapper .banner-unit{
   width: 1180px;
   height: 350px;
   float: left;
}
.banner-unit img{
   width: 1180px;
   height: 350px;
}
.ear{
   position: absolute;
   width: 50px;
   height: 100%;
   top: 0;
   background-color: #3498db;
   text-align: center;
   line-height: 332px;
   font-size: 36px;
   color: #fff;
}
.ear.left-ear{
   left: 0;
}
.ear.right-ear{
   right: 0;
}

JavaScript code:

var $banner_content = $('.banner-content'); 
// The next one 
for the right ear // 1. Get the right ear 
var $right_ear = $(".right-ear"); 
// 2. Tie the right ear Set event 
$right_ear.on('click', function (ev) { 
   $banner_content.animate({ 
      'margin-left': -1180 
   },function () { 
      var firstEl = $(this).children().first( ); 
      $(this).append(firstEl).css({'margin-left': 0});; 
   }); 
}); 

/// Get the left ear 
var $left_ear = $(".left-ear" ); 
// 2. Bind the event to the right ear 
$left_ear.on('click', function (ev) { 
   var lastEl = $banner_content.children().last(); 
   $banner_content.prepend(lastEl).css( { 
      'margin-left': -1180 
   }).animate({
      'margin-left': 0
   });;
});

Guess you like