Rumah >hujung hadapan web >tutorial js >jq如何实现无缝轮播图效果（自动轮播）？（代码示例）

jq如何实现无缝轮播图效果（自动轮播）？（代码示例）

青灯夜游asal: 2018-10-26 15:36:2512170semak imbas

本篇文章给大家介绍jq实现无缝轮播图效果的方法，可以自动轮播，也可以手动点击切换轮播。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

我们在很多的网站上都可以看到轮播图，例如在淘宝、京东这些网站都有轮播图的存在；轮播图的使用范围非常广，banner和animation很容易抓住用户的眼球，所以做好这个也就是一个网页一个app的关键之一。

轮播图有多种实现方式，可以用css实现、用jQuery实现、甚至是用其他框架实现，下面我们就以jQuery方法举例，用jQuery代码做一个自动+手动轮播图片的轮播图效果。

jq实现无缝轮播图效果（自动轮播）的代码示例：

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现无缝轮播图</title>
		<link href="css/style.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div class="banner">
			<ul class="img">
				<li>
					<a href="#"><img src="img/1.jpg"></a>
				</li>
				<li>
					<a href="#"><img src="img/2.png"></a>
				</li>
				<li>
					<a href="#"><img src="img/1.jpg"></a>
				</li>
				<li>
					<a href="#"><img src="img/2.png"></a>
				</li>
			</ul>

			<ul class="num">
			</ul>
			<div class="btn btn_l">&lt;</div>
			<div class="btn btn_r">&gt;</div>
		</div>

	</body>
</html>

上面是html代码，代码的结构比较简单，这里解释一下，ul.img标签是要左右移动的，ul.img标签里就是轮播图的主体内容了；然后ul.num标签是提供索引和下标控制符，绑定动画的，会通过jq代码来控制数量与图片一致。btn_l和tn_r类名的div标签是提供左右按钮，这样轮播图就可以点击实现手动的左右滑动。

css代码：

* {
	padding: 0;
	margin: 0;
	list-style: none;
}

.banner {
	margin: 100px auto;
	border: 5px solid #000;
	width: 1000px;
	height: 640px;
	position: relative;
	overflow: hidden;
}

.banner .img {
	width: 5000px;
	position: absolute;
	left: 0px;
	top: 0px;
}

.banner .img li {
	float: left;
}

.banner .img li img {
	width: 1000px;
}


/*小圆点的样式*/

.banner .num {
	position: absolute;
	right: 40px;
	bottom: 30px;
}

.banner .num li {
	width: 20px;
	height: 20px;
	float: left;
	background: #333;
	margin-left: 20px;
	border-radius: 50px;
	border: 2px solid white;
}

.banner .num li.on {
	border: 2px solid #333;
	background: white
}


/*两边耳朵的样式*/

.banner .btn {
	position: absolute;
	width: 80px;
	height: 80px;
	background: rgba(0, 0, 0, 0.7);
	font-size: 60px;
	color: white;
	text-align: center;
	line-height: 80px;
	top: 50%;
	margin-top: -80px;
	cursor: pointer;
	display: none;
}

.banner:hover .btn {
	display: block;
}

.banner .btn_l {
	left: 10px;
	border-radius: 50%
}

.banner .btn_r {
	right: 10px;
	border-radius: 50%
}

我们链接的外部css文件，然后请注意一下各种属性和值。

jquery代码：

首先要引用jquery.js文件

<script type="text/javascript" src="s/jquery-1.7.2.min.js"></script>

注：想要使用jquery来实现各种效果，就必须要先引用jquery.js文件，在使用jquery代码来实现各种效果。

在使用jquery语句来实现轮播效果：

<script>
		$(function() {
			var i = 0;
			var clone = $(".banner .img li").first().clone();
			$(".banner .img").append(clone);
			var size = $(".banner .img li").size();
			for(var j = 0; j < size - 1; j++) {
				$(".banner .num").append("<li></li>");
			}
			$(".banner .num li").first().addClass(&#39;on&#39;);
			//鼠标划入圆点
			$(".banner .num li").hover(function() {
				var index = $(this).index();
				i = index;
				$(".banner .img").stop().animate({
					left: -index * 1000
				}, 500);
				$(this).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
			})

			/*轮播图自动轮播*/
			var t = setInterval(function() {
				i++;
				move();
			}, 2000);

			//对banner定时器的操作
			$(".banner").hover(function() {
				clearInterval(t);
			}, function() {
				t = setInterval(move, 2000);
			})

			/*向左按钮*/
			$(".banner .btn_l").click(function() {
				i--;
				move();
			})
			/*向右按钮*/
			$(".banner .btn_r").click(function() {
				i++;
				move();
			})
                        
                        /*封装函数*/
			function move() {
				if(i == size) {
					$(".banner .img").css({
						left: 0
					});
					i = 1;
				}
				if(i == -1) {
					$(".banner .img").css({
						left: -(size - 1) * 1000
					});
					i = size - 2;
				}

				$(".banner .img").stop().animate({
					left: -i * 1000
				}, 500);

				if(i == size - 1) {
					$(".banner .num li").eq(0).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
				} else {
					$(".banner .num li").eq(i).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
				}
			}
		})
	</script>

我们来看看效果（静态）：

总结：以上就是jQuery实现无缝轮播图效果的全部代码，大家可以自己动手尝试编译，看看效果，加深理解，制作属于自己的轮播图。希望能对大家的学习有所帮助，更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

Atas ialah kandungan terperinci jq如何实现无缝轮播图效果（自动轮播）？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：React下setState机制的简单介绍Artikel seterusnya：javascript发布订阅模式的详解（附示例）

Artikel berkaitan

Lihat lagi