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

2021-04-12 10:27

阅读：828

YPE html>

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

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

技术图片

循环式（淘宝首页）

技术图片

大概思路：

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

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

总体布局

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

HTML





Document


        
            

                
                
                
                
            

        
            

                

                

            


        
             >
        
    




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 

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;
}
跳跃式（京东首页）

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

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

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

HTML


    
        
            

                
                
            

        
            

                

                

            


        
             >
        
    


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 

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()，不然在快速点几下会错乱


把CSS中的该段删去
.screen li.active {
    display: block;
}


把对HTML中的进行修改

改为

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


引用JQ，分别替换JS中的
imgs[index].removeAttribute("class");
imgs[index].className = "active";
为
$("#imgs").find("li").hide();
$("#imgs").find("li").eq(index).stop().fadeIn("1000");


最终效果如图


HTML+JS代码








Document


        
            

                
                
            

        
            

                

                

            


        
             >
        
    


纯HTML/CSS/JS实现淘宝、京东两种轮播图
标签：圆点   首页   step   type   func   load   无限循环   let   doctype   
原文地址：https://www.cnblogs.com/cpaulyz/p/12401559.html