1.假设html、css您已经完成,使用JavaScript编写一个简单的轮播图,能实现按下左按钮或者右按钮移动图片即可,不需要无缝轮播。
3条回答 默认 最新
- 一只熊的北极 2021-07-05 16:53关注
完整的js轮播,自动轮播,按钮控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport"> <title>Document</title> <link rel="stylesheet" href=""/> <style> *{ margin:0; padding:0; list-style:none; text-decoration:none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body{ background:#eee; } #Bigbox{ width:720px; height:420px; border:1px solid #333; margin:60px auto; } #Box{ width:700px; height:400px; position:relative; overflow: hidden; top:10px; left:10px; } #Ul{ height:400px; position:absolute; top:0; left:0; } #Ul li{ width:700px; height:400px; float:left; } #Left{ width:60px; height:50px; border-radius:30%; background:rgba(96,96,96,.5); position:absolute; top:50%; left:0; margin-top:-25px; color:#fff; line-height:50px; text-align:center; cursor:pointer; font-size:20px; display:none; } #Right{ width:60px; height:50px; border-radius:30%; background:rgba(96,96,96,.5); position:absolute; top:50%; right:0; margin-top:-25px; color:#fff; line-height:50px; text-align:center; cursor:pointer; font-size:20px; display:none; } </style> </head> <body> <div id="Bigbox"> <div id="Box"> <ul id="Ul"> <li> <img src="img/1.jpg" width="100%" height="100%"> </li> <li> <img src="img/2.jpg" width="100%" height="100%"> </li> <li> <img src="img/3.jpg" width="100%" height="100%"> </li> <li> <img src="img/4.jpg" width="100%" height="100%"> </li> <li> <img src="img/5.jpg" width="100%" height="100%"> </li> <li> <img src="img/6.jpg" width="100%" height="100%"> </li> <li> <img src="img/7.jpg" width="100%" height="100%"> </li> <li> <img src="img/8.jpg" width="100%" height="100%"> </li> <li> <img src="img/9.jpg" width="100%" height="100%"> </li> <li> <img src="img/10.jpg" width="100%" height="100%"> </li> </ul> <div id="Left" onselectstart="return false">左</div> <div id="Right" onselectstart="return false">右</div> </div> </div> <script> window.onload = function(){ var n = 0; var timer = null; var timer1 = null; var timer2 = null; var timer3 = null; var oDiv = document.getElementById('Box') var oUl = document.getElementById('Ul') var oLi = oUl.getElementsByTagName('li') //获取div宽度 var oDivWidth = getStyle(oDiv,'width').split('px')[0] //复制oUl的innerHTML oUl.innerHTML+= oUl.innerHTML //设置ul宽度 oUl.style.width = oLi.length*oDivWidth+'px' //获取ul宽度 var oUlWidth = getStyle(oUl,'width').split('px')[0] //封装获取非行间样式函数 function getStyle(obj,sName){ if(obj.currentStyle){ return obj.currentStyle[sName]; }else{ return getComputedStyle(obj,false)[sName]; } } //执行函数 clearInterval(timer3) timer3 = setInterval(function(){ Run() },2000) //封装运动函数 function Run(){ clearInterval(timer) timer = setInterval(function(){ n-=20; oUl.style.left = n+'px' if(n%oDivWidth==0){ clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1 = setTimeout(function(){ Run() },2000) } if(n<=-oUlWidth/2){ oUl.style.left = 0; n=0; clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1 = setTimeout(function(){ Run() },2000) } },30) } //鼠标移入停止滚动 oDiv.onmouseover = function(){ Left.style.display = 'block' Right.style.display = 'block' clearInterval(timer3) clearInterval(timer2) timer2 = setInterval(function(){ if(n%oDivWidth==0){ clearInterval(timer) clearInterval(timer1) } },30) } //鼠标移出继续执行 oDiv.onmouseout = function(){ Left.style.display = 'none' Right.style.display = 'none' clearInterval(timer3) clearInterval(timer2) clearInterval(timer1) timer1 = setTimeout(function(){ Run() },2000) } //向左 Left.onclick = function(){ //清除所有定时器 clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) timer = setInterval(function(){ n-=50; oUl.style.left = n+'px' if(n%oDivWidth==0){ clearInterval(timer) } if(n<=-oUlWidth/2){ oUl.style.left = 0; n=0; } },30) } //向右 Right.onclick = function(){ clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) if(n==0){ n=-oUlWidth/2 } clearInterval(timer) timer = setInterval(function(){ n+=50; oUl.style.left = n+'px' if(n%oDivWidth==0){ clearInterval(timer) } },30) } } //哈哈 </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 关于#Java#的问题,如何解决?
- ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
- ¥15 想问一下树莓派接上显示屏后出现如图所示画面,是什么问题导致的
- ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
- ¥15 cmd cl 0x000007b
- ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
- ¥500 火焰左右视图、视差(基于双目相机)
- ¥100 set_link_state
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化