欢迎光临
我的个人博客网站

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) 打赏
未经允许不得转载:张拓的天空 » js图片滑动展示
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