js如何實(shí)現(xiàn)輪播圖之漸隱漸現(xiàn)版

這篇文章將為大家詳細(xì)講解有關(guān)js如何實(shí)現(xiàn)輪播圖之漸隱漸現(xiàn)版，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出璧山免費(fèi)做網(wǎng)站回饋大家。

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
      -webkit-user-select:none;
    }
    ul,li{
      list-style
    }
    img{
      display: block;
      border:none;
    }
    .banner{
      position:relative;
      width:1000px;
      height:300px;
      margin:0 auto;
      overflow:hidden;
    }
    .banner .bannerInner{
      width:100%;
      height:100%;
      background:url("../img/default.gif") no-repeat center center #e1e1e1;
    }
    .banner .bannerInner div{
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      z-index:0;
      opacity:0;
      filter:alpha(opacity=0);
    }
    .banner .bannerInner img{
      display:none;
      width:100%;
      height:100%s;
    }

    .banner .bannerTip{
      position:absolute;
      height:18px;
      overflow:hidden;
      right:20px;
      bottom:20px;
      z-index:10;
    }
    .banner .bannerTip li{
      float:left;
      margin-left:10px;
      width:18px;
      height:18px;
      background:lightblue;
      cursor:pointer;
      border-radius:50%;
    }
    .banner .bannerTip li.bg{
      background:red;
    }

    .banner a{
      display:none;
      position:absolute;
      top:50%;
      z-index:20;
      margin-top:-22.5px;
      width:30px;
      height:45px;
      background:url("../img/pre.png");
      opacity:0.5;
      filter:alpha(opacity=50);
    }
    .banner a:hover{
      opacity:1;
      filter:alpha(opacity=100);
    }
    .banner a.bannerLeft{
      left:20px;
      background-position:0 0;
    }
    .banner a.bannerRight{
      right:20px;
      background-position:-50px 0;
    }
  </style>
</head>
<body>
  <div class='banner' id='banner'>
    <div class='bannerInner'>
      <div><img src="" alt="" trueImg="img/banner1.jpg"></div>
      <div><img src="" alt="" trueImg="img/banner2.jpg"></div>
      <div><img src="" alt="" trueImg="img/banner3.jpg"></div>
      <div><img src="" alt="" trueImg="img/banner4.jpg"></div>
    </div>
    <ul class='bannerTip'>
      <li class='bg'></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerLeft'></a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerRight'></a>
  </div>

  <script>
    var banner = document.getElementById('banner');
    var bannerInner = utils.firstChild(banner),bannerTip = utils.children(banner,"ul")[0],bannerLink = utils.children(banner,'a'),bannerLeft = bannerLink[0],bannerRight = bannerLink[1];
    var divList = bannerInner.getElementsByTagName('div');
    var imgList = bannerInner.getElementsByTagName('img');
    var oLis = bannerTip.getElementsByTagName('li');
    //1、Ajax讀取數(shù)據(jù)
    var jsonData = null;
    ~function(){
      var xhr = new XMLHttpRequest;
      xhr.open("get","json/banner.txt?_="+Math.random(),false);
      xhr.onreadystatechange = function(){
        if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
          jsonData = utils.formatJSON(xhr.responseText)
        }
      }
      xhr.send(null)
    }()
    //2、數(shù)據(jù)綁定
    ~function(){
      var str = "",str2 = "";
      if(jsonData){
        for(var i = 0,len=jsonData.length;i<len;i++){
          var curData = jsonData[i];
          str+='<div><img src="" alt="" trueImg="'+curData['img']+'"></div>';
          i===0?str2+="<li class='bg'></li>":str2+="<li></li>"
        }
      }
      bannerInner.innerHTMl = str;
      bannerTip.innerHTML = str2;
    }()

    //3、圖片的延遲加載
    window.setTimeout(lazyImg,500)
    function lazyImg(){
      for(var i = 0,len = imgList.length;i<len;i++){
        ~function(i){
          var curImg = imgList[i];
          var oImg = new Image;
          oImg.src = curImg.getAttribute('trueImg');
          oImg.onload = function(){
            curImg.src = this.src;
            curImg.style.display = block;
            //只對第一張?zhí)幚?
            if(i===0){
              var curDiv = curImg.parentNode;
              curDiv.style.zIndex = 1;
              myAnimate(curDiv,{opacity:1},200);
            }
            oImg = null;
          }
        }(i)
      }
    }
    //4、自動(dòng)輪播
    var interval = 3000,autoTimer = null,step = 0;
    autoTimer = window.setInterval(autoMove,interval);
    function autoMove(){
      //當(dāng)已經(jīng)把最后一張展示完成后(step等于最后一張的索引),我們應(yīng)該展示第一張，我們讓step = -1,這樣再經(jīng)過一次累加，step就變?yōu)?，來展示第一張
      if(step === jsonData.length-1){
        step = -1
      }
      step++;
      setBanner();
    }
    //實(shí)現(xiàn)輪播圖切換效果的代碼
    function setBanner(){
      //1、讓step索引對應(yīng)的那個(gè)DIV的zIndex的值為1，其他的zIndex為0 
      for(var i = 0,len = divList.length;i<len;i++){
        var curDiv = divList[i];
        if(i===step){
          utils.css(curDiv,"zIndex",1)
          //2、讓當(dāng)前的透明度從0變?yōu)?,當(dāng)動(dòng)畫結(jié)束，我們需要讓其他的div的透明度的值直接變?yōu)?
          myAnimate(curDiv,{opacity:1},200,function(){
            var curDivSib = utils.siblings(this);
            for(var k = 0,len = curDivSib.length;k<len;k++){
              utils.css(curDivSib[k],'opacity',0)
            }

          })
          continue
        }
        utils.css(curDiv,"zIndex",0)
      }
      //實(shí)現(xiàn)焦點(diǎn)對其
      for(i = 0,len = oLis.length;i<len;i++){
        var curLi = oLis[i];
        i === step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
      }

    }
    //5、實(shí)現(xiàn)鼠標(biāo)懸停停止自動(dòng)輪播和離開在開啟自動(dòng)輪播
    banner.onmouseover = function(){
      window.clearInterval(autoTimer);
      bannerLeft.style.display = bannerRight.style.display = "block"

    }
    banner.onmouseout = function(){
      autoTimer = window.setInterval(autoMove,interval);
      bannerLeft.style.display = bannerRight.style.display = "none"
    }
    //6、實(shí)現(xiàn)點(diǎn)擊焦點(diǎn)切換
    ~function(){
      for(var i = 0,len = oLis.length;i<len;i++){
        var curLi = oLis[i];
        curLi.index = i;
        curLi.onclick = function(){
          step = this.index;
          setBanner();
        }
      }
    }()
    //7、實(shí)現(xiàn)左右切換
    bannerRight.onclick = autoMove;
    bannerLeft.onclick = function(){
      if(step === 0){
        step = jsonData.length;
      }
      step--;
      setBanner();
    }
  </script>
</body>
</html>

關(guān)于“js如何實(shí)現(xiàn)輪播圖之漸隱漸現(xiàn)版”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)頁標(biāo)題：js如何實(shí)現(xiàn)輪播圖之漸隱漸現(xiàn)版
當(dāng)前路徑：http://muchs.cn/article30/ipgipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、ChatGPT、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容