无缝跑马灯图片轮播

原创 2018年04月17日 16:27:43
<!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

无缝跑马灯

  • 2011年11月02日 09:22
  • 3KB
  • 下载

js实现走马灯效果(无缝衔接)

需要注意的是,scrollLeft属性只有当他内部元素超出父级元素时才有效,否则将一直为0, 可以将scrollLeft想象成有横向的滚动条, 而scrollLeft++则相当于将滚动条向右拖动,...
  • normol
  • normol
  • 2017-09-04 20:23:03
  • 1202

各种跑马灯,图片分块轮播,无自动

  • 2015年05月13日 10:55
  • 96KB
  • 下载

JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动

1 一 2 二 3 三 5 四 6 五 4 六
  • leiyonglin
  • leiyonglin
  • 2011-08-19 18:00:28
  • 9205

js 案例-6 无缝轮播图

无缝轮播图
  • u011301203
  • u011301203
  • 2016-09-09 23:22:58
  • 1179

【JavaScript】 跑马灯 间歇无缝上下滚动

先看效果吧: 然后是代码: HTML: &amp;lt;div class=&quot;new&quot;&amp;gt; &amp;lt;ul&amp;gt; ...
  • IT429
  • IT429
  • 2017-06-15 21:43:22
  • 799

纯css图片无缝走马灯效果源码

  • 2011年11月11日 16:07
  • 169KB
  • 下载

flash无缝走马灯滚动源码【带链接和鼠标悬停】

  • 2009年08月04日 10:30
  • 165KB
  • 下载

wpf跑马灯与图片翻转效果WpfMarquee

  • 2012年07月05日 15:24
  • 6.32MB
  • 下载

JS原生代码实现图片轮播无缝切换的一种思路

JS实现图片轮播是个老生常谈的问题,也是新手的必由之路,在这里提供一种思路,供大家参考: 1.生成DIV做外框,并设置overflow:hidden;  // 每个方法都必须有的 2.创建一个数组ar...
  • hnxieyi
  • hnxieyi
  • 2016-05-02 23:27:33
  • 12887
收藏助手
不良信息举报
您举报文章:无缝跑马灯图片轮播
举报原因:
原因补充:

(最多只允许输入30个字)