在做北京市全流域补水系统时,需要用到每个摄像头从右向左进行一个一个轮播, 干脆自己写了个一个代码实现方式很简单,下面是gif效果图:
<style>
.video-div{
width: 85%;
height: 155px;
margin:0px auto;
overflow: hidden;
}
/*图片的总长*/
.video-rolling{
width: 3260px;
height: 155px;
/*border: 1px red solid;*/
}
/*动画效果*/
.transition{
transition: all 0.5s ease-in-out 0s;
}
/*图片的外边框*/
.video-img{
height: 145px;
width: 250px;
border: 1px solid #dcbc82;
float: left;
margin-top: 4px;
margin-left: 10.5px;
margin-right: 10.5px;
}
/*边框里的图片*/
.video-img img{
height: 135px;
width: 240px;
margin: 5px;
}
/*修复第一个图片和最后一个图片等比不对应问题*/
.video-img:first-child{
margin-left: 0px;
}
.video-img:last-child{
margin-right: 0px;
}
</style>
var growth = 273
var left = 0;
$(function () {
setInterval(function () {
if(left == 0){
$(".video-rolling").addClass("transition")
}
left = left + growth;
$(".video-rolling").css("margin-left","-"+left+"px")
width = $(".video-rolling").css("margin-left");
if(width == "-1638px"){
$(".video-rolling").removeClass("transition")
$(".video-rolling").css("margin-left","0px")
left = 0;
}
},3000)
})
<div class="video-div">
<div class="video-rolling">
<div class="video-img">
<img src="images/1.png" alt="">
</div>
<div class="video-img">
<img src="images/2.png" alt="">
</div>
<div class="video-img">
<img src="images/3.png" alt="">
</div>
<div class="video-img">
<img src="images/4.png" alt="">
</div>
<div class="video-img">
<img src="images/5.png" alt="">
</div>
<div class="video-img">
<img src="images/6.png" alt="">
</div>
<div class="video-img">
<img src="images/1.png" alt="">
</div>
<div class="video-img">
<img src="images/2.png" alt="">
</div>
<div class="video-img">
<img src="images/3.png" alt="">
</div>
<div class="video-img">
<img src="images/4.png" alt="">
</div>
<div class="video-img">
<img src="images/5.png" alt="">
</div>
<div class="video-img">
<img src="images/6.png" alt="">
</div>
</div>
</div>