jq动画实现无缝衔接轮播

最新推荐文章于 2023-04-10 08:48:30 发布

这是一个好听的网名

最新推荐文章于 2023-04-10 08:48:30 发布

阅读量1.1k

点赞数

分类专栏：个人累积文章标签： jq

本文链接：https://blog.csdn.net/weixin_44265241/article/details/88712312

版权

个人累积专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现无缝轮播，图片顺序是1-2-3-4-1，当图片播放到末尾时，用animate的最后一个参数，将left值调回0，就可以实现想要的效果了。
如果有不对或者需要优化的地方，请各位留言指正，么么哒

index部分：

<body>
	<div class="head">
		<div class="imgNav" id="imgNavId"></div>
	</div>
	<div class="navLi"></div>
	<div class="content"></div>
	<div class="footNav"></div>
</body>

css部分：

.head{
	width: 100%;
	position: relative;
}
.imgNav{
	position: absolute;
	top: 0;
	left: 0;
}
.imgNav div{
	float: left;
}

js部分：

// 图片数据
var imgs = [
	{0:'images/1.png'},
	{1:'images/2.png'},
	{2:'images/3.png'},
	{3:'images/4.png'}
];
// 获取节点
var imgNavId = $('#imgNavId');

// 获取屏幕宽度
var leng = $(window).width();

// 设置常数n 
var n = 0

// 循环加载图片
for(var i in imgs){
	imgNavId.append(
		$('<div />').append(
			$('<img />').prop('src',imgs[i][i]).css('width',leng+'px')
		)
	)
}
imgNavId.append(
	$('<div />').append(
			$('<img />').prop('src',imgs[0][0]).css('width',leng+'px')
		))
imgNavId.css('width',(imgs.length+1)*leng+'px')

var lef = imgNavId.css('left');

// 轮播动画无缝衔接
setInterval(function(){
	n++;
	if (n < 4) {
		imgNavId.animate({left:-leng*n+'px'});
	}else{
		imgNavId.animate({left:-leng*n+'px'},function(){
				imgNavId.css('left',0);
		});
		n = 0;
	};
},3000)

这是一个好听的网名

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq动画实现无缝衔接轮播

实现无缝轮播，图片顺序是1-2-3-4-1，当图片播放到末尾时，用animate的最后一个参数，将left值调回0，就可以实现想要的效果了。如果有不对或者需要优化的地方，请各位留言指正，么么哒index部分：<body> <div class="head"> <div class="imgNav" id="imgNavId"></div>...
复制链接

扫一扫