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

其他 2020-03-03 12:50:51 阅读次数: 0

最近刚好重新看了一下前端的内容，在做网页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中的该段删去

    扫描二维码关注公众号，回复： 9550268 查看本文章 
    .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>

猜你喜欢

转载自www.cnblogs.com/cpaulyz/p/12401559.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022