js图片滑动展示

gitee地址

https://gitee.com/ElevenHuntOne/js-image-slide

html

<!-- html里只用写一个div就行了,带上id为imgs -->
    <div id = "imgs"></div>

css

        /* 样式 */
        #imgs {
            margin-left: 10%;
            width: 80%;
            height: 240px;
            margin-top: 80px;
            background-color: azure;
            position: relative;
            overflow: hidden;
        }
        #imgs ul {
            position: absolute;
            padding: 0;
        }
        #imgs ul li {
            float: left;
            list-style: none;
            width: 260px;
            height: 200px;
        }
        #imgs ul li img{
            width: 240px;
            height: 200px;
        }

js

    // 滑动方法
    function scroll(to, time) {
        $("#imgs").find("ul").stop().animate({left:  to +  "px"}, time)
    }
    // 初始化方法
    $(function() {
        // 图片列表
        const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']
        // 滑动速度
        const speed = 800
        // 获取div然后循环往里边插入ul、li、img
        let div = document.getElementById("imgs")
        let ul = document.createElement("ul")
        ul.style.left = div.offsetWidth + "px"
        ul.style.width = 260 * imgList.length + "px"
        div.appendChild(ul)
        let toLeft = div.offsetWidth - 260 * imgList.length
        for(i in imgList) {
            imgPath = imgList[i]
            let li = document.createElement("li")
            let img = document.createElement("img")
            img.src = imgPath
            li.appendChild(img)
            ul.appendChild(li)
        }
        let time = speed * imgList.length
        let time1 = parseInt( (20 - toLeft) / 260 * speed)
        scroll(toLeft, time)
        // 通过计时器控制循环左右滑动
        setTimeout("scroll(20, " + time1 + ")", time)
        setTimeout("scroll(" + toLeft + ", " + time1 + ")", time + time1)
        setTimeout("setInterval('scroll(" + 20 + ", " + time1 + ");', "+ time1 * 2 +")", time)
        setTimeout("setInterval('scroll(" + toLeft + ", " + time1 + ");', "+ time1 * 2 +")", time + time1)
    });

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
        /* 样式 */
        #imgs {
            margin-left: 10%;
            width: 80%;
            height: 240px;
            margin-top: 80px;
            background-color: azure;
            position: relative;
            overflow: hidden;
        }
        #imgs ul {
            position: absolute;
            padding: 0;
        }
        #imgs ul li {
            float: left;
            list-style: none;
            width: 260px;
            height: 200px;
        }
        #imgs ul li img{
            width: 240px;
            height: 200px;
        }
    </style>
</head>
<body>

    <!-- html里只用写一个div就行了,带上id为imgs -->
    <div id = "imgs"></div>


</body>
<script>
    // 滑动方法
    function scroll(to, time) {
        $("#imgs").find("ul").stop().animate({left:  to +  "px"}, time)
    }
    // 初始化方法
    $(function() {
        // 图片列表
        const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']
        // 滑动速度
        const speed = 800
        // 获取div然后循环往里边插入ul、li、img
        let div = document.getElementById("imgs")
        let ul = document.createElement("ul")
        ul.style.left = div.offsetWidth + "px"
        ul.style.width = 260 * imgList.length + "px"
        div.appendChild(ul)
        let toLeft = div.offsetWidth - 260 * imgList.length
        for(i in imgList) {
            imgPath = imgList[i]
            let li = document.createElement("li")
            let img = document.createElement("img")
            img.src = imgPath
            li.appendChild(img)
            ul.appendChild(li)
        }
        let time = speed * imgList.length
        let time1 = parseInt( (20 - toLeft) / 260 * speed)
        scroll(toLeft, time)
        // 通过计时器控制循环左右滑动
        setTimeout("scroll(20, " + time1 + ")", time)
        setTimeout("scroll(" + toLeft + ", " + time1 + ")", time + time1)
        setTimeout("setInterval('scroll(" + 20 + ", " + time1 + ");', "+ time1 * 2 +")", time)
        setTimeout("setInterval('scroll(" + toLeft + ", " + time1 + ");', "+ time1 * 2 +")", time + time1)
    });
</script>
</html>
  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

bdu_zhangAo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值