JavaScript實現(xiàn)首頁圖片輪播圖效果

更新時間：2022年06月07日 11:15:58 作者：??肥學????

這篇文章主要介紹了JavaScript實現(xiàn)首頁圖片輪播圖效果，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

一、輪番圖

效果展示：

輪播圖是指在一個模塊或者窗口，通過鼠標點擊或手指滑動后，可以看到多張圖片。這些圖片統(tǒng)稱為輪播圖，這個模塊叫做輪播模塊。

二、源碼展示

設置body

<body>
  <div class="m-view">
    <div class="slide" style="left: -800px">
      <img src="1.jpg" alt="4">
      <img src="2.jpg" alt="0">
      <img src="3.jpg" alt="1">
      <img src="4.jpg" alt="2">
      <img src="5.jpg" alt="3">
      <img src="3.jpg" alt="4">
      <img src="2.jpg" alt="0">
    </div>
    <div class="prev"><</div>
    <div class="next">></div>
    <div class="pointer">
      <span class="button on" index="0"></span>
      <span class="button" index="1"></span>
      <span class="button" index="2"></span>
      <span class="button" index="3"></span>
      <span class="button" index="4"></span>
    </div>
  </div>

樣式設置

<style>
    .m-view,.m-view .slide img{
      position: relative;/*作為絕對定位的父元素*/
      width: 500px;
      height: 300px;
    }
    .m-view{
      overflow: hidden;/*將超出該div的子元素隱藏*/
    }
    .m-view .slide{
      position: absolute;
      width: 500px;
      height: 300px;
    }
    .m-view .slide img{
      margin-right: -5px;
    }
    .m-view .prev,.m-view .next{
      position: absolute;
      top: 40%;
      font: 60px/60px Microsoft YaHei;
      color: #00BFFF;
    }
    .m-view .prev{
      left: 10px;
    }
    .m-view .next{
      right: 10px;
    }
    .m-view .pointer{
      position: absolute;
      bottom: 40px;
      left: 33%;
    }
    .m-view .pointer span{
      display: inline-block;/*水平排列*/
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
      background-color: #00FF00;
    }
    .m-view .pointer .on{/*點亮當前圖片對應的圓圈*/
      background-color: #1E90FF;
    }
    img{
      object-fit: contain;
    }
  </style>

實現(xiàn)輪番

  var view=document.getElementsByClassName('m-view')[0];
    var slide=document.getElementsByClassName('slide')[0];
    var prev=document.getElementsByClassName('prev')[0];
    var next=document.getElementsByClassName('next')[0];
    var button=document.getElementsByClassName('button');
    var curIndex=0;//當前圖片的索引位置
    var toggled=true;//是否正在切換，true表明切換已完成，此時才能切換
    /* Toggle函數(shù)實現(xiàn)切換一張圖片的功能 */
    function Toggle () {
      var TIMER=50;//滑動一次所用的時間，它是setInterval的第二個參數(shù)
      var time=800;//每切換一張圖片總共用的時長
      var times=time/TIMER;//每切換一張圖片需滑動的次數(shù)
      var stepLenth=800/times;//每次滑動的步長
      var leftToggle=function () {
        var t1=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
          t1--;
          if (!t1) {
            clearInterval(interval);
            curIndex--;
            if (curIndex<0) {
              slide.style.left=parseInt(slide.style.left)-4000+"px";
              curIndex=4;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=0) {
            button[curIndex-1].className="button on";
          }else{
            button[curIndex+4].className="button on";
          }
          var interval=setInterval(leftStep,TIMER);
        };
      };
      var rightToggle=function () {
        var t2=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
          t2--;
          if (!t2) {
            clearInterval(interval);
            curIndex++;
            if (curIndex>4) {
              slide.style.left=parseInt(slide.style.left)+4000+"px";
              curIndex=0;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=4) {
            button[curIndex+1].className="button on";
          }else{
            button[curIndex-4].className="button on";
          };
          var interval=setInterval(leftStep,TIMER);
        };
      }
      this.leftToggle=leftToggle;//輸出對外的接口
      this.rightToggle=rightToggle;
    };
    var toggle=new Toggle();
    prev.onclick=function () {
      toggle.leftToggle();
    };
    next.onclick=function () {
      toggle.rightToggle();
    };
    /* 點擊圓圈跳轉功能 */
    for (var i = 0; i < button.length; i++) {
      button[i].onclick=function () {
        var newIndex=parseInt(this.getAttribute("index"));
        if (newIndex!=curIndex) {
          var distance=-800*(newIndex-curIndex);
          slide.style.left=parseInt(slide.style.left)+distance+"px";
          button[curIndex].className="button";
          button[newIndex].className="button on";
          curIndex=newIndex;
        };
      };
    }
    /* 自動播放功能，鼠標移上去停止播放，移開再次播放 */
    var intervalo=setInterval(toggle.rightToggle,3000);
    view.onmouseover=function () {
      clearInterval(intervalo);
    }
    view.onmouseout=function () {
      intervalo=setInterval(toggle.rightToggle,3000);
    }

到此這篇關于JavaScript實現(xiàn)首頁圖片輪播圖效果的文章就介紹到這了,更多相關js 輪播圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: