轮播图的实现代码

妖刀村雨

已于 2022-01-25 17:22:01 修改

阅读量4.5k

点赞数 7

文章标签： html css javascript

于 2022-01-22 16:08:51 首次发布

本文链接：https://blog.csdn.net/weixin_45273903/article/details/122638996

版权

<!DOCTYPE html>

<html>



<head>

    <title>轮播图的实现</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }



        .lunbo {

            width: 600px;

            height: 500px;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            margin: auto;

            border: 1px solid red;

        }



        .content {

            width: 100%;

            height: 100%;

        }



        #item {

            width: 100%;

            height: 100%;

        }



        li {

            list-style: none;

        }



        .item {

            position: absolute;

            height: 100%;

            width: 100%;

            opacity: 0;

            transition: 1s;

        }



        img {

            width: 100%;

            height: 100%;

        }



        .active {

            opacity: 1;

        }



        .left-btn {

            position: absolute;

            font-size: 75px;

            font-weight: 600;

            cursor: pointer;

            opacity: 0;

            left: 0;

            top: 50%;

            margin-top: -38px;

        }



        .right-btn {

            position: absolute;

            font-size: 75px;

            font-weight: 600;

            right: 0;

            opacity: 0;

            cursor: pointer;

            top: 50%;

            margin-top: -38px;

        }



        .content:hover .right-btn {

            opacity: 0.5;

        }



        .content:hover .left-btn {

            opacity: 0.5;

        }



        #tip {

            position: absolute;

            bottom: 20px;

            left: 50%;

            /* border:1px solid red; */

            transform: translateX(-50%);

            display: flex;

        }



        .tip {

            width: 20px;

            height: 20px;

            border-radius: 50%;

            background-color: grey;

            margin: 0 5px 0 5px;

            cursor: pointer;

        }



        .tomato {

            background-color: tomato;

        }

    </style>

    <script>

        window.onload = function () {

            var items = document.getElementsByClassName("item");

            var tips = document.getElementsByClassName("tip");

            var lbtn = document.getElementsByClassName("left-btn")[0];

            var rbtn = document.getElementsByClassName("right-btn")[0];

            var content = document.getElementsByClassName("content")[0];

            var test = document.getElementsByClassName("right-btn");

            console.log(test);

            var index = 0;

            var timer = null;

            console.log(test);

            //  清空class

            function clear() {

                for (let i = 0; i < items.length; i++) {

                    items[i].className = "item";

                    tips[i].className = "tip";

                    tips[i].setAttribute("num", i);

                }



            }



            // 图片转换

            function move() {

                clear();

                items[index].className = "item active";

                tips[index].className = "tip tomato";

            }

            // 左键

            lbtn.onclick = function () {

                if (index > 0) {

                    index--;

                }

                else {

                    index = items.length - 1;

                }

                move();



            }




            // 右键

            rbtn.onclick = function () {

                index++;

                index = index % items.length;



                move();

            }



            //定时器

            timer = setInterval(function () {

                rbtn.onclick();

            }, 2000);




            content.onmouseover = function () {

                clearInterval(timer);

            }





            content.onmouseleave = function () {

                clearInterval(timer);

                timer = setInterval(function () {

                    rbtn.onclick();

                }, 2000);

            }



            for (let i = 0; i < tips.length; i++) {

                tips[i].addEventListener("click", function () {

                    var number = this.getAttribute("num");

                    index = number;

                    move();

                })

            }




        }

       

    </script>



</head>



<body>



    <div class="lunbo">

        <div class="content">

            <ul id="item">

                <li class="item active">

                    <!-- #代表当前页面 -->

                 <a herf="#"><img src="叉号.png"> </a>//src后面跟的是图片地址，使用代码时自行更换

                </li>

                <li class="item">

                    <!-- #代表当前页面 -->

                    <a herf="#"><img src="电,闪电,电力,电量.png"> </a>        

                </li>

                <li class="item">

                    <!-- #代表当前页面 -->

                    <a herf="#"><img src="狗头.png"> </a>

                </li>

                <li class="item">

                    <!-- #代表当前页面 -->

                    <a herf="#"><img src="京东2.png"> </a>

                </li>

                <li class="item">

                    <!-- #代表当前页面 -->

                    <a herf="#"><img src="眼睛_显示.png"> </a>

                </li>

            </ul>



            <div class="left-btn">

                < </div>

                    <div class="right-btn"> > </div>



                    <ul id="tip">

                        <li class="tip tomato"></li>

                        <li class="tip"></li>

                        <li class="tip"></li>

                        <li class="tip"></li>

                        <li class="tip"></li>

                    </ul>




            </div>



        </div>

</body>




</html>

代码实现效果如下图：

点击页面图片开始自行循环滚动，当鼠标移入红色框内，图片停止滚动，红色框两边出现左右按钮。点击左右按钮可以实现切换上一张和下一张图片，或者直接点击下方小圆点，可以跳转到指定的图片，当鼠标移出时，图片将继续进行循环滚动。

妖刀村雨

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
轮播图的实现代码

<!DOCTYPE html><html><head> <title>轮播图的实现</title> <style> * { padding: 0; margin: 0; } .lunbo { width: 600px; height: 500px...
复制链接

扫一扫