轮播图 淩亂°似流年 2022-05-23 09:38 339阅读 0赞 废话不多说,直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box1 { margin: 100px auto; width: 670px; height: 320px; /*border:1px solid red;*/ position: relative; } .box1 ul li { list-style: none; width: 670px; height: 320px; /*display: none;*/ position:absolute; opacity:0; } .box1 ul li.cur1{ opacity:1; filter:alpha(opacity=0); } .box1 ul li img { width: 670px; height: 320px; } .box2 { position: absolute; width: 100%; top: 50%; margin-top: -27px; left: 0; cursor: pointer; z-index: 3; } .box2 .left { float: left; width: 55px; height: 55px; background: url(images/slide-btnL.png); } .box2 .right { float: right; width: 55px; height: 55px; background: url(images/slide-btnR.png); } .box1 ol { position:absolute; left:50%; margin-left: -68px; bottom: 10px; width: 135px; } .box1 ol li { list-style: none; float: left; width: 7px; height: 7px; border-radius: 6px; background: url(images/ico.png) no-repeat -138px -133px; margin: 0 10px; cursor: pointer; } .box1 ol li.cur2 { background: url(images/ico.png) no-repeat -125px -133px; } </style> </head> <body> <div class="box1" id="box1"> <ul> <li class="cur1"><a href="#"><img src="images/aaa.jpg" alt=""/></a></li> <li><a href="#"><img src="images/bbb.jpg" alt=""/></a></li> <li><a href="#"><img src="images/ccc.jpg" alt=""/></a></li> <li><a href="#"><img src="images/ddd.jpg" alt=""/></a></li> <li><a href="#"><img src="images/eee.jpg" alt=""/></a></li> </ul> <div class="box2"> <span class="left"></span> <span class="right"></span> </div> <ol> <li class="cur2"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <script src="js/animate.js"></script> <script> // 1/获取元素 var box1 = document.getElementById("box1"); var ullis = box1.children[0].children; var spans = box1.children[1]; var leftArr=spans.children[0]; var rightArr=spans.children[1]; var ollis = box1.children[2].children; //事件监听 var count=0; var timer=null; for (var i = 0; i < ollis.length; i++) { ollis[i].index=i; ollis[i].onclick= function () { for(var i = 0; i < ollis.length; i++){ ollis[i].className=""; animate(ullis[i],{ "opacity":0}) } ollis[this.index].className="cur2"; count=this.index animate(ullis[count],{ "opacity":1}) } } rightArr.onclick=function (){ if(ullis[count].isanimate) return; animate(ullis[count],{ "opacity":0}); count++; if(count>=ullis.length){ count=0; } for (var i = 0; i < ullis.length; i++) { ollis[i].className = ""; } ollis[count].className = "cur2"; animate(ullis[count],{ "opacity":1}); } leftArr.onclick=function (){ if(ullis[count].isanimate) return; animate(ullis[count],{ "opacity":0}); count--; if(count<0){ count=ullis.length-1; } for (var i = 0; i < ullis.length; i++) { ollis[i].className = ""; } ollis[count].className = "cur2"; animate(ullis[count],{ "opacity":1}); } box1.onmouseover=function(){ clearInterval(timer); } box1.onmouseout=function(){ autoMove(); } autoMove() function autoMove(){ clearInterval(timer); timer=setInterval(function(){ rightArr.click(); },1500) } </script> </body> </html> /**animate.js * Created by tiger. */ function animate(tag,obj,fn){ clearInterval(tag.timer); tag.isanimate=true; tag.timer=setInterval(function () { var flag=true; for(var k in obj){ if(k=="opacity"){ var target=obj[k]*100; var leader=getStyle(tag,k)*100||0; var step=(target-leader)/20; step=step > 0 ?Math.ceil(step): Math.floor(step); leader=leader+step; tag.style[k]=leader/100; tag.style.filter="alpha(opacity=" + leader + ")"; }else if(k=="zIndex"){ target.style.zIndex=obj[k]; }else{ var target=obj[k]; var leader=getStyle(tag,k); var step=(target-leader)/10; step=step > 0 ?Math.ceil(step): Math.floor(step); leader=leader+step; tag.style[k]=leader+"px"; } if(target!=leader){ flag=false } } if(flag){ clearInterval(tag.timer); tag.isanimate=false; fn&&fn(); } },40) } function getStyle(tag,attr){ if(tag.currentStyle){ return tag.currentStyle[attr]; }else{ return getComputedStyle(tag, null)[attr]; } }
相关 html script轮播图,javascript简单轮播图 \\轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片、其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV ゞ 浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 304 阅读
相关 轮播图 ![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head> 布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 369 阅读
相关 轮播图 <html> <head> <meta name="viewport" id="viewport" content="width=device- 布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 295 阅读
相关 轮播图 点击左右按钮,切换图片。图片的序号也随之变化。 逻辑思维:每次点击按钮时,只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中,就可以知道每一张图的位 落日映苍穹つ/ 2022年05月27日 08:16/ 0 赞/ 338 阅读
相关 轮播图 废话不多说,直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" 淩亂°似流年/ 2022年05月23日 09:38/ 0 赞/ 340 阅读
相关 轮播图 方法1 不太完善 html+js代码如下 <!DOCTYPE html> <html lang="en"> <head> 我不是女神ヾ/ 2022年05月13日 08:20/ 0 赞/ 332 阅读
相关 轮播图 本文转载至菜鸟教程,仅做笔记之用,方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head> 秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 528 阅读
相关 轮播图 setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H 男娘i/ 2021年11月17日 06:32/ 0 赞/ 458 阅读
相关 轮播图 方案1 初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 html代码 <div class="fullS 末蓝、/ 2021年06月10日 20:38/ 0 赞/ 677 阅读
还没有评论,来说两句吧...