无缝轮播代码例子

最新推荐文章于 2022-11-12 00:09:30 发布

kitu

最新推荐文章于 2022-11-12 00:09:30 发布

阅读量333

点赞数

分类专栏： web前端文章标签：无缝轮播

本文链接：https://blog.csdn.net/u013285483/article/details/51814831

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
	<style type="text/css">
		.pic{
			float: left;
		}
		.clearfix{
			clear: both;
		}
		.scroll{
			background: red;
			width:432px;
			height:103px;
			overflow: hidden;
			margin:0 auto;
		}
		.scrollview{
			float: left;
		}
		.con{
			
			width:864px;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			function a(){
				var width=$(".scrollview").width();//获取一个展示区的宽度
				$(".con").animate({"margin-left":"-"+width},3000,"linear",function(){
					$(this).css("margin-left","0px");//只要走完一个展示区，就回到最初的状态
				});
			}
			a();
			setInterval(a,3000);/*循环调用，注意上面的时间与这里一致*/
		})
	</script>
</head>
<body>
	<div class="scroll">
		<div class="con">
			<div class="scrollview">
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">1</div>
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">2</div>
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">3</div>
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">4</div>
				<div class="clearfix"></div>
			</div>
			<div class="scrollview">/*第二个展示区*/
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">1</div>
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">2</div>
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">3</div>
				<div class="pic"><img src="img/15k.jpg" alt="" height="100" width="100">4</div>
				<div class="clearfix"></div>
			</div>
			
		</div>
	</div>	
	<script src="test4.js"></script>
</body>
</html>

kitu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝轮播代码例子

Document .pic{ float: left; } .clearfix{ clear: both; } .scroll{ background: red; width:432px; height:103px; overflow: hidden; margin:0 auto; } .scrollview{ f
复制链接

扫一扫