网站展示轮播图

最新推荐文章于 2022-08-03 14:57:16 发布

置顶 jiepp

最新推荐文章于 2022-08-03 14:57:16 发布

阅读量566

点赞数 1

文章标签：轮播图

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

版权

展示轮播图

网页展示：

网页展示

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d {margin: auto;position: absolute;left: 0;right: 0;top: -100px;bottom: 0;width: 500px;height: 310px}
        #u {list-style: none;position: relative;width: 480px;height: 310px;padding-top: 20px;transition: all 0.5s;background-color: #eee}  #u li {width: 445px;height: 285px;transition: all 0.8s;opacity: 0.1;position: absolute}
        #u li img {border-radius: 20px}
        #u:hover {transform: scale(0.95)}
        #u:hover li {transform: scale(1.1)}
        #o{list-style: none;position: absolute;right: -10px;bottom: -10px;right: 40px;z-index: 2}
        #o li {cursor: pointer;width: 20px;height: 20px;background-color: white;text-align: center;display: inline-block;text-align: center;line-height: 20px}
        .act {background-color: black !important;color: white}
        .act1 {opacity: 1 !important;z-index: 1}
    </style>
</head>
<body>
<div id="d">
    <ul id="u">
        <li class="act1"><img src="img/AD0I_PnABRACGAAgkvWXwAUonOj26QMwvQM4nQI!500x500.jpg" alt="图片"></li>
        <li><img src="img/AD0I_PnABRACGAAgkPWXwAUo5pO4jAQwvQM4nQI!500x500.jpg" alt="图片"></li>
        <li><img src="img/AD0I_PnABRACGAAgj-WXwAUoiYu7tgYwvQM4nQI!500x500.jpg" alt="图片"></li>
        <li><img src="img/AD0I_PnABRACGAAgjfWXwAUo4ITzwQMwvQM4nQI!500x500.jpg" alt="图片"></li>
    </ul>
    <ol id="o">
        <li class="act">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
<script>
    var num = 0;
    var oli = document.querySelectorAll("#o li");
    var oimg = document.querySelectorAll("#u li");
    var od = document.querySelector("#d");
    for (var i = 0; i < oli.length; i++) {
        // 建立双向绑定
        oli[i].index = i;
        oli[i].addEventListener("click", function () {
            num = this.index;
            run1();
            // 添加样式
            this.className = "act";
            oimg[this.index].className = "act1"
        })
    }
    // 清空样式的方法
    function run1() {
        for (var j = 0; j < oli.length; j++) {
            oli[j].className = ""
        }
        for (var j = 0; j < oimg.length; j++) {
            oimg[j].className = ""
        }
    }
    // 添加/删除轮播定时器
    function run() {
        var timer = setInterval(function () {
            var num1 = (num >= 3) ? (num = 0) : (++num);
            run1();
            oli[num1].className = "act";
            oimg[num1].className = "act1"
        }, 1000)
        od.addEventListener("mouseover", function () {
            clearInterval(timer)
        })
    }
    run();
    // 实现定时器切换
    od.addEventListener("mouseout", function () {
        run()
    })
</script>
</body>
</html>

全部代码作于2019年-9月-21日

jiepp

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网站展示轮播图

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

扫一扫