无缝跑马灯图片轮播

最新推荐文章于 2019-10-09 18:07:19 发布

G-Q

最新推荐文章于 2019-10-09 18:07:19 发布

阅读量3.3k

点赞数 1

分类专栏： jquery h5 前端文章标签： html js

本文链接：https://blog.csdn.net/gq15238209541/article/details/79976732

版权

jquery 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>无缝跑马灯图片轮播</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;}
		li{list-style: none;}
		img{border:0;outline: none;}
		#warp{width:1200px;height: 200px;margin:100px auto;position:relative;overflow: hidden;}
		.content{width: 1000%;position: absolute;left:0;top:0;}
		.content li{width:300px;height: 200px;float: left;}
	</style>
</head>
<body>
<div id="warp">
	<ul class="content">
		<li><a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523956387766&di=7a757237ed3c51448ba335f3415db77b&imgtype=0&src=http%3A%2F%2Fwww.qqttxx.com%2Fupimg%2Fallimg%2F091129%2F013641EE-4.jpg"></a></li>
		<li><a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524551146&di=2cc526dc85653c54639e7eb9a4c73c62&imgtype=jpg&er=1&src=http%3A%2F%2Fp5.qhimg.com%2Ft01bc8ebab7ca94b0cf.jpg"></a></li>
		<li><a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523957977388&di=4e75de404377eaf5abbac52f2d5f872e&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20100227%2Fbki-20100227173518-1234993972.jpg"></a></li>
		<li><a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523958024425&di=a3af64e982fa5a50c0bca2d4ef0e7065&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20100710%2Fbki-20100710170737-2018346036.jpg"></a></li>
	</ul>
</div>
</body>
<script type="text/javascript">
	$(function(){
		var timer;
		var number = 0;
		
		var cont = document.getElementsByClassName('content')[0];
		cont.innerHTML += cont.innerHTML;

		function AutoPlay(){
			clearTimeout(timer);
			timer = setInterval(function(){
				number --;
				if(number == -900){
					number = 0;
				}
				$('.content').css('left',number);
			},10);
		}
		AutoPlay();

		// 鼠标滑入暂停
		$('.content li').mouseenter(function(){
			clearTimeout(timer);
		}).mouseleave(function(){
			AutoPlay();
		})
	})
</script>
</html>

G-Q

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
无缝跑马灯图片轮播

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;无缝跑马灯图片轮播&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt; &lt;styl
复制链接

扫一扫