jq實(shí)現(xiàn)無縫輪播圖效果的方法是什么

發(fā)布時(shí)間：2020-08-31 13:51:53 來源：億速云閱讀：135 作者：小新欄目：web開發(fā)

小編給大家分享一下jq實(shí)現(xiàn)無縫輪播圖效果的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們?cè)诤芏嗟木W(wǎng)站上都可以看到輪播圖，例如在淘寶、京東這些網(wǎng)站都有輪播圖的存在；輪播圖的使用范圍非常廣，banner和animation很容易抓住用戶的眼球，所以做好這個(gè)也就是一個(gè)網(wǎng)頁一個(gè)app的關(guān)鍵之一。

輪播圖有多種實(shí)現(xiàn)方式，可以用css實(shí)現(xiàn)、用jQuery實(shí)現(xiàn)、甚至是用其他框架實(shí)現(xiàn)，下面我們就以jQuery方法舉例，用jQuery代碼做一個(gè)自動(dòng)+手動(dòng)輪播圖片的輪播圖效果。

jq實(shí)現(xiàn)無縫輪播圖效果（自動(dòng)輪播）的代碼示例：

html代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery實(shí)現(xiàn)無縫輪播圖</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代碼，代碼的結(jié)構(gòu)比較簡(jiǎn)單，這里解釋一下，ul.img標(biāo)簽是要左右移動(dòng)的，ul.img標(biāo)簽里就是輪播圖的主體內(nèi)容了；然后ul.num標(biāo)簽是提供索引和下標(biāo)控制符，綁定動(dòng)畫的，會(huì)通過jq代碼來控制數(shù)量與圖片一致。btn_l和tn_r類名的div標(biāo)簽是提供左右按鈕，這樣輪播圖就可以點(diǎn)擊實(shí)現(xiàn)手動(dòng)的左右滑動(dòng)。

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;
}


/*小圓點(diǎn)的樣式*/

.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文件，然后請(qǐng)注意一下各種屬性和值。

jquery代碼：

首先要引用jquery.js文件

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

注：想要使用jquery來實(shí)現(xiàn)各種效果，就必須要先引用jquery.js文件，在使用jquery代碼來實(shí)現(xiàn)各種效果。

在使用jquery語句來實(shí)現(xiàn)輪播效果：

<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('on');
			//鼠標(biāo)劃入圓點(diǎn)
			$(".banner .num li").hover(function() {
				var index = $(this).index();
				i = index;
				$(".banner .img").stop().animate({
					left: -index * 1000
				}, 500);
				$(this).addClass('on').siblings().removeClass('on');
			})

			/*輪播圖自動(dòng)輪播*/
			var t = setInterval(function() {
				i++;
				move();
			}, 2000);

			//對(duì)banner定時(shí)器的操作
			$(".banner").hover(function() {
				clearInterval(t);
			}, function() {
				t = setInterval(move, 2000);
			})

			/*向左按鈕*/
			$(".banner .btn_l").click(function() {
				i--;
				move();
			})
			/*向右按鈕*/
			$(".banner .btn_r").click(function() {
				i++;
				move();
			})
                        
                        /*封裝函數(shù)*/
			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('on').siblings().removeClass('on');
				} else {
					$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
				}
			}
		})
	</script>

我們來看看效果（靜態(tài)）：

jq實(shí)現(xiàn)無縫輪播圖效果的方法是什么

看完了這篇文章，相信你對(duì)jq實(shí)現(xiàn)無縫輪播圖效果的方法是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

jq實(shí)現(xiàn)無縫輪播圖效果的方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