基于js的轮播图

最新推荐文章于 2023-10-25 09:21:28 发布

异知空间

最新推荐文章于 2023-10-25 09:21:28 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/sinat_39629506/article/details/104999171

版权

分为自动轮播、左右箭头轮播和点轮播三种方式。
利用z-index显示图片
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    /* 图片容器 */
    .list{
      width:800px;
      height:400px;
      /* 相对定位，没有脱离文档流，作为absolute的父级 */
      position: relative;
    }
    /* 全部图片 */
    .item{
      width:100%;
      height:100%;
      /* 绝对定位，脱离文档流,使图片重叠 */
      position:absolute;
      /* 淡入淡出效果 */
      opacity: 0;
      transition: all .5s;
    }
    /* 最父级 */
    .lunbo{
      width:800px;
      height:400px;
      /* 作为按钮的父级 */
      position: relative;
    }
    /* 按钮 */
    .btn{
      width:40px;
      height: 80px;
      position:absolute;
      top:160px;
      z-index: 100;
    }
    #pre{
      left:0px;
    }
    #next{
      right:0px;
    }
    /* .item.active中间不能有空格 */
    .item.active{
      opacity: 1;
      z-index: 10;
    }
    /* 点点 */
    .pointList{
      padding-left: 0px;
      /* 去点 */
      list-style:none;
      position: absolute;
      right:20px;
      bottom:20px;
      z-index: 100;
      
    }
    /* 具体的点 */
    .point{
      width:10px;
      height:10px;
      background-color: rgba(0,0,0,0.4);
      border-radius: 50%;
      float: left;
      margin-right: 15px;
      border:1px solid wheat;
      /* 鼠标在点上时有小手指 */
      cursor:pointer;
    }
    .point.active{
      background-color: rgba(254.253,250,0.4);
    }
  </style>
</head>
<body>
  <div class="lunbo">
    <!-- 轮播图片 -->
    <div class="list">
      <img class="item active" src="../img/1.jpg" alt="">
      <img class="item" src="../img/2.jpg" alt="">
      <img class="item" src="../img/3.jpg" alt="">
      <img class="item" src="../img/4.jpg" alt="">
    </div>
    <!-- 点点 -->
    <ul class="pointList">
      <li class="point active" data=0></li>
      <li class="point" data=1></li>
      <li class="point" data=2></li>
      <li class="point" data=3></li>
    </ul>
    <!-- 按钮 -->
    <button type="button" class="btn" id="pre"><</button>
    <button type="button" class="btn" id="next">></button>
  </div>
  <script>
    var item=document.getElementsByClassName("item");//图片
    var points=document.getElementsByClassName("point");//点
    var preBtn=document.getElementById("pre");
    var nextBtn=document.getElementById("next");

    var index=0;//index表示第几张图片在展示，第index张图片有active这个类名；展示第几个点

    // 函数清除active
    var clearActive=function(){
      for(var i=0;i<item.length;i++){
        item[i].className='item';
        points[i].className="point";
      }
      // for(var i=0;i<item.length;i++){
      //   points[i].className="point";
      // }
    }
    // 函数改变图片
    var goIndex=function(){
      clearActive();
      item[index].className='item active';
      points[index].className="point active";
    }
    // 下一张
    var goNext=function(){
      if(index<item.length-1){
        index++;
      }else{
        index=0;
      }
      goIndex();
    }
    // 上一张
    var goPre=function(){
      if(index==0){
        index=item.length-1;
      }else{
        index--;
      }
      goIndex();
    }
    // 点击>时，显示下一张
    nextBtn.onclick=goNext;
    // 点击<时，显示上一张
    preBtn.onclick=goPre;
    // 点小点时跳到对应页面上
    // 需要获得数据，所以在HTML中存数据
    for(var i=0; i<points.length;i++){
      points[i].onclick=function(){
        // 获取HTML上的数据
        var pointIndex=this.getAttribute('data');
        // console.log(pointIndex);
        index=pointIndex;
        goIndex();
      }
    }
    // 自动换图
    function scrol(){
      goIndex();
      index++;
      if(index==item.length){
        index=0;
      }
    }
    setInterval(scrol,3000);
  </script>
</body>
</html>