JQuery(1)：使用JQuery實現輪播圖效果

1.前言

​ 使用JQuery實現輪播圖的效果，我還用原生JS實現了輪播圖，效果和功能都是一樣，參考文章《JavaScript(3)：使用JS實現輪播圖效果》。

​ 如有侵權下方評論聯繫作者刪除

2.實現功能

​ (1) 輪播圖上有兩個按鈕，分別位於左側和右側，實現跳轉到上一張圖片和下一張圖片的功能。

​ (2) 圖片右下角有三個小圓點，會隨着圖片的變化而變化，和圖片相對應。鼠標放入小圓點，實現圖片更換。

​ (3) 實現自動播放，沒隔2000毫秒自動更換圖片。鼠標移入圖片，自動播放失效，移出圖片，自動播放又設置生效。

3.代碼實現

​ （1）css樣式

			* {
				margin: 0px;
				padding: 0px;
			}

			li {
				list-style: none;
			}

			img {
				border: none;
				vertical-align: bottom;
			}

			a {
				text-decoration: none;
			}

			.banner {
				width: 665px;
				height: 340px;
				border: 2px solid deeppink;
				margin: 100px auto;
				position: relative;
			}

			.list li {
				width: 665px;
				height: 340px;
				/*定位疊加*/
				position: absolute;
				left: 0px;
				top: 0px;
				/*隱藏*/
				display: none;
				z-index: 99;
			}

			.list li.active {
				display: block;
			}

			.banner>a {
				width: 59px;
				height: 80px;
				/*display: block;*/
				/*background: red;*/
				/*定位疊加*/
				position: absolute;
				top: 50%;
				margin-top: -40px;
				z-index: 100;
				/*設置透明度   0-1值   */
				opacity: 0.5;
			}

			.banner>a:hover {
				opacity: 0.8;
			}

			.prev {
				left: 0px;
				background: url(imgs/pre.png);
			}

			.next {
				right: 0px;
				background: url(imgs/next.png);
			}

			.number {
				position: absolute;
				z-index: 100;
				width: 60px;
				right: 10px;
				bottom: 10px;
			}

			.number span {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				float: left;
				margin: 0px 5px;
				cursor: pointer;
			}

			.number .current {
				background: deepskyblue;
			}

​ （2）js代碼

	//定義信號量 
	var n = 0;
	//點擊下一張
	$('.next').click(rightBtn);
	//上一張
	$('.prev').click(function() {
		n--; 
		n = n < 0 ? $('.list li').length - 1 : n;//驗證
		play();//調用設置方法
	});

	//鼠標移入小圓點
	$('.number span').each(function(m) {
		$(this).mouseenter(function() {
			n = m;//聯動
			play();//設置 
		});
	});

	//自動播放 定時器
	var timer = setInterval(rightBtn, 2000);

	//鼠標移入移出, 介紹方法:hover(鼠標移入的執行函數，鼠標移出的執行函數)
	$('.banner').hover(function() {
		//定時器清除
		clearInterval(timer);
	}, function() {
		//開定時器
		timer = setInterval(rightBtn, 2000);
	});


	//封裝設置
	function play() {
		//設置  當前顯示，其它元素隱藏
		$('.list li').eq(n).addClass('active').siblings('li').removeClass('active');
		//小圓點跟隨 ,有相同的下標，對應 
		$('.number span').eq(n).addClass('current').siblings().removeClass('current');
	};

	//封裝右邊按鈕事件
	function rightBtn() {
		n++; //累加
		n = n > $('.list li').length - 1 ? 0 : n;//驗證
		play();//調用設置方法
	}

（3）html

		<div class="banner">
			<!--按鈕-->
			<a href="javascript:;" class="prev"></a>
			<a href="javascript:;" class="next"></a>

			<!--輪播的項-->
			<ul class="list">
				<li class="active"><a href=""><img src="imgs/1.jpg" /></a></li>
				<li><a href=""><img src="imgs/2.jpg" /></a></li>
				<li><a href=""><img src="imgs/3.jpg" /></a></li>
			</ul>

			<!--小圓點-->
			<div class="number">
				<!--<span class="current">1</span>
	      <span>2</span>
	      <span>3</span>-->
				<span class="current"></span>
				<span></span>
				<span></span>
			</div>
		</div>

4.效果展示