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

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

原文： http://yaoyaoman.cn/blog/archives/200

css

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

js

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)

        })

html

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