js 基礎篇（點擊事件輪播圖的實現）

時間 2019-11-12

原文原文鏈接

輪播圖在之後的應用中仍是比較常見的，不須要多少行代碼就能實現。可是在只掌握了js基礎知識的狀況下，怎麼來用較少的並且邏輯又簡單的方法來實現呢？下面來分析下幾種不一樣的作法：javascript

一、利用位移的方法來實現css

　　首先，咱們能夠在body中添加一個div而且將寬度設置成百分比（自適應頁面），比例具體是相對誰的百分比的話按需求來作，在這裏很少說。將圖片放入到div 中。html

　　其次，樣式部分將img標籤所有設置成absolute；以方便定位java

　　最後，js部分說說邏輯，定義兩個空數組，第一個數組用來保存初始的顯示在頁面的圖片和等待進入的圖片，第二個數組保存其他的n張圖片，假設這兩個數組分別設置爲：waitToShow=[]; 和 goOut=[]; waitToShow.shift();彈出第一張圖片假如命名爲showFirst，併爲showFirst圖片設置位移和移動時間，執行完成以後showFirst放入goOut尾部：goOut.push(showFirst); 這時waitToShow數組的第0個元素就變成原來的第二張要顯示的圖片，給這個圖片waitToShow[0]設置位移和移動時間，而且將goOut數組的首元素圖片彈出來，在放進waitToShow數組的尾部，保證waitToShow數組永遠是一張顯示的圖片和待顯示的圖片，這樣就經過兩個數組造成了一個循環來完成輪播圖的實現。反向的邏輯是同樣的（因爲邏輯過於複雜這裏不推薦）數組

二、利用層級的高低來使最頂部圖片變化的作法（這個作法沒有位移的動做，可是邏輯卻很是簡便，很實用）url

直接來代碼更直觀點：基本每行都有註釋---實例一spa

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖 (閃現 自適應)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</div>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 獲取images元素生成字符串數組，字符串數組不能進行push pop splice 等操做
// 因此要將它的值從新存放進一個數組中，後面有定義
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//獲取變量index 用來爲後面設置層級用
var index = 1000;
// 獲取一個空的數組，用來存放images裏面的字符串元素
var imagess = [];

// for循環用來給imagess數組賦值，而且改變數組中的元素的層級
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 當前圖片的層級的設置，一輪for循環都爲他們設置了初始的zIndex，圖片越靠前，層級設置
// 要求越高，因此用的是－i,這樣圖片會按順序從第一張，第二張.....依次向下
currentImage.style.zIndex = -i;
}

// 設置計數器count，執行一次點擊事件（向左或者向右）count加1
var count = 0;
// 向左的點擊事件
butLeft.onclick = function() {
// 從數組頭部彈出一個圖片元素
var showFirst = imagess.shift();
// 給彈出的這個圖片元素設置層級，即 －1000+count，
// 讓層級相較其餘元素是最小的，數組頭部彈出的圖片會顯示在最底層
showFirst.style.zIndex = - index + count;
// 層級改變完成後再將他push進數組的尾部
imagess.push(showFirst);
// 點擊一次加1，不用考慮具體的值，只須要有點擊事件加 1
count++;
}
// 向右點擊事件
butRight.onclick = function() {
// 從imagess的尾部彈出一個元素，並賦值給showFirst
var showFirst = imagess.pop();
// 設置showFirst的層級爲最大，1000+count ，這樣他會顯示在第一層
showFirst.style.zIndex = index + count;
// 層級改變以後將他在插入數組imagess的頭部
imagess.unshift(showFirst);
// 點擊一次加1
count++;
}
</script>
</html>

這是我作的另外一個實例：實例2：code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }
    @font-face {
       font-family: myfont;
        src:url(font/iconfont.woff);
    }
    .tb{
        font-family:myfont;
        font-size: 60px;
        margin-top: 120px;
    }
    #banner{
        border: 1px solid red;
        width: 1200px;
        height: 600px;
        margin: 0 auto;
        background-image: url("background.jpg");

    }
    #container{
        /*border: 1px solid blue;*/
        width: 980px;
        /*height: 100%;*/
        overflow: hidden;
        margin: 0 auto;
        /*margin-top: 50px;*/
        position: relative;
    }
    #top{
        height: 70px;
        width: 980px;
        background-image: url("topbg.png");
        margin: 0 auto;
        /*margin-top:20px;*/
    }
    #bottom{
        height: 70px;
        width: 980px;
        background-image: url("topbg.png");
        margin: 0 auto;
        margin-top: -30px;
    }
    ul{
        width: 6860px;
        height: 100%;
        position: relative;
    }
    ul li{
        list-style-type: none;
        float:left;
    }
    #prev{
        position: absolute;
        left: 470px;
        top: 80px;
        color:white;
        /*border: 1px solid red;*/
        border-radius: 100px 100px 100px 100px;
        background-color: rgba(0,0,0,0.5);
        height: 100px;
        line-height: 100px;
        width: 100px;
        text-align: center;
    }
    #next{
        position: absolute;
        top: 80px;
        right: 470px;
        color: white;
        /*border: 1px solid red;*/
        border-radius: 100px 100px 100px 100px;
        background-color: rgba(0,0,0,0.5);
        height: 100px;
        line-height: 100px;
        width: 100px;
        text-align: center;
    }
</style>
<body>
   <div id="banner">
      <div id="top"></div>
      <div id="container">
          <ul id="show">
              <li><img src="1.jpg"/></li>
              <li><img src="2.jpg"/></li>
              <li><img src="4.jpg"/></li>
              <li><img src="5.jpg"/></li>
              <li><img src="6.jpg"/></li>
              <li><img src="7.jpg"/></li>
              <li><img src="8.jpg"/></li>
          </ul>
      </div>
      <div id="bottom"></div>
   </div>
   <a class="tb" id="prev">&#xe623;</a>
   <a class="tb" id="next">&#xe690;</a>
<script type="text/javascript">
//    var page = 1, i = 1;
    var nextBtn = document.getElementById("next");
    var prevBtn = document.getElementById("prev");
    var showPart = document.getElementById("show");//得到顯示區域
    var tu = showPart.getElementsByTagName("li");//得到圖片列表

         tu[0].parentNode.style.left=0+"px";

    nextBtn.onclick = function(){
        var zhiz=parseFloat(tu[0].parentNode.style.left);
        if(zhiz>-5880){
            tu[0].parentNode.style.left=-980+zhiz+"px";
        tu[0].parentNode.style.transition="all 1s linear"

        }else{
            tu[0].parentNode.style.transition=""
            tu[0].parentNode.style.left=0+"px";

        }
    }
    prevBtn.onclick = function(){
        var zhiy=parseFloat(tu[0].parentNode.style.left);
        console.log(zhiy)
        if(zhiy<0){
            tu[0].parentNode.style.left=980+zhiy+"px";
            console.log(zhiy)
            tu[0].parentNode.style.transition="all 1s linear"

        }else{
            tu[0].parentNode.style.transition=""
            tu[0].parentNode.style.left=-5880+"px";
        }
    }


</script>
</body>
</html>