练习demo

最新推荐文章于 2023-12-03 23:51:58 发布

jiepp

最新推荐文章于 2023-12-03 23:51:58 发布

阅读量116

点赞数

文章标签：轮播

本文链接：https://blog.csdn.net/jiepp/article/details/101150952

版权

轮播图demo

编辑器制作效果展示：

页面展示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0;padding: 0;list-style: none;overflow: hidden;transition: all 0.5s}
        #ul {width: 500%;height: 100%;background-color:#eee;position: absolute;left: 0}
        #ul li {width: 20%;height: 100%;float: left}
        #ul li img {width: 100%;height: 100%}
        #d {width: 100%;height: 50%;position: absolute}
        .bt {font-size: 20px;position: absolute;bottom: 10px;bottom: 39%;border: 0;outline: 0;width: 4%;height: 20%;background-color: #ca9dee;border-radius: 20%}
        .bt:hover {color: white;background-color: #a474be;transform: scaleX(1.2) scaleY(1.1)}
        .bt1 {left: 1%}
        .bt2 {right: 1%}
        #ul1 {opacity: 0.7;width: 25%;height: 10%;background-color: #c3f2fc;position: absolute;bottom: 5%;border-radius: 25px;left: 36%}
        #ul1 li {cursor: pointer;width: 10%;height: 100%;border-radius: 30%;background-color: #d5e7c2;float: left;text-align: center;margin-left: 8.5%;line-height: 30px}
        #ul1 li:hover {background-color: black;color: white;transform: scale(0.95);border-radius: 50%}
        #ul1 li:active {transform: scale(0.7)}
        .act {background-color: black !important;color: white}
    </style>
</head>
<body>
<div id="d">
    <ul id="ul">
        <li><img src="img/slide1.jpg" alt="图片"></li>
        <li><img src="img/slide2.jpg" alt="图片"></li>
        <li><img src="img/slide3.jpg" alt="图片"></li>
        <li><img src="img/slide4.jpg" alt="图片"></li>
        <li><img src="img/slide5.jpg" alt="图片"></li>
    </ul>
    <ul id="ul1">
        <li class="act">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button class="bt bt1">←</button>
    <button class="bt bt2">→</button>
</div>
<script>
    var timer;
    var obt = document.querySelectorAll(".bt");
    var oli = document.querySelector("#ul1").querySelectorAll("li");
    var oul = document.querySelector("#ul");
    var od = document.querySelector("#d");
    var speed = oul.offsetWidth / 5;
    obt[0].addEventListener("click", run);
    obt[1].addEventListener("click", run);
    // 设置轮播切换
    for (var i = 0; i < oli.length; i++) {
        oli[i].addEventListener("click", run);
        function run() {
            var num = parseInt(this.innerText);
            oul.style.left = -speed * (num - 1) + "px";
            n = num - 1;
            runli(n);
        }
    }
    // 给轮播图添加定时器
    function cr() {
        timer = setInterval(function () {
            var n = Math.abs(oul.offsetLeft) / speed;
            if (n > 3) {
                n = -1;
            }
            var v = n + 1;
            runli(v);
            if (oul.offsetLeft < -speed * 3) {
                oul.style.left = 0 + "px";
            } else {
                oul.style.left = oul.offsetLeft - speed + "px";
            }
        }, 1000)
    }
    cr();
    od.addEventListener("mouseover", () => {
        clearInterval(timer)
    });
    od.addEventListener("mouseout", () => {
        cr()
    });
    // od.addEventListener("mouseover",function () {
    //     clearInterval(timer);
    // });
    // od.addEventListener("mouseout",function () {
    //     cr();
    // });
    // 利用window.onresize来响应式布局
    window.onresize = function () {
        oul.style.left = "0px";
        speed = oul.offsetWidth / 5;
        runli(0);
    }
    // 判断触发的按钮
    function run(e) {
        var e = e || event;
        var ov = e.srcElement;
        obt[0].disabled = true;
        obt[1].disabled = true;
        setTimeout(function () {
            obt[0].disabled = false;
            obt[1].disabled = false;
        }, 500)
        ov.innerText == "←" ? (run1()) : (run2());
       // 按钮组的切换
        function run1() {
            oul.offsetLeft > -10 ? (oul.style.left = -oul.offsetWidth / 5 * 4 + "px") : (oul.style.left = oul.offsetLeft + speed + "px");
            var n = Math.abs(oul.offsetLeft) / speed;
            if (n < 1) {
                n = 5;
            }
            var v = n - 1;
            runli(v);
        }
        // 按钮组的切换
        function run2() {
            oul.offsetLeft < -oul.offsetWidth / 5 * 3 ? (oul.style.left = 0 + "px") : (oul.style.left = oul.offsetLeft - speed + "px");
            var n = Math.abs(oul.offsetLeft) / speed;
            if (n > 3) {
                n = -1;
            }
            var v = n + 1;
            runli(v);
        }
    }
    // 样式的更替
    function runli(n) {
        for (var j = 0; j < oli.length; j++) {
            oli[j].className = "";
        }
        oli[n].className = "act";
    }
    // var s=window.location.search;
    // var h=window.location.hostname;
    // var p=window.location.pathname;
    // var po=window.location.port;
    // var str=h+":"+po+p+s;
    // window.open(str,"脚本1314520","width=400,height=400");
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！

jiepp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习demo

轮播图demo编辑器制作效果展示：代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * {margin: 0;padding...
复制链接

扫一扫