纯HTML+JS实现轮播 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简轮播图</title>
    <style>
        /* 这里控制鼠标悬停时图片上浮10px，当然在JS中也可以完成 */
        img:hover {
            transform: translate(0, 0px);
            padding-bottom: 10px;
        }
    </style>
</head>

<body>
    <div>
        <!--添加两个按钮和默认出现的图-->
        <button onclick="prev()"> 上一个 </button>
        <!-- 设置鼠标移入和移出时的触发事件 -->
        <img id="slider" src="http://cdn.wuliwu.top/girlcar-lengthcenter" onmousemove="clearTimeout(meter1)"
            onmouseout="int()" />
        <button onclick="next()"> 下一个 </button>
    </div>
    <script>
        var images = [
            "http://cdn.wuliwu.top/girlcar-lengthcenter",
            "http://cdn.wuliwu.top/girlcat-lengthcenter",
            "http://cdn.wuliwu.top/girleat-lengthcenter"
        ];
        var slider = document.getElementById("slider");
        var num = 0;
        function next() {
            num++;
            if (num >= images.length) {
                num = 0;
            }
            slider.src = images[num];
        }
        //  上一个按钮点击事件
        function prev() {
            num--;
            if (num < 0) {
                num = images.length - 1;
            }
            slider.src = images[num];
        }
        // 计时器触发函数
        function int() {
            next();
            meter1 = setTimeout('int()', 2000);
        }
        // 这里要先调用一下，在页面打开就执行轮播
        int();
    </script>
</body>

</html>

　　

posted @ 2019-11-07 15:22  chalkbox  阅读(881)  评论(1)  编辑  收藏  举报