G-Q的专栏

G-Q的博客

无缝跑马灯图片轮播

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gq15238209541/article/details/79976732
文章标签: html js
个人分类: jquery h5 前端
上一篇浅谈挖矿获取比特币
想对作者说点什么? 我来说一句

HTML跑马灯无缝滚动

2010年08月13日 1KB 下载

无缝跑马灯

2011年11月02日 3KB 下载

没有更多推荐了,返回首页

关闭
关闭