jquery实现图片的跑马灯效果

最新推荐文章于 2025-06-22 10:35:52 发布

dae bal

最新推荐文章于 2025-06-22 10:35:52 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 jquery 遇到的问题之后的解决方法

本文链接：https://blog.youkuaiyun.com/baidu_39043816/article/details/109021708

前端同时被 3 个专栏收录

168 篇文章

订阅专栏

遇到的问题之后的解决方法

58 篇文章

订阅专栏

jquery

30 篇文章

订阅专栏

本文介绍两种实现无限循环轮播图的方法。一种通过不断复制元素达到无限滚动效果，但可能消耗较多内存；另一种设置最大位移限制，在达到限制时重新归零。代码示例展示了如何使用jQuery进行实现，并在鼠标悬停时暂停轮播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式一（无限循环，消耗内存）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="jquery-3.2.1.min.js"></script>
		<style>
			.ExpertList {
				margin: 0 auto;
				margin-top: 50px;
				overflow: hidden;
				position: relative;
				text-align: center;
				width: 1200px;
			}

			.ExpertList ul {
				overflow: auto;
			}

			.ExpertList ul li {
				float: left;
				box-sizing: border-box;
				text-align: center;
				display: inline-block;
				width: 200px;
				list-style: none;
			}

			.ExpertList ul li img {
				height: 140px;
			}

			.ExpertList ul li p {
				font-size: 14px;
				color: #000;
				line-height: 22px;
			}
		</style>
	</head>
	<body>
		<div class="ExpertList">
			<ul>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题</p>
				</li>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题2</p>
				</li>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题3</p>
				</li>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题4</p>
				</li>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题5</p>
				</li>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题6</p>
				</li>
				<li>
					<img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" />
					<p>Michael Littlewood</p>
					<p>标题7</p>
				</li>
			</ul>
			<!--左右白色渐变蒙版-->
			<div class="ExpertLeft"></div>
			<div class="Expertright"></div>
		</div>
		<script>
			//获取窗口的宽度
			var width_window = $(window).width();
			var liLengthu, BoxWidth, ExpertHtml, ExpertList;
			var a = 1,
				b = 1;
			$(function() {

				//轮播
				Expert();

			});

			function Expert() {
				//获取li的个数
				liLengthu = $(".ExpertList ul li").length;
				//获取轮播盒子的宽度
				BoxWidth = $(".ExpertList").outerWidth();
				//轮播的内容
				ExpertHtml = $(".ExpertList ul").html();

				//如果li的个数不够6个 就循环添加
				if (liLengthu < 6) {
					for (var i = liLengthu; i < 6; i++) {
						$(".ExpertList ul").append(ExpertHtml);
					}
				} else {

				}
				ExpertHtml = $(".ExpertList ul").html();
				$(".ExpertList ul").append(ExpertHtml);
				liLengthu = $(".ExpertList ul li").length;
				$(".ExpertList ul").css({
					"width": liLengthu * 200 + "px"
				});
				ExpertList = setInterval(ExpertBanner, 20);
			}

			//轮播
			function ExpertBanner() {
				a++;
				b++;
				if (b >= BoxWidth - 200) {
					b = 1;
					$(".ExpertList ul").append(ExpertHtml);
					liLengthu = $(".ExpertList ul li").length;
					$(".ExpertList ul").css({
						"width": liLengthu * 200 + "px"
					});
				} else {

				}
				$(".ExpertList ul").css({
					"margin-left": "-" + a + "px"
				});
			}
			//鼠标hover时 暂停轮播
			$(document).on("mouseover", ".ExpertList", function() {
				clearInterval(ExpertList);
			});
			//鼠标离开时 继续轮播
			$(document).on("mouseout", ".ExpertList", function() {
				ExpertList = setInterval(ExpertBanner, 20);
			});
		</script>
	</body>
</html>

样式二（也是无线循环但是设置了最值当它到2000px的时候归零）：

<!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: 250px;margin:0 auto;position:relative;overflow: hidden;}
		.content{width: 1000%;height: 250px;position: absolute;left:0;top:0;}
		.content li{width:200px;float: left;margin: 0 15px;}
	</style>
</head>
<body>
<div id="warp">
	<ul class="content">
		<li><a href="#"><img src="img.jpg"></a></li>
		<li><a href="#"><img src="img.jpg"></a></li>
		<li><a href="#"><img src="img.jpg"></a></li>
		<li><a href="#"><img src="img.jpg"></a></li>
		<li><a href="#"><img src="img.jpg"></a></li>
		<li><a href="#"><img src="img2.png"></a></li>
		<li><a href="#"><img src="img2.png"></a></li>
		<li><a href="#"><img src="img2.png"></a></li>
		<li><a href="#"><img src="img2.png"></a></li>
		<li><a href="#"><img src="img2.png"></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 == -2000){
					number = 0;
				}
				$('.content').css('left',number);
			},10);
		}
		AutoPlay();
 
		// 鼠标滑入暂停
		$('.content li').mouseenter(function(){
			clearTimeout(timer);
		}).mouseleave(function(){
			AutoPlay();
		})
	})
</script>
</html>

应用实例：

<style>
		*{margin:0;padding:0;}
		li{list-style: none;}
		.mult{background-position: center top;background-repeat: repeat-x;background-attachment: scroll;}
		.mult-demo12{position:relative;overflow: hidden;height: 250px;}
		.mult-demo12 .content{height: 250px;position: absolute;left:0;top:0;}
		.mult-demo12 .content li{width:300px;float: left;margin: 0 5px;}
		.mult-demo12 .content li img{width: 100%;}
		.mult .place_holder{height: 1px;}
</style>
<div class="layout mult">
	<div class="container mult-demo12">
		<ul class="content">
			<li class="dt12-li"><a href="<?php if($moduleset['link'] == 0){ echo $v['link']; }else{?>javascript:void(0);<?php }?>" class="clearfix"><img src="<?php echo $v['pic'];?>"></a></li>
		</ul>
	</div>
	<div class="container place_holder"></div>
</div>
<script>
	$(function(){
		var timer;
		var number = 0;
		
		var cont = document.getElementsByClassName('content')[0];
		cont.innerHTML += cont.innerHTML;
 
		function AutoPlay(){
			
			if($(window).width()>768 ){
				var mult_h=$(".mult").find(".place_holder").width()*0.25;//一排显示四个图片
			}else{
				var mult_h=$(".mult").find(".place_holder").width();
			}
		$(".dt12-li").css("width",mult_h);
		let num = $(".dt12-li").length*(mult_h+10);
		$(".mult-demo12").find(".content").css("width",num);
		var mult_h2=$(".mult").find(".place_holder").width();
		var num2=num-mult_h2;
			clearTimeout(timer);
			timer = setInterval(function(){
				number --;
				if(number == -num2){
					number = 0;
				}
				$('.content').css('left',number);
			},30);
		}
		AutoPlay();
 
		// 鼠标滑入暂停
		$('.content li').mouseenter(function(){
			clearTimeout(timer);
		}).mouseleave(function(){
			AutoPlay();
		})
	})
</script>