js实现轮播图

1.问题描述

利用js实现轮播图的功能，并且拥有按钮控制图片的切换，当鼠标移入时当前图片停止切换，移出之后接着跳转。

 

2.问题分析

  • 首先构建相应的页面，设置css属性,再通过js获取相应的页面内容，对其做出相应的操作；
  • 图片切换利用定时器实现图片的切换，先将其隐藏起来，再通过js更改相应的css属性，使其显现；
  • 设置切换按钮，点击之后切换到上一张图片或者下一张图片；
  • 最后设置一个鼠标移入移出的事件，当鼠标移入之后图片停止切换，移出计时器从当前开始计时。

 

3.代码的实现

（1）HTML代码

　　

<body>
    <div class="big">
        <ul>
            <li class="item active"><a href=""><img src="../img/01.webp" alt=""></a></li>
            <li class="item"><a href=""><img src="../img/02.webp" alt=""></a></li>
            <li class="item"><a href=""><img src="../img/03.webp" alt=""></a></li>
            <li class="item"><a href=""><img src="../img/04.webp" alt=""></a></li>

        </ul>
        <div id="btn-left">
            <</div> <div id="btn-right">>
        </div>
    </div>
    <div class="circles">
        <div class="circle white"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

</body>

 

（2）CSS代码

<style>
        .big {
            width: 500px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;
            position: relative;
        }

        ul li {
            list-style: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }

        li a img {
            width: 100%;
            height: 100%;

        }

        .item {
            opacity: 0;
        }

        .active {
            opacity: 1;
        }

        .circles {
            position: absolute;
            top: 300px;
            right: 650px;
        }

        .white {
            background-color: white;
        }

        .circle {
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            border-radius: 50%;
            margin-left: 5px;
            float: left;
        }

        #btn-left {
            width: 30px;
            height: 69px;
            font-size: 30px;
            color: white;
            background-color: rgba(0, 0, 0, 0.4);
            line-height: 69px;
            padding-left: 5px;
            z-index: 10;
            /*始终显示在图片的上层*/
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-60%);
            /*使按钮向上偏移居中对齐*/
            cursor: pointer;
            opacity: 0;
            /* 平时隐藏 */
        }

        .big:hover #btn-left {
            /*鼠标滑入，显示图标*/
            opacity: 1;
        }

        #btn-right {
            width: 26px;
            height: 69px;
            font-size: 30px;
            color: white;
            background-color: rgba(0, 0, 0, 0.4);
            line-height: 69px;
            padding-left: 5px;
            z-index: 10;
            position: absolute;
            right: 0;
            top: 50%;
            cursor: pointer;
            opacity: 0;
            transform: translateY(-60%);
        }

        .big:hover #btn-right {
            /*鼠标滑入，显示图标*/
            opacity: 1;
        }

（3）JS代码

<script>
    //获取对应的元素
    var img = document.getElementsByClassName("item");
    var big = document.querySelector(".big")
    var circle = document.getElementsByClassName("circle");
    var btnleft = document.getElementById("btn-left")
    var btnright = document.getElementById("btn-right")
    var i = 0;
    var timer;
    var index;

    //图片圆点实现切换，进行循环跳转
    function move() {
        i = i % 4;
        img[i].className = "item active";
        circle[i].className = "circle white";
        if (i == 0) {
            circle[i + 3].className = "circle ";
        } else {
            circle[i - 1].className = "circle ";
        }
    }
    //设置定时器，两秒切换一次图片
    timer = setInterval(function () {
        i++;
        if (i == 4) {
            i = 0;
            clear();
        }
        move();
    }, 2000)
    //清除函数，只允许一个页面和小圆点展示
    function clear() {
        for (var j = 0; j < circle.length; j++) {
            if (j == i) {
                img[i].className = "item active";
                circle[i].className = "circle white";
            }else{
                img[j].className = "item";
                circle[j].className = "circle";
            }
        }
    }
    //鼠标移入事件，当鼠标移入时，计时器停止
    big.onmouseover = function () {
        clearInterval(timer);
    }
    //鼠标移出事件，鼠标移出之后，计时器接着开始计时
    big.onmouseleave = function () {
        timer = setInterval(function () {
            i++;
            if (i == 4) {
                i = 0;
                clear();
            }
            move();

        }, 2000)
    }
        //图片向左切换，点击回到上一张图片
    btnleft.onclick = function () {
        i--;
        if (i==-1) {
            i = 3;
        }
        clear();
    }
    //图片向右切换，点击回到下一张图片
    btnright.onclick = function () {
        i++;
        if (i==4) {
            i = 0;
        }
        clear();
    }
</script>

4.效果展示

 

posted @ 2022-08-06 16:31  啊wei  阅读(136)  评论(0)    收藏  举报