JS实现轮播图效果(有详细注释)

轮播图

这个代码是博主在学到DOM节点的属性和方法后写的,还没有学习事件,所以可能会有些复杂,但对于初学者可以用来学习逻辑思路。
JS代码如下,有详细注释,html和css都是很基础的代码,也放在文章末尾了。
效果展示:点我查看页面效果(图片来源网络)

JS

//获取图片地址(自行更改)
let imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg'];
//只有轮播效果,立即执行函数
(function(){
     
    let i = 0;
    setInterval(
        function () {
     
            i++;
            i == imgArr.length ? i = 0 : "";
            document.getElementsByClassName("box1")[0].src = `${
       imgArr[i]}`;
        }, 1500
    );
})();

//有轮播效果,并且能选择到某张图片
for (let index in imgArr) {
     
    let doteEle = document.getElementsByClassName("dote")[0];
    //创建圆点
    doteEle.innerHTML += `${
       index})">`;
}
//声明j(必须在轮播函数外声明,才能使用停止时间函数)
let j;
//轮播函数,要传参
function lun(i) {
     
    //获取圆点
    let spEle = document.getElementsByClassName("dote")[0].children;
    //判断传参的i,如果是next,即下一张
    if (i == "next") {
     
        //遍历所有的圆点(遍历圆点相当于在遍历图片)
        for (let index in imgArr) {
     
            //如果最后一个圆点的背景色为白色,即当前展示的图片是最后一张
            if (spEle[imgArr.length - 1].style.backgroundColor == "white") {
     
                //则让i=0,即下标变为了0,然后从59行开始执行,就从第一张开始展示
                i = 0;
            }
            //如果下标为index的圆点背景色为白色,即当前展示的图片是下标为index的图片
            else if (spEle[index].style.backgroundColor == "white") {
     
                //则让i=index+1,但index是字符串,所有要先-0,让它的数据类型隐式转换为number;
                //即下标变成了当前图片的下一张,然后从第59行开始执行
                i = index - 0 + 1;
            }
        }
    }
    //判断传参的i,如果是previous,即上一张,同下一张的写法
    if (i == "previous") {
     
        for (let index in imgArr) {
     
            if (spEle[0].style.backgroundColor == "white") {
     
                i = imgArr.length - 1;
            }
            else if (spEle[index].style.backgroundColor == "white") {
     
                i = index - 1;
            }
        }
    }
    //先遍历所有点,让所有点的背景颜色变成默认的
    for (let index in imgArr) {
     
        spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
    }
    //每次调用前先停止时间函数
    clearInterval(j);
    //展示下标为i的图片(必须在进行时间函数前先展示传参进来的下标为i的图片,因为时间函数是先等一个时间再进行执行函数,就会出现第一张有多的时间展示)
    document.getElementsByClassName("box2")[0].src = `${
       imgArr[i]}`;
    //让下标为i的点变颜色,即让它选中(同61行原因)
    spEle[i].style.backgroundColor = "white";
    //进行时间函数,从选中的点的下一张开始
    j = setInterval(
        function () {
     
            //先遍历所有点,让所有点的背景颜色变成默认的
            for (let index in imgArr) {
     
                spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
            }
            //从选中的点的下一张开始进行时间函数,即下标加一
            i++;
            //如果下标等于图片数组的长度,就让下标等于0,即展示第一张
            i == imgArr.length ? i = 0 : "";
            //变图片
            document.getElementsByClassName("box2")[0].src = `${
       imgArr[i]}`;
            //变点的颜色
            spEle[i].style.backgroundColor = "white";
        }, 1500
    )
}
//打开网页就从下标为0的图片开始执行轮播函数
lun(0);

HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>轮播图title>
head>
<body>
    <div>
        <h4>只有轮播效果h4>
        <img src="./img/1.jpg" class="box1">
    div>
    <div>
        <h4>有轮播效果,并且能选择到某张图片h4>
        <span class="jianleft" onclick="lun('previous')"><span>
        <span class="jianright" onclick="lun('next')">>span>
        <img src="./img/1.jpg" class="box2">
        <div class="dote">div>
    div>
    <script src="lunbo.js">script>
body>
html>

CSS

div {
     
    width: 512px;
    margin: auto;
    position: relative;
}
img {
     
    width: 512px;
    height: 288px;
    vertical-align: bottom;
}
.dote {
     
    position: absolute;
    bottom: 0;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dote>span {
     
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 2px;
}
span[class^="jian"]{
     
    position: absolute;
    top:50%;
    margin-top: -50%;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
    line-height: 50px;
    color: white;
}
.jianleft{
     
    left: 0;
}
.jianright{
     
    right: 0;
}

效果展示:点我查看页面效果(图片来源网络)

你可能感兴趣的:(JavaScript学习笔记,javascript,css,html,html5,es6)