码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!