自动轮播图代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | <!doctype html> <html lang= "en" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> <title>轮播图</title> <style type= "text/css" > *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative; } .screen{ width:500px; height:200px; overflow:hidden; position:relative; } .screen li{ width:500px; height:200px; overflow:hidden; float :left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float :left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} .all ol li.current{ background:yellow;} #arr {display: none;} #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;} </style> <script> window.onload = function () { //需求:无缝滚动。 //思路:赋值第一张图片放到ul的最后,然后当图片切换到第五张的时候 // 直接切换第六章,再次从第一张切换到第二张的时候先瞬间切换到 // 第一张图片,然后滑动到第二张 //步骤: //1.获取事件源及相关元素。(老三步) //2.复制第一张图片所在的li,添加到ul的最后面。 //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。 //4.鼠标放到ol的li上切换图片 //5.添加定时器 //6.左右切换图片(鼠标放上去隐藏,移开显示) var screen = document.getElementById( "screen" ); var ul = screen.children[0]; var ol = screen.children[1]; var div = screen.children[2]; var imgWidth = screen.offsetWidth; //2 var tempLi = ul.children[0].cloneNode( true ); ul.appendChild(tempLi); //3 for ( var i = 0; i < ul.children.length - 1; i++) { var newOlLi = document.createElement( "li" ); newOlLi.innerHTML = i + 1; ol.appendChild(newOlLi); } var olLiArr = ol.children; olLiArr[0].className = "current" ; //4 for ( var i = 0, len = olLiArr.length; i < len; i++) { olLiArr[i].index = i; olLiArr[i].onmouseover = function (ev) { for ( var j = 0; j < len; j++) { olLiArr[j].className = "" ; } this .className = "current" ; key = square = this .index; animate(ul, - this .index * imgWidth); } } //5 var key = 0; var square = 0; var timer = setInterval(autoPlay, 1000); screen.onmouseover = function (ev) { clearInterval(timer); div.style.display = "block" ; } screen.onmouseout = function (ev) { timer = setInterval(autoPlay, 1000); div.style.display = "none" ; } //6 var divArr = div.children; divArr[0].onclick = function (ev) { key--; if (key < 0) { ul.style.left = -(ul.children.length-1) * imgWidth + "px" ; key = 4; } animate(ul, -key * imgWidth); square--; if (square < 0) { square = 4; } for ( var k = 0; k < len; k++) { olLiArr[k].className = "" ; } olLiArr[square].className = "current" ; } divArr[1].onclick = autoPlay; function autoPlay() { key++; //当不满足下面的条件是时候,轮播图到了最后一个孩子,进入条件中后,瞬移到 //第一张,继续滚动。 if (key > ul.children.length - 1) { ul.style.left = 0; key = 1; } animate(ul, -key * imgWidth); square++; if (square > 4) { square = 0; } for ( var k = 0; k < len; k++) { olLiArr[k].className = "" ; } olLiArr[square].className = "current" ; } function animate(ele,target){ clearInterval(ele.timer); var speed = target>ele.offsetLeft?10:-10; ele.timer = setInterval(function () { var val = target - ele.offsetLeft; ele.style.left = ele.offsetLeft + speed + "px" ; if (Math.abs(val)<Math.abs(speed)){ ele.style.left = target + "px" ; clearInterval(ele.timer); } },10) } } </script> </head> <body> <div class = "all" id= 'all' > <div class = "screen" id= "screen" > <ul id= "ul" > <li><img src= "images1.jpg" width= "500" height= "200" /></li> <li><img src= "images2.jpg" width= "500" height= "200" /></li> <li><img src= "images3.jpg" width= "500" height= "200" /></li> <li><img src= "images4.jpg" width= "500" height= "200" /></li> <li><img src= "images5.jpg" width= "500" height= "200" /></li> </ul> <ol> </ol> <div id= "arr" > <span id= "left" ><</span> <span id= "right" >></span> </div> </div> </div> </body> </html> |
本文作者:vkd
本文链接:https://www.cnblogs.com/de-ming/p/14039209.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件