原生JS轮播图--＞图片是数组方式

最新推荐文章于 2024-08-11 18:40:36 发布

xxshu_

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量361

点赞数 11

分类专栏： JS HTML+CSS 文章标签： javascript 前端开发语言 css

本文链接：https://blog.csdn.net/xxshu_WEBqd/article/details/135039668

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML+CSS

4 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .banner{
      border: 1px solid #0086b3;
      height: 330px;
      width: 980px;
      position: relative;
      margin: 30px auto;
    }
    #imgBanner,img{
      height: 330px;
      width: 980px;
      transition: all 1s;
    }
    #divNext,#diPrev{
      position: absolute;
      font-size: 40px;
      color: #cccccc;
      top: 136px;
    }
    #divNext{
      right: 0;
    }

    .circle{
      font-size: 30px;
      color: #cccccc;
    }
    span{
      font-size: 26px;
    }

  </style>
</head>

<body>

<header>
  <div class="banner">
<!--    显示图片-->
    <div id="imgBanner"></div>
<!--    上一页下一页-->
    <div id="divNext" onclick="next()"> > </div>
    <div id="diPrev" onclick="prev()"> < </div>
<!--    小圆点-->
    <div id="divCircle">
<!--      <span class="circle">●</span>-->
    </div>
  </div>
</header>

<script>
  // 图片地址数组
  let arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
  let index=0;
  

  let imgBanner=document.getElementById("imgBanner");//装图的div
  let divCircle=document.getElementById("divCircle");//装小圆点的div

  imgBanner.style.backgroundImage=`url("${arr[index]}")`;

  let time=setInterval(dis,2000)
  function dis(){
    index++;
    if(index==arr.length){
      index=0
    }
    imgBanner.style.backgroundImage=`url("${arr[index]}")`;
    disCirCleStyle()
  }

  //小圆点
  for(let i=0;i<arr.length;i++){
    divCircle.innerHTML+=`<span title="${i}" onclick="changeImg(this)">●</span>`
  }

  disCirCleStyle()
  function disCirCleStyle(){
    let spanArr=divCircle.getElementsByTagName("span");
    for(let i=0;i<spanArr.length;i++){
      spanArr[i].className=""
    }
    divCircle.getElementsByTagName("span")[index].className="circle"
  }

  function changeImg(span){
    clearInterval(time);
    console.log(span.title)
    index=span.title;
    imgBanner.style.backgroundImage=`url("${arr[index]}")`;
    disCirCleStyle()
    time=setInterval(dis,2000)
  }

  //下一张
  function  next(){
    clearInterval(time);
    index++;

    if(index==arr.length){
      index=0
    }
    imgBanner.style.backgroundImage=`url("${arr[index]}")`;
    disCirCleStyle()
    time=setInterval(dis,2000)
  }

  //上一张
  function prev(){
    clearInterval(time);
    index--;

    if(index<0){
      index=arr.length-1;
    }
    imgBanner.style.backgroundImage=`url("${arr[index]}")`;
    disCirCleStyle()
    time=setInterval(dis,2000)
  }

</script>
</body>