js jquery实现图片从右向左3秒移动一次效果 超简单

在做北京市全流域补水系统时，需要用到每个摄像头从右向左进行一个一个轮播， 干脆自己写了个一个代码实现方式很简单，下面是gif效果图：

代码语言：javascript复制

<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>

代码语言：javascript复制

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)

})

代码语言：javascript复制

<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>

gif 摄像头

0 人点赞