图片无缝滑动

图片的无缝滑动效果，可以用到很多地方，自己可以啦代码。

首先是

css样式：

html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.div-web{
text-align: center;
width: 100%;

}
.div-nei{
margin:0px auto;
   border:0px;
   padding:0px;
   width: 1010px;
   height: 220px;
   overflow: hidden;
}
.div-nei .div-main{
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
margin:0px auto;
   border:0px;
   padding:0px;
   width: 1010px;
   height: 220px;

}

然后是 html：

<div id="" class="div-web">
<div class="div-nei">


<div class="div-main">
<img src="img/1.png"/>
<img src="img/2.png"/>
<img src="img/3.png"/>
<img src="img/1.1.png"/>
</div>

</div>

</div>

最后是js：

$(function(){
start();
//最后一个img伪装成第一个img，所以是+1
var size = $(".div-main img").size()+1;
//获取img的宽度
var imgWidth = $(".div-main img").width();
//将所有的img元素 复制一份，添加到 父元素的div里面，这样就有两份同样的img了
  var clone = $(".div-main").find('img').clone();
  console.log("clone",clone);
  //添加操作
  $(".div-main").append(clone);
  //变量，用做停止
var timer 
function start(){
timer = setInterval(function(){
    Toleft();    
      
  },3000)  
}
//计算移动次数  
var i = 0;
function Toleft(){
//每次移动+1 为了与size 相比较
     i++;
     //当滑动到和初始画面一致的时候，趁浏览器不注意，将left 变为0，也就是欺骗眼睛，然后将i 变为1
     if(i==size){
        $(".div-main").css({left:0});
        i = 1;     
     }
     //执行左移操作
     $(".div-main").stop().animate({left:-i*imgWidth},1000);
    
   }

function stopleft(){
clearInterval(timer);
}
$("img").mouseover(function(){
stopleft();
})
$("img").mouseout(function(){
start();

})

})

基本原理 我已经写了 注解

还有不懂 可以留言