前端学习-jQuery实现焦点图无缝轮播特效

最新推荐文章于 2023-06-28 14:53:42 发布

原创最新推荐文章于 2023-06-28 14:53:42 发布 · 806 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #焦点图 #无缝轮播 #定时器

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种通过复制首张图片至末尾实现焦点图无缝轮播的方法，并提供了完整的jQuery代码示例。

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

焦点图无缝轮播原理：一开始先把第一张图片克隆并粘贴在图片列表的最后，我简单用数字代表图片一下，1 2 3 4 5 1,这里的数字就是不同的图片，可以看见有五张不同的图片，但是要把第一张复制粘贴到列表的最后，这样我们在滑动到 5 这张图片的时候再滑动就可以无缝到"第一张"的感觉，但是还没完，得想办法回去真正的第一张，我们就可以用一个if来判断，当无缝滑动到克隆的 1 以后，获取图片列表对象，调用css方法设置left回到第一张，这个办法回去肉眼是看不出来的，是一瞬间的事情，所以继续滑动也就形成了完美的无缝循环。接下来是代码。

<script src="js/jquery-3.3.1.js"></script>
<script>
	$(document).ready(function(){
	
		
		/*按钮移入效果*/
		$(".image-box  .btn_L").mouseover(function(){
			
			$(this).css({"color":"#4B0082","font-size":"45px","font-weight":"bold"});
		})
		$(".image-box .btn_L").mouseout(function(){
			$(this).css({"color":"#fff","font-size":"35px","font-weight":"normal"});
		}) 
		
		$(".image-box  .btn_R").mouseover(function(){
		
			$(this).css({"color":"#4B0082","font-size":"45px","font-weight":"bold"});
		})
		$(".image-box .btn_R").mouseout(function(){
			$(this).css({"color":"#fff","font-size":"35px","font-weight":"normal"});
		}) 
		/*按钮移入效果*/
		
		
		/*图像移动函数*/
		var i = 0;
		
		var clone=$(".image-box .img li").first().clone();//复制第一张
		$(".image-box .img").append(clone);//粘贴复制的到列表后面
		var size = $(".image-box .img li").length;//获取图片长度
		
		$(".image-box .btn_L").click(function(){
			moveL();
		})
		$(".image-box .btn_R").click(function(){
			moveR();
		})
		
		function moveL()
		{
			i++;
			if(i==size)
				{
					$(".image-box .img").css({left:0});
					i = 1;
				}
			$(".image-box .img").stop().animate({left:-i*800},400);
			if(i == size-1)
			{
				$(".image-box .num li").eq(0).addClass("on").siblings().removeClass("on");
			}
			else
			{
				$(".image-box .num li").eq(i).addClass("on").siblings().removeClass("on");
			}
			
		}
		
		function moveR()
		{
			i--;
			if(i==-1)
			{
				$(".image-box .img").css({left:-(size-1)*800});
				i=size-2;
			}
			$(".image-box .img").stop().animate({left:-i*800},400);
			
			$(".image-box .num li").eq(i).addClass("on").siblings().removeClass("on");
			
		}
		/*图像移动函数*/
		
		/*鼠标滑入原点--很简单*/
		$(".image-box .num li").hover(function(){
			var index= $(this).index();
			i = index;
			/*获取完了就移动图像*/
			$(".image-box .img").stop().animate({left:-i*800},400);
			$(this).addClass("on").siblings().removeClass("on");
		})
		/*鼠标滑入原点--很简单*/
		
		
		
		
		/*自动滑动*/
		var T = setInterval(moveL,2000);//就是设置一个定时器就ok
		/*自动滑动*/
		
		/*对定时器的操作*/
		$(".image-box").hover(function(){
			clearInterval(T);//定时器的关闭		
		},function(){
			T = setInterval(moveL,2000);//定时器的重启
		})
		/*对定时器的操作*/
		
		
		
		
		
	});
	

</script>

下面是html，很简单，就一个div，那个图片的话可以根据自己项目的实际情况来更改

<body>
<div class="image-box">
			<ul class="img">
				<li><a href="#"><img alt="" src="images/one.jpg"></a></li>
				<li><a href="#"><img alt="" src="images/two.jpg"></a></li>
				<li><a href="#"><img alt="" src="images/three.jpg"></a></li>
				<li><a href="#"><img alt="" src="images/four.jpg"></a></li>
			</ul>
			
			<ul class="num">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			
			<div class="btn btn_L">&lt;</div>
			<div class="btn btn_R">&gt;</div>
			
		
		</div>
</body>

下面是css样式

<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style:none;
}

.image-box
{
	width:800px;
	height:500px;
	position:relative;
	border:3px solid  #000;
	margin:100px auto;
	overflow:hidden;
}

.image-box .img
{
	width:5000px;
	position:absolute;
	left:0;
	top:0;
}

.image-box .img li
{
	float:left;
}

.image-box .num
{
	position:absolute;
	width:100%;
	text-align:center;
	font-size:5px;
	left:0;
	bottom:10px;
}

.image-box .num li
{
	width:10px;
	height:10px;
	background:white;
	border-radius:50%;
	display:inline-block;/*一行显示*/
	margin: 0 3px;
	cursor:pointer;
	text-align:center;
}


.image-box .num li.on
{
	background:#DC143C;
}

.image-box .btn
{
	width:30px;
	height:50px;
	background:rgba(0,0,0,0.5);
	position:absolute;
	top:50%;
	margin-top:-25px;
	cursor:pointer;
	text-align:center;
	line-height:50px;
	color:#fff;
	font-size:35px;
	font-family:"宋体";
}

.image-box .btn_L
{
	left:0;
	
}
.image-box .btn_R
{
	right:0;
}




</style>

好了，到这里就实现了一个无缝轮播。