图片轮播

最新推荐文章于 2025-05-22 13:28:11 发布

原创最新推荐文章于 2025-05-22 13:28:11 发布 · 4.9k 阅读

36 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

一、淡入淡出

轮播特点：

实现图片自动以淡入淡出的方式轮播，当鼠标悬停在图片上面的时候轮播停止；

图片下面表示顺序的原点会随着图片切换颜色改变，当鼠标悬停在圆点上时图片切换为鼠标当前悬停的圆点对应的图片；

图片两边代表左右的箭头在点击的时候切换前后的图片；

图片的淡入淡出轮播，可以理解为每一张图片切换到最上面的时候透明度由0慢慢变为1；


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .b{
            position: relative;
            width: 600px;
            height: 400px;
            border: 1px solid skyblue;
            margin: 100px auto;
        }
        .a{
            position: relative;
            width: 600px;
            height: 400px;
        }
        .a>img{
            position: absolute;
            width: 600px;
            height: 400px;
            transition: opacity 1s linear;
        }
        .imgop{
            opacity: 0;
        }
        .imgopshow{
            opacity: 1;
        }
        .dian {
            position: absolute;
            z-index: 99999;
            bottom: 20px;
            left: 40px;
            height: 13px;
        }

        .dian > div {
            width: 13px;
            height: 13px;
            border: 1px solid white;
            background-color: transparent;
            box-sizing: border-box;
            float: left;
            margin: 0 3px;
            border-radius: 50%;
            transition: background-color 1s linear;
        }

        .dbg {
            background-color: red !important;
        }
        .btn{
            width: 600px;
            height: 50px;
            position: absolute;
            z-index: 999;
            top: 175px;
        }
        .btnleft{
            cursor: pointer;
            display: block;
            width: 30px;
            height: 50px;
            background-color: silver;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            float: left;
        }
        .btnright{
            cursor: pointer;
            display: block;
            width: 30px;
            height: 50px;
            background-color: silver;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            float: right;
        }

    </style>
</head>
<body>
<div class="b">
    <div class="btn">
        <span class="btnleft"><</span>
        <span class="btnright">></span>
    </div>
    <div class="a">
        <img class="imgopshow" src="img/1.jpg">
        <img class="imgop" src="img/2.jpg">
        <img class="imgop" src="img/3.jpg">
        <img class="imgop" src="img/4.jpg">
        <img class="imgop" src="img/5.jpg">
        <img class="imgop" src="img/6.jpg">
        <img class="imgop" src="img/7.jpg">
        <img class="imgop" src="img/8.jpg">
    </div>
    <div class="dian">
        <div class="dbg"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
    var time;//接收计时器
    var aPar=document.getElementsByClassName("a")[0];
    var block=document.getElementsByClassName("b")[0];
    var dianpar = document.getElementsByClassName("dian")[0];
    var btnleft=document.getElementsByClassName("btnleft")[0];
    var btnright=document.getElementsByClassName("btnright")[0];
    var nowbg = dianpar.children[0];//当前变色的点元素

    //调整图片的顺序
    for (var i = 0; i < aPar.children.length; i++) {
        aPar.children[i].style.zIndex = aPar.children.length - i - 1;
    }
    showAnimate();
    function showAnimate(){
        time=setInterval(function(){
            countAnimate(1)
        },2000)
    }
    function countAnimate(num){
        for (var k = 0; k < num; k++) {
            for (var i = 0; i < aPar.children.length; i++) {
                var index = aPar.children[i].style.zIndex;
                index++;
                if (index == aPar.children.length) {
                    index = 0;
                    aPar.children[i].className = "imgop";
                    dianpar.children[i].className = "";
                }
                if (index == aPar.children.length - 1) {
                    dianpar.children[i].className = "dbg";
                    nowbg = dianpar.children[i];
                    aPar.children[i].className = "imgopshow";
                }
                aPar.children[i].style.zIndex = index;
            }
        }

    }
    for (var i = 0; i < dianpar.children.length; i++) {
        dianpar.children[i].index = i;
        dianpar.children[i].onmouseenter = function () {
            nowbg.className = "";
            this.className = "dbg";
            var num = 0;
            if (this.index - nowbg.index > 0) {
                num = this.index - nowbg.index;
            }
            else {
                num = dianpar.children.length - Math.abs(this.index - nowbg.index);
            }
            countAnimate(num);
            nowbg = this;
        }
    }

    block.onmouseenter=function(){
        clearInterval(time);
    };
    block.onmouseleave=function(){
        showAnimate();
    };
    btnleft.onclick=function(){
        countAnimate(7);
    };
    btnright.onclick=function(){
        countAnimate(1)
    };
    //处理浏览器的默认选择
    document.onselectstart=function(){
        return false;
    };
