轮播图有很多种实现方法,这是其中一种最清晰的方法。思路很清晰,代码很简单,欢迎大佬多指教。

先来看下效果图,嫌麻烦就不用具体图片来实现了,主要是理清思路。(自动轮播,左右按钮切换图片,小圆点切换图片,鼠标移入暂停轮播,鼠标移出继续轮播)


HTML

首先是html内容,布局很简单,一个图片列表,一个点列表,两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据(下面JS代码会提到)。记得给默认显示的图片和对应的小圆点加上active类哦。

         
  • 0
  • 1
  • 2
  • 3
  • 4

CSS

思路:父容器list相对定位,item绝对定位,实现让所有图片重叠在父容器内。利用z-index来设置图片高度,图片高度最高会显示在顶层上。那么整个容器中,左右切换按钮和小圆点始终要在最顶层,不能被图片覆盖,所以他们的z-index一定要比图片高。active是一个样式,给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果,opacity完全不透明到透明,再加个transition动画效果。最后就是cursor给小圆点添加“小手指”,其他就没什么好说的了。

        .wrap {            width: 800px;            height: 400px;            position: relative;        }        .list {            width: 800px;            height: 400px;            position: relative;            padding-left: 0px;        }        .item {            width: 100%;            height: 100%;            list-style: none;            position: absolute;            left: 0;            opacity: 0;            transition: all .8s;        }        .item:nth-child(1) {            background-color: skyblue;        }        .item:nth-child(2) {            background-color: yellowgreen;        }        .item:nth-child(3) {            background-color: rebeccapurple;        }        .item:nth-child(4) {            background-color: pink;        }        .item:nth-child(5) {            background-color: orange;        }        .item.active {            z-index: 10;            opacity: 1;        }        .btn {            width: 60px;            height: 100px;            z-index: 100;            top: 150px;            position: absolute;        }        #leftBtn {            left: 0px;        }        #rightBtn {            right: 0px;        }        .pointList {            list-style: none;            padding-left: 0px;            position: absolute;            right: 20px;            bottom: 20px;            z-index: 200;        }        .point {            width: 10px;            height: 10px;            background-color: antiquewhite;            border-radius: 100%;            float: left;            margin-right: 8px;            border-style: solid;            border-width: 2px;            border-color: slategray;            cursor: pointer;          }        .point.active{            background-color: cadetblue;        }    

Javascript

Index可以说是整个代码里面的”核心”,先封装一个清除active的方法,这里面要清除图片的active(显示在最上层),比如切换到下一张图上张图的active就要清除。还有point的active(图片对应小圆点改变样式)。然后goIndex这个方法就是给图片和对应的小圆点同时加上active,左右按钮绑定的方法就不说了。

用getAttribute拿到刚才给li标签绑定的data-index属性,绑定图片index = pointindex,就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了,就可以实现图片切换小圆点跟随变化的效果。

        var items = document.querySelectorAll(".item");//图片节点        var points = document.querySelectorAll(".point")//点        var left = document.getElementById("leftBtn");        var right = document.getElementById("rightBtn");        var all = document.querySelector(".wrap")        var index = 0;        var time = 0;//定时器跳转参数初始化                //封装一个清除active方法        var clearActive = function () {            for (i = 0; i < items.length; i++) {                items[i].className = 'item';            }            for (j = 0; j < points.length; j++) {                points[j].className = 'point';            }        }        //改变active方法        var goIndex = function () {            clearActive();            items[index].className = 'item active';            points[index].className = 'point active'        }        //左按钮事件        var goLeft = function () {            if (index == 0) {                index = 4;            } else {                index--;            }            goIndex();        }        //右按钮事件        var goRight = function () {            if (index < 4) {                index++;            } else {                index = 0;            }            goIndex();        }                //绑定点击事件监听        left.addEventListener('click', function () {            goLeft();            time = 0;//计时器跳转清零        })        right.addEventListener('click', function () {            goRight();            time = 0;//计时器跳转清零        })        for(i = 0;i  {            time ++;            if(time == 20 ){                goRight();                time = 0;            }            },100)    }        play();        //移入清除计时器        all.onmousemove = function(){            clearInterval(timer)        }       //移出启动计时器        all.onmouseleave = function(){            play();        }    

总结:这个简单的轮播图实现例子是第一次写最容易理解,逻辑最清晰的一种。下面我把完整的代码块放出来,直接复制粘贴就可以运行。


            .wrap {            width: 800px;            height: 400px;            position: relative;        }        .list {            width: 800px;            height: 400px;            position: relative;            padding-left: 0px;        }        .item {            width: 100%;            height: 100%;            list-style: none;            position: absolute;            left: 0;            opacity: 0;            transition: all .8s;        }        .item:nth-child(1) {            background-color: skyblue;        }        .item:nth-child(2) {            background-color: yellowgreen;        }        .item:nth-child(3) {            background-color: rebeccapurple;        }        .item:nth-child(4) {            background-color: pink;        }        .item:nth-child(5) {            background-color: orange;        }        .item.active {            z-index: 10;            opacity: 1;        }        .btn {            width: 60px;            height: 100px;            z-index: 100;            top: 150px;            position: absolute;        }        #leftBtn {            left: 0px;        }        #rightBtn {            right: 0px;        }        .pointList {            list-style: none;            padding-left: 0px;            position: absolute;            right: 20px;            bottom: 20px;            z-index: 200;        }        .point {            width: 10px;            height: 10px;            background-color: antiquewhite;            border-radius: 100%;            float: left;            margin-right: 8px;            border-style: solid;            border-width: 2px;            border-color: slategray;            cursor: pointer;          }        .point.active{            background-color: cadetblue;        }                
  • 0
  • 1
  • 2
  • 3
  • 4
var items = document.querySelectorAll(".item");//图片 var points = document.querySelectorAll(".point")//点 var left = document.getElementById("leftBtn"); var right = document.getElementById("rightBtn"); var all = document.querySelector(".wrap") var index = 0; var time = 0;//定时器跳转参数初始化 //清除active方法 var clearActive = function () { for (i = 0; i < items.length; i++) { items[i].className = 'item'; } for (j = 0; j < points.length; j++) { points[j].className = 'point'; } } //改变active方法 var goIndex = function () { clearActive(); items[index].className = 'item active'; points[index].className = 'point active' } //左按钮事件 var goLeft = function () { if (index == 0) { index = 4; } else { index--; } goIndex(); } //右按钮事件 var goRight = function () { if (index < 4) { index++; } else { index = 0; } goIndex(); } //绑定点击事件监听 left.addEventListener('click', function () { goLeft(); time = 0;//计时器跳转清零 }) right.addEventListener('click', function () { goRight(); time = 0;//计时器跳转清零 }) for(i = 0;i { time ++; if(time == 20 ){ goRight(); time = 0; } },100) } play(); //移入清除计时器 all.onmousemove = function(){ clearInterval(timer) } //移出启动计时器 all.onmouseleave = function(){ play(); }

创作不易,觉得有帮助的话请留下一个赞谢谢~