纯HTML/CSS/JS实现淘宝、京东两种轮播图

最近刚好重新看了一下前端的内容，在做网页banner的时候实现轮播图上遇到了问题。
本着不想用轮子的心态，在网上查了半天很多实现有点问题（逼死强迫症
于是对着淘宝和京东首页两种不同的轮播图做了一个实现。

循环式（淘宝首页）

大概思路：

为了实现无限循环，在第一张图前放一个最后一张图，最后一张图后面放一个第一张图

                <li><img src="image3.jpg" alt=""></li>
                <li><img src="image1.jpg" alt=""></li>
                <li><img src="image2.jpg" alt=""></li>
                <li><img src="image3.jpg" alt=""></li>
                <li><img src="image1.jpg" alt=""></li>

不用left来做，用translate3d来做，虽然不知道为什么，但是确实很丝滑，而且也解决了快速点击的时候多事件冲突的问题
逻辑链如下：
- 鼠标移入的时候，页面不轮播；移出后开始轮播
- click左右或者鼠标移入下面小圆圈的时候进行跳转
- 其余见JS注释

总体布局

DIV	position
.banner 总的div	相对布局
.screen 放图像的	相对布局
.dot 圆点	绝对布局
.arr 箭头	绝对布局

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="lbt_tb.css" />
    <script src="lbt_tb.js"> </script>
</head>

<body>
    <div class="banner" id ="banner">
        <div class="screen">
            <ul id="img" style="transform: translate3d(-700px,0px,0px) ;transition-duration: 0.3s;">
                <li><img src="image3.jpg" alt=""></li>
                <li><img src="image1.jpg" alt=""></li>
                <li><img src="image2.jpg" alt=""></li>
                <li><img src="image3.jpg" alt=""></li>
                <li><img src="image1.jpg" alt=""></li>
            </ul>
        </div>
        <div class="dot">
            <ul id="circles">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="leftArr" id="left">
            <</div> <div class="rightArr" id="right">>
        </div>
    </div>
</body>

</html>

window.onload = function () {
    var step = -700; //步距
    var banner = document.getElementById("banner");
    var img = document.getElementById("img")
    var circles = document.getElementById("circles").children;
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var index = 0;
    var len = circles.length;
    var run;

    function turn() {
        run = setInterval(function () {
            circles[index].removeAttribute("class");
            index++;
            move(index);
            console.log(index);
            if (index == len) {
                index = 0;
            }
            circles[index].className = "active";
            console.log("change" + index);
        }, 4000);
    }
    //启动时，调用函数
    turn();

    // 设置鼠标移入时暂停
    banner.onmouseenter = function () {
        //当鼠标移入容器中，停止轮播
        clearInterval(run);
    }
    banner.onmouseleave = function () {
        //当鼠标移出容器时，继续开始轮播
        turn();
    }
    // 设置鼠标移到圆点上时候的事件
    for (let i = 0; i < len; i++) {
        circles[i].onmouseenter = (function (i) {
            return function () {
                circles[index].removeAttribute("class");
                index = i;
                move(index);
                circles[index].className = "active";
                console.log("mouse circle change" + index);
            }
        })(i);
    }

    // 设置左箭头事件
    left.onclick = function () {
        circles[index].removeAttribute("class");
        index--;
        move(index);
        if (index < 0) {
            index = len - 1;
        }
        circles[index].className = "active";
        console.log("left change" + index);
    }
    // 设置右箭头事件
    right.onclick = function () {
        circles[index].removeAttribute("class");
        index++;
        move(index);
        if (index == len) {
            index = 0;
        }
        circles[index].className = "active";
        console.log("right change" + index);
    }

    function move(index) {
        img.style.transform = 'translate3d(' + (index + 1) * step + 'px,0px,0px)';
        img.style.transitionDuration = '0.3s';
        // 为了实现无限轮播的一些处理
        if (index < 0) {
            setTimeout(function () {
                img.style.transitionDuration = '0s';
                img.style.transform = 'translate3d(' + len * step + 'px,0px,0px)';
            }, 300);
        }
        if (index == len) {
            setTimeout(function () {
                img.style.transitionDuration = '0s';
                img.style.transform = 'translate3d(' + -700 + 'px,0px,0px)';
            }, 300);
        }
    }
}

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

div.banner {
     700px;
    height: 420px;
    padding: 7px;
    position: relative;
    border: solid 1px gray;
}

.screen {
     700px;
    height: 420px;
    overflow: hidden;
    position: relative;
}

.screen ul {
    position: absolute;
    top: 0px;
     3500px;
}

.screen li {
     700px;
    height: 420px;
    float: left;
    overflow: hidden;
}


img {
    height: 100%;
     100%;
    z-index: 0;
}

