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.效果展示