码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2020-03-03 12:38:31      阅读：73      评论：0      收藏：0      [点我收藏+]

标签：圆点   首页   step   type   func   load   无限循环   let   doctype   

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

技术图片

循环式（淘宝首页）

技术图片

大概思路：

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

                    <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>

  2. 不用left来做，用translate3d来做，虽然不知道为什么，但是确实很丝滑，而且也解决了快速点击的时候多事件冲突的问题

  3. 逻辑链如下：

    • 鼠标移入的时候，页面不轮播；移出后开始轮播
    • 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>
  • JS
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);
        }
    }
}
  • CSS
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

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

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

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

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


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

.leftArr {
    cursor: pointer;
    width: 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;
    width: 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;
    width: 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;
    width: 93px;
    height: 30px;
    bottom: 7px;
    right: 300px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.dot ul li {
    list-style: none;
    width: 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;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #Fff;
    margin: 5px 6px;
}

跳跃式（京东首页）

技术图片

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

大概思路：

  1. 每个图片和小圆点所在的li设置一个.active的类，表示当前展示的
  2. 页面加载完以后用一个定时器开始轮播，如果鼠标移入的话停止轮播
  3. 点击箭头和移入圆点的话会切换页面
  4. 切换逻辑为：将当前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>
  • JS
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 {
    width: 700px;
    height: 420px;
    padding: 7px;
    position: relative;
    border: solid 1px gray;
}

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

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

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

.screen li.active {
    display: block;
}

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

.leftArr {
    cursor: pointer;
    width: 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;
    width: 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;
    width: 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;
    width: 93px;
    height: 30px;
    bottom: 7px;
    right: 300px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.dot ul li {
    list-style: none;
    width: 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;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #Fff;
    margin: 5px 6px;
}

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

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

  1. 把CSS中的该段删去

    .screen li.active {
    display: block;
}

  2. 把对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>

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

  3. 引用JQ，分别替换JS中的

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

    为

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

  4. 最终效果如图

    技术图片

  5. 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>

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

标签：圆点   首页   step   type   func   load   无限循环   let   doctype   

原文地址：https://www.cnblogs.com/cpaulyz/p/12401559.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！