.leftArr {
    cursor: pointer;
     30px;
    height: 50px;
    position: absolute;
    top: 150px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 50px;
}

.rightArr {
    cursor: pointer;
     30px;
    height: 50px;
    position: absolute;
    top: 150px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 50px;
}

.icon-dot {
    display: inline-block;
     40px;
    height: 40px;
    background-color: #333;
    background-clip: content-box;
    padding: 8px;
    border-radius: 50%;
    border: 8px solid #333;
    z-index: 1000;
}

.dot {
    cursor: pointer;
    position: absolute;
     93px;
    height: 30px;
    bottom: 7px;
    right: 300px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.dot ul li {
    list-style: none;
     15px;
    height: 15px;
    border-radius: 100%;
    background-color: #fff;
    float: left;
    margin: 7px 8px;
}

.dot ul li.active {
    transition: 0.5s;
    background-color: #fff;
    background-clip: content-box;
    padding: 2px;
     11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #Fff;
    margin: 5px 6px;
}

跳跃式（京东首页）

实现起来比第一种简单很多，页面布局稍有变化，不多赘述。

大概思路：

每个图片和小圆点所在的li设置一个.active的类，表示当前展示的
页面加载完以后用一个定时器开始轮播，如果鼠标移入的话停止轮播
点击箭头和移入圆点的话会切换页面
切换逻辑为：将当前index所指的li的.active去掉，找到目标index，将目标图片和圆点设为active

注：暂不实现渐变效果，具体实现见后续3

HTML

<body>
    <div class="banner" id="banner">
        <div class="screen">
            <ul id="imgs">
                <li class="active"><img id="slide1" src="image1.jpg" alt=""></li>
                <li><img id="slide2" src="image2.jpg" alt=""></li>
                <li><img id="slide3" src="image3.jpg" alt=""></li>
            </ul>
        </div>
        <div class="dot">
            <ul id="circles">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="leftArr" id="left">
            <</div> <div class="rightArr" id="right">>
        </div>
    </div>
</body>

window.onload = function () {
    var banner = document.getElementById("banner");
    var imgs = document.getElementById("imgs").children;
    var circles = document.getElementById("circles").children;
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var index = 0;
    var len = imgs.length;
    var run;
    console.log('onload');
    function turn() {
        run = setInterval(function () {
            imgs[index].removeAttribute("class");
            circles[index].removeAttribute("class");
            index++;
            console.log(index);
            if (index == len) {
                index = 0;
            }
            imgs[index].className = "active";
            circles[index].className = "active";
            console.log("change" + index);
        }, 2000);
    }
    //启动时，调用函数
    turn();
    //设置鼠标移入移出容器事件
    banner.onmouseenter = function () {
        //当鼠标移入容器中，停止轮播
        clearInterval(run);
    }
    banner.onmouseleave = function () {
        //当鼠标移出容器时，继续开始轮播
        turn();
    }
    // 设置鼠标移到圆点上时候的事件
    for (let i = 0; i < len; i++) {
        circles[i].onmouseenter = (function (i) {
            return function () {
                imgs[index].removeAttribute("class");
                circles[index].removeAttribute("class");
                index = i;
                imgs[index].className = "active";
                circles[index].className = "active";
                console.log("mouse circle change" + index);
            }
        })(i);
    }
    // 设置左箭头事件
    left.onclick = function () {
        imgs[index].removeAttribute("class");
        circles[index].removeAttribute("class");
        index--;
        if(index<0){
            index = len-1;
        }
        imgs[index].className = "active";
        circles[index].className = "active";
        console.log("left change" + index);
    }
    // 设置右箭头事件
    right.onclick = function () {
        imgs[index].removeAttribute("class");
        circles[index].removeAttribute("class");
        index++;
        if(index==len){
            index = 0;
        }
        imgs[index].className = "active";
        circles[index].className = "active";
        console.log("right change" + index);
    }
}

CSS布局

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

div.banner {
     700px;
    height: 420px;
    padding: 7px;
    position: relative;
    border: solid 1px gray;
}

.screen {
     700px;
    height: 420px;
    overflow: hidden;
    position: relative;
}

.screen ul {
    position: absolute;
    top: 0px;
    left: 0px;
     700px;
}

.screen li {
     700px;
    height: 420px;
    float: left;
    display: none;
    overflow: hidden;
}

.screen li.active {
    display: block;
}

img {
    height: 100%;
     100%;
    z-index: 0;
}

.leftArr {
    cursor: pointer;
     30px;
    height: 50px;
    position: absolute;
    top: 150px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 50px;
}

.rightArr {
    cursor: pointer;
     30px;
    height: 50px;
    position: absolute;
    top: 150px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 50px;
}

.icon-dot {
    display: inline-block;
     40px;
    height: 40px;
    background-color: #333;
    background-clip: content-box;
    padding: 8px;
    border-radius: 50%;
    border: 8px solid #333;
    z-index: 1000;
}

.dot {
    cursor: pointer;
    position: absolute;
     93px;
    height: 30px;
    bottom: 7px;
    right: 300px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.dot ul li {
    list-style: none;
     15px;
    height: 15px;
    border-radius: 100%;
    background-color: #fff;
    float: left;
    margin: 7px 8px;
}

.dot ul li.active {
    transition: 0.5s;
    background-color: #fff;
    background-clip: content-box;
    padding: 2px;
     11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #Fff;
    margin: 5px 6px;
}

三、在跳跃式的基础上实现渐变

用JQ的fadeIn()实现，注意使用前要用加个stop()，不然在快速点几下会错乱

把CSS中的该段删去

.screen li.active {
    display: block;
}

把对HTML中的<body>进行修改

<li class="active"><img id="slide1" src="image1.jpg" alt=""></li>

改为

<li style="display: block;"><img id="slide1" src="image1.jpg" alt=""></li>

来使得一开始第一张图片会显示

引用JQ，分别替换JS中的

imgs[index].removeAttribute("class");
imgs[index].className = "active";

为

$("#imgs").find("li").hide();
$("#imgs").find("li").eq(index).stop().fadeIn("1000");

最终效果如图
HTML+JS代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="lbt_jd.css" />
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        window.onload = function () {
            var banner = document.getElementById("banner");
            var imgs = document.getElementById("imgs").children;
            var circles = document.getElementById("circles").children;
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            var index = 0;
            var len = imgs.length;
            var run;
            console.log('onload');
            function turn() {
                run = setInterval(function () {
                    var imgs = $("#imgs");
                    imgs.find("li").hide();
                    circles[index].removeAttribute("class");
                    index++;
                    console.log(index);
                    if (index == len) {
                        index = 0;
                    }
                    imgs.find("li").eq(index).stop().fadeIn("1000");
                    circles[index].className = "active";
                    console.log("change" + index);
                }, 2000);
            }
            //启动时，调用函数
            turn();
            //设置鼠标移入移出容器事件
            banner.onmouseenter = function () {
                //当鼠标移入容器中，停止轮播
                clearInterval(run);
            }
            banner.onmouseleave = function () {
                //当鼠标移出容器时，继续开始轮播
                turn();
            }
            // 设置鼠标移到圆点上时候的事件
            for (let i = 0; i < len; i++) {
                circles[i].onmouseenter = (function (i) {
                    return function () {
                        $("#imgs").find("li").hide();
                        circles[index].removeAttribute("class");
                        index = i;
                        $("#imgs").find("li").eq(index).stop().fadeIn("1000");
                        circles[index].className = "active";
                        console.log("mouse circle change" + index);
                    }
                })(i);
            }
            // 设置左箭头事件
            left.onclick = function () {
                $("#imgs").find("li").hide();
                circles[index].removeAttribute("class");
                index--;
                if (index < 0) {
                    index = len - 1;
                }
                $("#imgs").find("li").eq(index).stop().fadeIn("1000");
                circles[index].className = "active";
                console.log("left change" + index);
            }
            // 设置右箭头事件
            right.onclick = function () {
                $("#imgs").find("li").hide();
                circles[index].removeAttribute("class");
                index++;
                if (index == len) {
                    index = 0;
                }
                $("#imgs").find("li").eq(index).stop().fadeIn("1000");
                circles[index].className = "active";
                console.log("right change" + index);
            }

        }</script>

</head>

<body>
    <div class="banner" id="banner">
        <div class="screen">
            <ul id="imgs">
                <li style="display: block;"><img id="slide1" src="image1.jpg" alt=""></li>
                <li><img id="slide2" src="image2.jpg" alt=""></li>
                <li><img id="slide3" src="image3.jpg" alt=""></li>
            </ul>
        </div>
        <div class="dot">
            <ul id="circles">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="leftArr" id="left">
            <</div> <div class="rightArr" id="right">>
        </div>
    </div>
</body>

</html>

相关阅读:
建立连接数据库时要输入哪些信息？
如何建立一个JDBC程序？
如何在网上找MySQL数据库的JDBC驱动jar包？
gorm连接mysql数据库
 Django ORM的骚操作
 Python 发送企业微信单发和群发机器人
 python获取指定间隔日期列表
 表名小写_set.all()再根据字段过滤
 foreignkey相关的参数
 Django 模型层-多表操作
原文地址：https://www.cnblogs.com/cpaulyz/p/12401559.html