js通过opacity属性实现(按钮)(圆点)双控制及(自动)图片轮播
2018-12-07 11:51
549 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title& 4000 gt;</title> </head> <style type="text/css"> .container{ width: 500px; height: 300px; margin:0 auto; position: relative; } img{ display: block; width:500px; height: 300px; position: absolute; transition: 500ms ease-in-out; opacity: 0; } button{ display: block; width: 50px; height: 100px; position: absolute; top:100px; } button:nth-of-type(2){ right: 0; } .show{ opacity: 1; } /* .dispear{ display: none; } */ .li-cotainer{ width: 130px; position: absolute; bottom: 0; left:100px; font-size: 0; } .li-cotainer>li{ display: inline-block; width: 10px; height: 10px; border: 1px solid #ffffff; border-radius: 50%; margin: 10px ; } .ls{ background: #ffffff; border: 1px solid #FFFFFF; /* box-shadow: ; */ } </style> <body> <div class="container"> <img src="img/1.jpg" > <img src="img/2.jpg" > <img class="show" src="img/3.jpg" > <img src="img/4.JPG" > <button><</button> <button >></button> <div class="li-cotainer"> <li class="ls"></li> <li></li> <li></li> <li></li> </div> </div> <script type="text/javascript"> var btn=document.getElementsByClassName("container")[0].getElementsByTagName("button"); var imgArr=document.getElementsByClassName("container")[0].getElementsByTagName("img"); var liArr=document.getElementsByClassName("container")[0].getElementsByTagName("li"); var i=0; // 事件执行 btn[1].onclick=right; btn[0].onclick=left; for(var j=0;j<liArr.length;j++){ liArr[j].index=j; liArr[j].onmouseover=lim; } // 相关方法 function right(){ i=i+1; for(var j=0;j<imgArr.length;j++){ imgArr[j].className=""; liArr[j].className=""; } if(i>=4){ i=0; } imgArr[i].className="show"; liArr[i].className="ls" } function left(){ i=i-1; for(var j=0;j<imgArr.length;j++){ imgArr[j].className=""; liArr[j].className=""; } if(i<0){ i=3; } imgArr[i].className="show"; liArr[i].className="ls" } function lim(){ for(var k=0;k<imgArr.length;k++){ imgArr[k].className=""; liArr[k].className=""; } imgArr[this.index].className="show"; liArr[this.index].className="ls"; i=this.index; } // 定时器设置及清除 inter1=setInterval(right,4000); for(var t=0;t<imgArr.length;t++){ document.getElementsByClassName("container")[0].onmouseover=function(){ clearInterval(inter1); } document.getElementsByClassName("container")[0].onmouseout=function(){ inter1=setInterval(right,4000); } } </script> </body> </html>
图在上一篇博文里不上传了
阅读更多相关文章推荐
- js实现按钮控制图片向左、向右、向上、向下无缝轮播
- JS 控制网页轮播图片的自动,按钮,导航原点转换
- js控制图片自动缩放,实现铺满盒子,不变形,完全局中
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)
- 使用js实现带有停顿效果的图片滚动(按钮控制)
- jquery图片轮播,点击左右按钮轮播,可控制是否自动播放,是否循环轮播(自写)
- JS实现图片自动播放,并在鼠标悬停某个圆点时,图片改变为其代表的图片。
- jq实现图片轮播:圆形焦点+左右控制+自动轮播
- JS返回上一页实例代码通过图片和按钮分别实现
- js实现自动图片轮播代码
- js实现按钮控制带有停顿效果的图片滚动
- JS返回上一页-通过图片和按钮分别实现
- neatbeans用js实现图片预览上传(自动控制图片大小)
- js实现点击左右按钮轮播图片效果实例
- 教你用js超简单实现页面自动控制图片的宽度和高度
- 可以通过左右滑动和点击小按钮来实现图片的轮播
- 代码笔记 | js数组实现图片自动轮播
- js实现点击左右按钮轮播图片效果实例
- js通过图片切换实现开关按钮(一)
- js图片轮播可控制是否循环轮播,点击左右按钮切换