js+html+css实现手动轮播和自动轮播
程序员文章站
2022-06-17 11:41:16
本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下原理:设置图片层的总长=单张图片长度*张数;在轮播层中利用overflow只留出一张图片的显示; 通...
本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下
原理:设置图片层的总长=单张图片长度*张数;在轮播层中利用overflow只留出一张图片的显示; 通过图片层的left来显示轮播的每一张图,第一张为0,为了后面的图片显示,left的值左移为负数。
原理图
代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <!-- <script type="text/javascript" src="demo.js"></script> --> </head> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } #container{ position: relative; width: 500px; height: 260px; margin: 20px auto; overflow: hidden; /*溢出隐藏:只显示一张图片*/ } #container .parent{ position: absolute; width: 2500px; /*整个图片层长度:500*5=2500*/ height: 260px; } #container .parent li{ float: left; width: 500px; height: 100%; } #container .parent li img{ width: 100%; height: 100%; } #container .btnleft, #container .btnright{ width: 30px; height: 30px; background-color: #9e9e9e; border-radius: 20%; opacity: 80%; position: absolute; /*包含块为图片显示层container*/ top: 0; bottom: 0; margin: auto; font-size: 20px; color: #f40; text-align: center; line-height: 30px; } #container .btnleft{ left: 10px; } #container .btnright{ right: 10px; } #container .btnleft:hover, #container .btnright:hover{ opacity: 90%; cursor: pointer; } /*蒙层*/ #container .modal{ width: 100%; height: 40px; background: rgba(0,0,0,.3); position: absolute; left: 0; bottom: 0; line-height: 40px; padding: 0 40px; box-sizing: border-box; } #container .modal .title{ float: left; color: #fff; font-size: 12px; } #container .modal .dots{ float: right; position: absolute; bottom: 10px; left: 340px; } #container .modal .dots li{ width: 15px; height: 15px; border-radius: 50%; float: left; /*可以使用行块盒*/ /*display: inline-block;*/ margin: 0 5px; cursor: pointer; } .clearfix::after{ content: ""; display: block; clear: both; } .on{ background-color: red; } .off{ background-color: gray; } </style> <body> <div id="container"> <ul class="parent" style="left: 0;"> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> </ul> <div class="btnleft"><</div> <div class="btnright">></div> <div class="modal"> <div class="title"> <h2>轮播图</h2> </div> <div class="dots"> <ul class="clearfix"> <li class="on"></li> <li class="off"></li> <li class="off"></li> <li class="off"></li> <li class="off"></li> </ul> </div> </div> </div> <script type="text/javascript"> var imgshow = document.getelementsbyclassname('parent')[0], dotlist = document.queryselectorall('.dots >.clearfix > li'); var btnleft = document.getelementsbyclassname('btnleft')[0], btnright = document.getelementsbyclassname('btnright')[0]; var dotlen = dotlist.length, index = 0; //轮播层的图片索引,0表示第一张 //圆点显示 function showradius() { for(var i = 0; i < dotlen; i++) { if(dotlist[i].classname === "on"){ dotlist[i].classname = "off"; } } dotlist[index].classname = "on"; } //向左移动 btnleft.onclick = function() { index--; if(index < 0){ /*第1张向左时,变为第5张*/ index = 4; } showradius(); var left; var imgleft = imgshow.style.left; if(imgleft === "0px") { /*当是第1张时,每张图片左移,移4张图,位置为-(4*500)*/ left = -2000; } else{ left = parseint(imgleft) + 500; /*由于left为负数,每左移一张加500*/ } imgshow.style.left = left + "px"; } //向右移动 btnright.onclick = function() { index++; if(index > 4){ /*第5张向右时,变为第1张*/ index = 0; } showradius(); var right; var imgleft = imgshow.style.left; if(imgleft === "-2000px") { /*当是第5张时,第1张的位置为0*/ right = 0; } else{ right = parseint(imgleft) - 500; /*由于left为负数,每右移一张减500*/ } imgshow.style.left = right + "px"; } // 自动轮播 /*var timer; function autoplay() { timer = setinterval(function() { var right; var imgleft = imgshow.style.left; if(imgleft === "-2000px") { right = 0; } else{ right = parseint(imgleft) - 500; } imgshow.style.left = right + "px"; } ,1000) } autoplay();*/ for(var i = 0; i < dotlen; i++) { /*利用闭包传递索引*/ (function(i) { dotlist[i].onclick = function() { var dis = index - i; //当前位置和点击的距离 imgshow.style.left = (parseint(imgshow.style.left) + dis * 500) + "px"; index = i; //显示当前位置的圆点 showradius(); } })(i); } </script> </body> </html>
效果:按钮左右滑动图片,图片上的小圆点也可以选择图片。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。