</script>
</body>
</html>

二、横向图片轮播


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            margin: 0 auto;
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .block > div:nth-child(1) {
            width: 4900px;
            height: 400px;
            margin-left: 0px;
        }

        .tranAnimate {
            transition: margin-left 0.5s ease-in-out;
        }

        .block > div > img {
            float: left;
            width: 700px;
            height: 400px;
        }

        .dian {
            position: absolute;
            width: 108px;
            height: 15px;
            bottom: 20px;
            left: 296px;
        }

        .dian > div {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: white;
            float: left;
            margin: 0 2px;
            border: 2px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="block">
    <div>
        <img src="./img/1.jpg" alt=""/>
        <img src="./img/2.jpg" alt=""/>
        <img src="./img/3.jpg" alt=""/>
        <img src="./img/4.jpg" alt=""/>
        <img src="./img/5.jpg" alt=""/>
        <img src="./img/6.jpg" alt=""/>
        <img src="./img/1.jpg" alt=""/>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<button id="btnright">向右</button>
<button id="btnleft">向左</button>
<script>
    var btnright = document.getElementById("btnright");
    var btnleft = document.getElementById("btnleft");
    var bpar = document.getElementsByClassName("block")[0];
    var dian = document.getElementsByClassName("dian")[0].children;
    var bimage = bpar.children[0];
    var count = 0;
    var time;
    dian[0].style.backgroundColor = "black";
    window.onload = showAnimate();
    function showAnimate() {
        time = setInterval(function () {
            Animate();
        }, 1500);
    }
    function Animate() {
        bimage.className = "tranAnimate";
        dian[count].style.backgroundColor = "white";
        count++;
        var index = count >= bimage.children.length - 1 ? 0 : count;
        dian[index].style.backgroundColor = "black";
        bimage.style.marginLeft = (-700 * count) + "px";
        //动画完成状态 0.5s
        setTimeout(function () {
            if (count >= bimage.children.length - 1) {
                count = 0;
                bimage.className = "";
                bimage.style.marginLeft = "0px";
            }
        }, 500);
    }
    for (var i = 0; i < dian.length; i++) {
        dian[i].index = i;
        dian[i].onmouseenter = function () {
            bimage.className = "tranAnimate";
            bimage.style.marginLeft = (-700 * this.index) + "px";
            dian[count].style.backgroundColor = "white";
            this.style.backgroundColor = "black";
            count = this.index;
        }
    }
    bpar.onmouseenter = function () {
        clearInterval(time);
    }
    bpar.onmouseleave = function () {
        showAnimate();
    }
    document.addEventListener("visibilitychange", function () {
        if (!document["hidden"]) {
            //激活
            showAnimate();
        } else {
            clearInterval(time);
        }
    });
    btnright.onmouseenter = function () {
        clearInterval(time);
    }
    btnright.onclick = function () {
        Animate();
    }
    btnleft.onmouseenter = function () {
        clearInterval(time);
    }
    btnleft.onclick = function () {
        dian[count].style.backgroundColor = "white";
        count--;
        if (count < 0) {
            bimage.className = "";
            count = 5;
            bimage.style.marginLeft = "-4200px";
            setTimeout(function () {
                bimage.className = "tranAnimate";
                bimage.style.marginLeft = (-700 * count) + "px";
            }, 1);
        }
        else {
            bimage.className = "tranAnimate";
            bimage.style.marginLeft = (-700 * count) + "px";
        }
        dian[count].style.backgroundColor = "black";
    }
</script>
</body>
</html>