图片无缝滑动

港控/mmm° 2022-05-20 01:26 169阅读 0赞

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

首先是

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>

最后是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();  
  
\})

\})

基本原理 我已经写了 注解

还有不懂 可以留言