How to achieve carousel image playback effect in js (with code)

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

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

实现功能如下：

1. 鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。

2. 点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6

3. 点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3

4. 间隔2000ms自动播放（包括图片、数字、缩略图）。

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

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

nbsp;html>

  
    <title>轮播图</title>
    <script></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>
  
  
    <p>
      </p>

        
        
        
        
        
        
      

      < >       

      

      

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
      

      

        
        
        
        
        
        
      

       

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)
}

相关推荐：

javaScript 手写图片轮播

纯JavaScript手写图片轮播代码

The above is the detailed content of How to achieve carousel image playback effect in js (with code). For more information, please follow other related articles on the PHP Chinese website!