时间:2021-05-25
本文实例为大家分享了js实现点击轮播切换图片的具体代码,供大家参考,具体内容如下
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>点击轮播图</title></head><style> .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 40%; bottom:20px; z-index: 2; } .container .buttons span { margin-left: 10px; display: inline-block; width: 7px; height: 7px; background-color: #D4D4D4; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: #558949; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; }</style><body> <div class="container"> <div class="wrap" style="left:-600px;"> <img alt=""> <img src="./img/jd_app3.png" alt=""> <img src="./img/jd_app4.png" alt=""> <img src="./img/jd_app5.png" alt=""> <img src="./img/jd_app6.png" alt=""> <img src="./img/jd_app7.png" alt=""> </div> <div class="buttons"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var wrap = document.querySelector(".wrap"); var index = 0; var dots = document.getElementsByTagName("span"); function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; } index++; if(index > 4){ index = 0; } index--; if(index < 0){ index = 4; } showCurrentDot(); for (var i = 0, len = dots.length; i < len; i++){ (function(i){ dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt(wrap.style.left)!==-3000){ dis = dis - 5; } //和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可 if(index == 0 && parseInt(wrap.style.left)!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px"; index = i; showCurrentDot(); } })(i); } </script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
原生JS仿小米轮播图(最新版易懂),供大家参考,具体内容如下本次内容主要可实现的效果:自动轮播可点击上一张下一张进行图片的切换点击右下方小圆点进行图片切换代码部
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片
本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下案例:轮播图需求布局:ul下有很多li标签;浮动在一行;原理:切换图片的时候,把
一.要实现的效果1.点击左右可切换图片2.点击小圆点可切换图片二.效果图三.代码1.cssbody,img,span,ul,li{margin:0;paddin
1.切换图片法通过写XML文件切换图片实现点击效果图中fabu1,fabu2为两张图片,点击显示fabu2不点击显示fabu1在按钮的background属性下