图片的无缝滑动效果,可以用到很多地方,自己可以啦代码。
首先是
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();
})
})
基本原理 我已经写了 注解
还有不懂 可以留言