欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js+html+css实现手动轮播和自动轮播

程序员文章站 2022-06-17 11:41:16
本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下原理:设置图片层的总长=单张图片长度*张数;在轮播层中利用overflow只留出一张图片的显示; 通...

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下

原理:设置图片层的总长=单张图片长度*张数;在轮播层中利用overflow只留出一张图片的显示; 通过图片层的left来显示轮播的每一张图,第一张为0,为了后面的图片显示,left的值左移为负数。

原理图

js+html+css实现手动轮播和自动轮播

代码:

<!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">&lt;</div>
 <div class="btnright">&gt;</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>

效果:按钮左右滑动图片,图片上的小圆点也可以选择图片。

js+html+css实现手动轮播和自动轮播

js+html+css实现手动轮播和自动轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 轮播