前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js jquery实现图片从右向左3秒移动一次效果 超简单

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

作者头像
tongyao
发布2022-06-09 15:09:41
1.9K0
发布2022-06-09 15:09:41
举报
文章被收录于专栏:tongyao

在做北京市全流域补水系统时,需要用到每个摄像头从右向左进行一个一个轮播, 干脆自己写了个一个代码实现方式很简单,下面是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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年9月27日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档