js和jq实现轮播图 | 易学教程

一.js实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
      box-sizing: border-box;
    }
    ul{
      list-style: none;
    }
    .swiper-wrap{
      position:relative;
      width:500px;
      margin: 30px auto;
    }
    #swiper-ul{
      position:relative;
      width:100%;
      height:186px;
    }
    li{
      position: absolute;
      top:0;
      width: 100%;
      opacity: 0;
      transition: all .5s;
    }
    li img{
      display: block;
      width:100%;
    }
    li.active{
      z-index:100;
      opacity: 1;
      transition: all .5s;
    }
    #swiper-right,#swiper-left{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      z-index: 101;
      width:60px;
      height:50px;
      background: pink;
      cursor: pointer;
    }
    #swiper-right{
      right:0;
    }
    #swiper-left{
      left:0;
    }
  </style>
</head>
<body>
  <div class="swiper-wrap">
    <ul id="swiper-ul" data-index=1>
      <li>
        <img src="" alt="">
      </li>
      <li  class="active">
        <img src="" alt="">
      </li>
      <li>
        <img src="" alt="">
      </li>
      <li>
        <img src="" alt="">
      </li>
      <li>
        <img src="" alt="">
      </li>
    </ul>
    <div id="swiper-left">左</div>
    <div id="swiper-right">右</div>
  </div>
</body>
</html>
<script>
  var swiperRight = document.getElementById("swiper-right");
  var swiperLeft = document.getElementById("swiper-left");
  var swiperUl = document.getElementById("swiper-ul");
  var swiperli = swiperUl.getElementsByTagName("li");
  var swiperbox = document.getElementsByClassName("swiper-wrap")[0];
//右边按钮点击事件
  swiperRight.onclick = function(){
    switchSwiper("right")
  }
  //左边按钮点击事件
  swiperLeft.onclick = function(){
    switchSwiper("left")
  }
  //一个参数 来判断左右  type "left" "right"
  function switchSwiper(type){
    var activeIndex = Number(swiperUl.getAttribute("data-index")); 
    // nextIndex 是下一个，有个判断条件是 如果当前是最后一个 那么重置为0. 
    if(type==="left"){
      if(activeIndex === 0){
        var nextIndex = swiperli.length-1;
      }else{
        var nextIndex = activeIndex-1;
      }
    }else{
      if(activeIndex >= swiperli.length-1){
        var nextIndex = 0
      }else{
        var nextIndex = activeIndex+1;
      }
    }  
    //先删除类名active
    var activeDom = swiperUl.getElementsByClassName("active")[0];
    activeDom.classList.remove("active");
    //添加active类名 
    swiperli[nextIndex].classList.add("active");

    //忘记更改状态
    swiperUl.setAttribute("data-index",nextIndex);
  } 
  //自动轮播
  var times = setInterval(function(){
    switchSwiper("right");
  },1000)


  // 划入停止定时器
  swiperbox.onmouseenter = function(){
    clearInterval(times);
  }
  // 划出开始定时器
 
  swiperbox.onmouseleave = function(){
    times = setInterval(function(){
      switchSwiper("right");
    },1000)
  }
</script>

二.jq实现

1.html

   <div class="swiper-wrap" > 
    <ul class="clearfix" id="swiperBox" >
        <li><img src="" alt=""></li>
        <li>
          <img src="" alt="">
        </li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li>
          <img src="" alt="">
        </li>
      </ul>

      <p id="prev">左</p>
      <p id="next">右</p>
      <div class="btm">
      <i class="actives">1</i>
      <i>2</i>
      <i>3</i>
      <i>4</i>
      </div>
  </div>

2.css

   .swiper-wrap{
  width: 500px;
  margin: 50px auto;
  overflow: hidden;
  border:2px solid #f00;
  position: relative;
}
p{
  position: absolute;
  z-index: 100;
  top:0;
  left:0;
  background: #f00;
  padding:20px;
  cursor: pointer;
}
#next{
  left: auto;
  right:0;
}
#swiperBox{
  white-space: nowrap;
  font-size: 0px; 
  position: relative;
  width: 100%; 
  left: -500px;
}
#swiperBox li {  
  display: inline-block;
  width: 100%;
}
 
#swiperBox li img{  
  width: 100%;
}
.btm{
  position: absolute;
  z-index: 102;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.btm i{
  

  display: inline-block;
  left: 50%;
  width: 50px;
  height: 30px;
  background-color: white;
  color: black;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
}

3.jq代码

  <script>
var index = 1;
var leftheight  = $("#swiperBox").width();
$("#swiperBox").css("left",-leftheight+"px")
$("#next").click(function(){
  index++;
  $("#swiperBox").animate({
    left:-index*leftheight+"px"
  })
  if(index===$("#swiperBox li").length-1){
    $("#swiperBox").animate({
      left:-leftheight+"px"
    },0)
    index =1;
  }
})



$("#prev").click(function(){
  index--;
  $("#swiperBox").animate({
    left:-index*leftheight+"px"
  })
  if(index===0){
  $("#swiperBox").animate({
    left:-($("#swiperBox li").length-2)*leftheight+"px"
  },0)
  index =$("#swiperBox li").length -2
  }
})



var times = setInterval(function(){
  index++;
  $("#swiperBox").animate({
    left:-index*leftheight+"px"
  })
  if(index===$("#swiperBox li").length-1){
    $("#swiperBox").animate({
      left:-leftheight+"px"
    },0)
    index =1;
  }
 
},1000)

$(".btm i").click(function(){
  var index = $(this).index()
  $(this).addClass("actives").siblings().removeClass("actives")
  $("#swiperBox").animate({
    left:-index*leftheight+"px"
  },)
})

来源：CSDN

作者：进阶的巨人001

链接：https://blog.csdn.net/weixin_45389051/article/details/104703110

标签

js代码

轮播