jQuery 无缝轮播

Posted 2020-08-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 无缝轮播相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

.bg{background: #FFF;}
*{margin: 0;padding: 0;}	
ol,ul{list-style: none;}

#play{width: 800px;height:532px;position: relative;overflow: hidden;}
#play #ul{position: absolute;}
#play #ul li{float: left;}
#play #ul li img{width: 800px; height:532px;}
#play #ol{width:100px;position: absolute;top:500px;left:360px;}
#play #ol li{width: 15px;height: 15px;border-radius: 50%;float: left;margin: 3px;border:1px solid red;}
#play #prev{ display:none;border:none;position: absolute;top:250px;width:30px;font-size: 40px;left:15px;background:rgba(0,0,0,0.5)}
#play #next{ display:none;border:none;position: absolute;top:250px;width:30px;font-size: 40px;right:15px;background:rgba(0,0,0,0.5)}

</style>
<script src="jquery-1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="play">
	<ul id="ul">
		<li><img src="images/1.jpg" ></li>
		<li><img src="images/2.jpg" ></li>
		<li><img src="images/3.jpg" ></li>
		<li><img src="images/4.jpg" ></li>
	</ul>
	<ol id="ol">
		<li class="bg"></li>	
		<li></li>	
		<li></li>	
		<li></li>	
	</ol>
	<button id="prev"><</button>
	<button id="next">></button>
</div>	
<script>

	// 获取第一个图片 节点对象
	var firstImg = $(‘#ul li‘).first().clone();
	// 放在 ul 的最后
	$(‘#ul‘).append(firstImg).width($(‘#ul li‘).length*$(‘#ul img‘).width());

	var i = 0;

	var timer;

	autoPlay();

	// 下一张
	$(‘#next‘).click(function(){
		i++;
		moveImg(i);
	})


	// 上一张
	$(‘#prev‘).click(function(){
		i--;
		moveImg(i);
	})


	// auto play
	function autoPlay(){
		timer = setInterval(function(){
			i++;
			moveImg(i);
		}, 1000);

	}


	function moveImg(num){

		// 如果是最后一张图片我们怎么办
		if(i==$(‘#ul li‘).length){
			i = 1;
			$(‘#ul‘).css({left:0});
		}

		// 是第一张
		if(i==-1){
			i=$(‘#ul li‘).length-2;
			$(‘#ul‘).css({left:($(‘#ul li‘).length-1)*-800});
		}

		// 移动图片
		$(‘#ul‘).stop().animate({left:i*-800},400);	

		// 换小点的标记
		if(i==($(‘#ul li‘).length-1)){
			$(‘#ol li‘).eq(0).addClass(‘bg‘).siblings().removeClass(‘bg‘);
		}else{
			$(‘#ol li‘).eq(i).addClass(‘bg‘).siblings().removeClass(‘bg‘);
		}
	}


	$(‘#play‘).mouseover(function(){
		$(‘#prev‘).show();
		$(‘#next‘).show();
		clearInterval(timer);
	}).mouseout(function(){
		$(‘#prev‘).hide();
		$(‘#next‘).hide();
		autoPlay();
	})


	// 点击小图标 跳转到指定的页面
	$(‘#ol li‘).click(function(){
		i = $(this).index();	
		moveImg(i);
	})

</script>
</body>
</html>

以上是关于jQuery 无缝轮播的主要内容，如果未能解决你的问题，请参考以下文章