JS轮播图实现简单代码

175 阅读 0 评论 116 点赞

我是靠谱客的博主幽默夏天，最近开发中收集的这篇文章主要介绍JS轮播图实现简单代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了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>

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