JS轮播图实现简单代码

2019-11-19 15:42:05

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js轮播图实现代码，供大家参考，具体内容如下

思路：

1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css">  .container{   margin:0 auto;   width:600px;   height:400px;   position: relative;   overflow: hidden;   border:4px solid gray;   box-shadow: 3px 3px 5px gray;   border-radius:10px;  }  .list{   width:4200px;   height:400px;   position: absolute;   top:0px;  }  img{   float:left;   width:600px;   height:400px;  }  .dots{   position: absolute;   left:40%;   bottom:30px;   list-style: none;  }  .dots li{   float:left;   width:8px;   height:8px;   border-radius: 50%;   background: gray;   margin-left:5px  }  .dots .active{   background: white;  }  .pre,.next{   position: absolute;   top:40%;   font-size:40px;   color:white;   text-align:center;   background: rgba(128,128,128,0.5);   /* display:none;*/  }  .pre{   left:30px;  }  .next{   right:30px;  } </style></head><body> <div class="container">  <div class="list" style=" left:-600px;">   <img src="img/5.jpg">   <img src="img/1.jpg">   <img src="img/2.jpg">   <img src="img/3.jpg">   <img src="img/4.jpg">   <img src="img/5.jpg">   <img src="img/1.jpg">  </div>  <ul class="dots">   <li index=1 class="active dot"></li>   <li index=2 class="dot"></li>   <li index=3 class="dot"></li>   <li index=4 class="dot"></li>   <li index=5 class="dot"></li>  </ul>  <div class="pre"><</div>  <div class="next">></div> </div><script type="text/javascript"> var index=1,timer; function init(){  eventBind();  autoPlay(); } init(); function autoPlay(){   timer =setInterval(function () {   animation(-600);   dotIndex(true);  },1000) } function stopAutoPlay() {  clearInterval(timer); } function dotIndex(add){  if(add){   index++;  }  else{   index--;  }  if(index>5){   index = 1;  }  if(index<1){   index = 5;  }  dotActive(); } function dotActive() {  var dots = document.getElementsByClassName("dot");  var len = dots.length;  for(var i=0 ;i<len ;i++){   dots[i].className = "dot";  }  for(var i=0;i<len;i++){   /*此处可以不用parseInt，当不用全等时*/   if(index === parseInt(dots[i].getAttribute("index"))){    dots[i].className = "dot active";   }  } } function eventBind(){  /*点的点击事件*/  var dots = document.getElementsByClassName("dot");  var len = dots.length;  for(var i=0;i<len;i++){   (function(j){    dots[j].onclick = function(e){     var ind = parseInt(dots[j].getAttribute("index"));     animation((index - ind)*(-600));/*显示点击的图片*/     index = ind;     dotActive();    }   })(i)  }  /*容器的hover事件*/  var con = document.getElementsByClassName("container")[0];  /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/  con.onmouseover = function (e) {   stopAutoPlay();  }  con.onmouseout =function(e){   autoPlay();  }  /*箭头事件的绑定*/   var pre = document.getElementsByClassName("pre")[0];   var next = document.getElementsByClassName("next")[0];   pre.onclick = function (e) {    dotIndex(false);    animation(600);   }  next.onclick = function (e) {   dotIndex(true);   animation(-600);  } } function animation(offset){  var lists = document.getElementsByClassName("list")[0];  var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;  if(left<-3000){   lists.style.left = "-600px";  }  else if(left>-600){   lists.style.left = "-3000px";  }  else{   lists.style.left = left+"px";  } }</script></body></html>

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

上一篇：基于jQuery实现的单行公告活动轮播效果

下一篇：详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用