【原生JS】層疊輪播圖_ZenDei技術網路在線

【原生JS】層疊輪播圖

-Advertisement-

又是輪播？沒錯，換個樣式玩輪播。 HTML: CSS: JS: ...

又是輪播？沒錯，換個樣式玩輪播。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>before</title>
</head>
<body>
  <div class="box">
    <img class="front" src="img/A.jpg" alt="PIC">
    <img class="back" src="img/B.jpg" alt="PIC">
    <img class="active" src="img/C.jpg" alt="PIC">
    <div class="btns">
      <span class="btn">&lt;</span>
      <span class="btn">&gt;</span>
    </div>
  </div>
</body>
</html>

CSS:

  <style>
    .box {width: 1200px; height: 300px; transform-style: perserve-3d; margin: 50px auto; position: relative;}
    .box img{width:600px; position: absolute; top: 60px; transition:all .3s linear;}
    
    .box:hover .btn{opacity: 1;}

    .front {left: 0px;}
    .back {left: 600px;}   
    .active {left: 300px; transform: scale(1.5); z-index: 10;}
    
    .btns .btn {width: 60px; height: 60px; display: block; position: absolute; background-color: rgba(0,0,0,.5); font-size: 50px; font-family: "微軟雅黑"; color:rgba(255,255,255,.5); line-height: 55px; text-align: center; cursor: pointer; z-index: 100; opacity: 0; transition:opacity .3s linear;} 
    .btns .btn:first-child {top: 125px;}
    .btns .btn:last-child {top: 125px; right: 0px;}
  </style>

JS:

  <script>
    onload = function(){
      var btns = document.getElementsByClassName('btn'),
          imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');

      var index = 2,
          front = 0,
          back = 0,
          offset = false,
          timer = setInterval(timer,5000);
          


      for(var i=0;i<btns.length;i++){
        (function(i){
          btns[i].onclick = function(){click(i)};
        })(i);

        btns[i].onmouseover = function(){
          offset = true;
        }
        btns[i].onmouseout = function(){
          offset = false;
        }
      }

      for(var i=0;i<imgs.length;i++){
        imgs[i].onmouseover = function(){
          offset = true;
        }
        imgs[i].onmouseout = function(){
          offset = false;
        }
      }

      function timer(){
        console.log(offset)
        if(offset){
          return;
        }
        else{
          click(1)
        }
      }

      function click(x){
        imgs[index].setAttribute('class','');
        if(x === 0){
         if(--index < 0){
            index = --imgs.length;
          }
          front = back = index;
          if(++front > --imgs.length){front = 0}
          if(--back < 0){back = --imgs.length}
          imgs[front].style.zIndex = '1';
          imgs[back].style.zIndex = '0';
        }
        else{     
          if(++index > --imgs.length){
            index = 0;        
          }
          front = back = index;
          if(++front > --imgs.length){front = 0}
          if(--back < 0){back = --imgs.length}
          imgs[front].style.zIndex = '0';
          imgs[back].style.zIndex = '1';
        }
        imgs[index].style.zIndex = '10';
        imgs[front].setAttribute('class','front')
        imgs[back].setAttribute('class','back')  
        imgs[index].setAttribute('class','active');
      }
    }
  </script>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

html 手機web超出屏幕寬度的內容不換行，並產生橫向滾動條

html 手機web超出屏幕寬度的內容不換行，並產生橫向滾動條 white-space: nowrap;overflow-x: scroll; white-space: nowrap;overflow-x: scroll; ...
vue模板語法

Vue.js 使用了基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改 ...
（轉）預處器的對比——Sass、LESS和Stylus

英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout 原文鏈接：http://www.w3cplus.com/css/sass-vs-less ...
Js之on與addEventListener的使用與兩者的不同

講述js中的on事件與addEventListener的用法與不同 ...
13.6 模擬事件【JavaScript高級程式設計第三版】

事件，就是網頁中某個特別值得關註的瞬間。事件經常由用戶操作或通過其他瀏覽器功能來觸發。但很少有人知道，也可以使用JavaScript 在任意時刻來觸發特定的事件，而此時的事件就如同瀏覽器創建的事件一樣。也就是說，這些事件該冒泡還會冒泡，而且照樣能夠導致瀏覽器執行已經指定的處理它們的事件處理程式。在 ...
js常用代碼-自己總結

1.字元串截取substr(str,length)返回從指定位置開始，截取length長度的子字元串。substring(start,end)返回從start開始到end結束的字元串。end不寫就到結尾。區別，前者截取長度，後者截取位置 2.頁面跳轉window.history.back();返回的 ...
bootstrap-select中selectpicker在jquery的clone()後無效問題-解決方法

近期做一高校項目，招生計劃發佈需要實現同一專業在不同省份計劃招生的人數，即一對多以及多對多，就應用了批量填寫表單，由於整體UI框架用了bootstrap,那bootstrap-select的使用自然不在話下，於是使用了clone,但無奈發現bootstrap-select被clone,和after追 ...
手風琴頁面

啥都不說了，直接上 1.Html結構代碼 2.css樣式代碼 3.javascript代碼 4.主要： a.字體豎排垂直：字體大小font-size = 包含字體標簽寬度width b.js中stop()方法：stop()表示結束動畫有過渡 stop(true)表示暫停動畫， stop(true,t ...