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

本文介绍了一种通过复制首张图片至末尾实现焦点图无缝轮播的方法,并提供了完整的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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值