JavaScript(3)：使用JS实现轮播图效果

1.前言

​ 使用原生JS实现轮播图的效果，也就是不用到其他js扩展库和框架实现的。此外，我还用jQuery实现了，效果和功能都是一样，参考文章《JQuery(1)：使用JQuery实现轮播图效果》。

​ 如有侵权下方评论联系作者删除

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;
    /*定位叠加*/
    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(img/pre.png);
}

.next {
     
    right: 0px;
    background: url(img/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 oBanner = document.querySelector('.banner');
	var oPrev = document.querySelector('.prev');
	var oNext = document.querySelector('.next');
	var oList = document.querySelector('.list');
	var aLi = oList.querySelectorAll('li');
	var oNum = document.querySelector('.number');
	var aSpan = oNum.querySelectorAll('span');

	var n = 0;
	//点击下一张事件
	oNext.onclick = rightBtn;
	//点击上一张事件
	oPrev.onclick = function() {
     
		//变化的量  
		n--;
		//验证
		n = n < 0 ? aLi.length - 1 : n;
		//调用设置方法
		play();
	};

	//小圆点交互，点击  鼠标移入  三个span都要有点击事件
	//批量监听
	for (var i = 0; i < aSpan.length; i++) {
     
		//会用到下标  IIFE
		(function(m) {
     
			//监听 m  012
			aSpan[m].onmouseover = function() {
     
				console.log(m);
				//操作n 桥接
				n = m;
				//调用设置方法
				play();
			};

		})(i);
	};


	//自动播放
	var timer;
	timer = setInterval(rightBtn, 2000);
	//鼠标移入
	oBanner.onmouseover = function() {
     
		//停止定时器
		clearInterval(timer);
	};
	//鼠标移出
	oBanner.onmouseout = function() {
     
		//开定时器
		timer = setInterval(rightBtn, 2000);
	};

	//封装右边按钮业务
	function rightBtn() {
     
		//变化的量  0123== 012012012
		n++;
		//验证
		n = n > aLi.length - 1 ? 0 : n;
		//调用设置方法
		play();

	};

	//封装
	function play() {
     
		//先让所有的隐藏  排它模型
		for (var i = 0; i < aLi.length; i++) {
      // 3
			aLi[i].style.display = 'none';
			//让所有的小圆点变白(去掉current类名)
			aSpan[i].className = '';
		};
		//让我当前元素显示，其它隐藏
		aLi[n].style.display = 'block';
		//小圆点跟随  也要用排它!!!   span 012对应li 012的下标  对应模型li的下标   n
		aSpan[n].className = 'current';
	};

（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="img/1.jpg" />a>li>
        <li><a href=""><img src="img/2.jpg" />a>li>
        <li><a href=""><img src="img/3.jpg" />a>li>
    ul>

    
    <div class="number">
        <span class="current">span>
        <span>span>
        <span>span>
    div>
div>

4.效果展示