js如何实现轮播图播放效果（附代码）-tutorial js-php.cn

本篇文章给大家带来的内容是关于js如何实现轮播图播放效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。
实现效果如下：（图片来自网络）

实现功能如下：

鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。
点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6
点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3
间隔2000ms自动播放（包括图片、数字、缩略图）。

根据前面运动知识，实现代码如下：

我们把前面总结的运动框架封装在move.js中

<!DOCTYPE html>
<html>
  <head>
    <title>轮播图</title>
    <script src="move.js"></script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      #switch{
        width: 1400px;
        height: 520px;
        margin:auto;
        position: relative;
        overflow: hidden;
      }
      #switch .bigpic li{
        position: absolute;
        top: 0;
        left: 0;
      }
      #switch .bigpic li:nth-child(1){
        z-index: 2;
      }

      #switch .prev{
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        border-radius: 100%;
        background: rgba(255,255,255,0.6);
        position: absolute;
        top:192px;
        left: 20px;
        border-width: 0;
        filter:alpha(opacity:0);
        opacity:0;
        z-index: 999;
      }
      #switch .next{
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        border-radius: 100%;
        background: rgba(255,255,255,0.6);
        position: absolute;
        top:192px;
        right: 20px;
        border-width: 0;
        filter:alpha(opacity:0);
        opacity:0;
        z-index: 9999;
      }
      #switch .number{
        position: absolute;
        right: 30px;
        top: 390px;
        z-index: 9999;
        list-style: none;
      }
      #switch .number li{
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #fff;
        border-radius: 100%;
        color: #000;
        text-align: center;
        cursor: pointer;
        filter:alpha(opacity:60);
        opacity:0.6;
      }
      #switch .number li:nth-child(1){
        filter:alpha(opacity:100);
        opacity:1.0;
      }
      #switch .mark_left{
        width: 700px;
        height: 430px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9998;
      }
      #switch .mark_right{
        width: 700px;
        height: 430px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9998;
      }

      .smallimg{
        list-style: none;
        padding:0;
        margin:0;
        position: absolute;
        top: 434px;
        height: 86px;
      }
      .smallimg li{
        width:280px;
        height: 86px;
        float: left;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
      .smallimg li:nth-child(1){
        filter:alpha(opacity:100);
        opacity:1.0;
      }
      .smallimg li img{
        width:280px;
        height: 86px;
      }
    </style>
    <script>
      function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName("*");
        var aResult=[];
        for(var i=0; i<aEle.length; i++){
          if(aEle[i].className===sClass){
            aResult.push(aEle[i]);
          }
        }
        return aResult;
      }
      window.onload=function(){
        var op=document.getElementById("switch");
        var oBtnPrev=getByClass(op,"prev")[0];
        var oBtnNext=getByClass(op,"next")[0];
        var oMarkLeft=getByClass(op,"mark_left")[0];
        var oMarkRight=getByClass(op,"mark_right")[0];
        // 左右按钮
        oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
          startMove(oBtnPrev,"opacity",100);
        }
        oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
          startMove(oBtnPrev,"opacity",0);
        }
        oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
          startMove(oBtnNext,"opacity",100);
        }
        oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
          startMove(oBtnNext,"opacity",0);
        }
        // 大图切换
        var opNumber=getByClass(op,"number")[0];
        var aNumber=opNumber.getElementsByTagName("li");
        var oBigPic=getByClass(op,"bigpic")[0];
        var aImg=oBigPic.getElementsByTagName("li");
        var aSmallImg=getByClass(op,"smallimg")[0];
        var aSmall=aSmallImg.getElementsByTagName("li");
        var nowZIndex=2;
        var now=0;
        aSmallImg.style.width=aSmall.length*aSmall[0].offsetWidth+"px";
        for(var j=0; j<aNumber.length; j++){
          aNumber[j].index=j;
          aNumber[j].onclick=function(){
            if(this.index===now){
              return;
            }
            now=this.index;
            tab();
          }
          aNumber[j].onmouseover=function(){
            startMove(this,"opacity",100);
          }
          aNumber[j].onmouseout=function(){
            if(this.index!=now){
              startMove(this,"opacity",60);
            }
          }
        }
        for(var m=0; m<aSmall.length; m++){
          aSmall[m].index=m;
          aSmall[m].onclick=function(){
            if(this.index===now){
              return;
            }
            now=this.index;
            tab();
          }
          aSmall[m].onmouseover=function(){
            startMove(this,"opacity",100);
          }
          aSmall[m].onmouseout=function(){
            console.log(this.index);
            console.log(now);
            if(this.index!=now){
              startMove(this,"opacity",30);
            }
          }
        }
        function tab(){
          aImg[now].style.zIndex=nowZIndex++;
          for(var i=0; i<aNumber.length; i++){
            startMove(aNumber[i],"opacity",60);
          }
          for(var i=0; i<aSmall.length; i++){
            startMove(aSmall[i],"opacity",30);
          }

          startMove(aNumber[now],"opacity",100);
          startMove(aSmall[now],"opacity",100);
          aImg[now].style.height=0;
          startMove(aImg[now],"height",430);
          // if(now===0){
          //   startMove(aSmallImg,"left",0);
          // }else if(now===aSmall.length-1){
          //   startMove(aSmallImg,"left",-(now-2)*aSmall[0].offsetWidth);
          // }else{
          //   startMove(aSmallImg,"left",-(now-1)*aSmall[0].offsetWidth);
          // }
          if(now===0){//根据不同的规则设置不同的if
            startMove(aSmallImg,"left",0);
          }else if(now===aSmall.length-1){
            startMove(aSmallImg,"left",-(now-4)*aSmall[0].offsetWidth);
          }
        }
        oBtnPrev.onclick=function(){
          now--;
          if(now===-1){
            now=aImg.length-1;
          }
          tab();
        }
        oBtnNext.onclick=function(){
          now++;
          if(now===aImg.length){
            now=0;
          }
          tab();
        }
        var timer=setInterval(oBtnNext.onclick,2000);
        op.onmouseover=function(){
          clearInterval(timer);
        }
        op.onmouseout=function(){
          timer=setInterval(oBtnNext.onclick,2000);
        }
      }
    </script>
  </head>
  <body>
    <p id="switch">
      <ul class="bigpic">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
      </ul>
      <button class="prev">&lt;</button>
      <button class="next">&gt;</button>
      <p class="mark_left"></p>
      <p class="mark_right"></p>
      <ul class="number">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>

      <ul class="smallimg">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
      </ul>
    </p>
  </body>
</html>

Salin selepas log masuk

move.js

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}

Salin selepas log masuk