JS實現簡單的輪播圖（非常簡單，一看就懂）

阿新 • • 發佈：2019-01-20

主要思路：先將需要輪播的4張圖使用絕對定位讓其重疊在banner這個盒子中，然後遍歷所有的圖片將其隱藏，再獲取當前圖片的index值，根據當前的index值設定當前的圖片顯示出來。設定間歇定時器setInterval每隔1秒使得index的值加1，如果大於圖片個數則index=0，每隔1秒呼叫changeImg()函式，改變圖片的顯示。li項的實現原理一樣，總的來說就是圍繞index的值來進行設定圖片的顯示與隱藏，或是Li項的樣式，從而達到輪播圖的效果。

以下為程式碼部分：

HTML程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS實現輪播圖</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="main" id="main">
        <div class="nav" id="nav">
            <ul>
                <li class="changeColor">首頁</li>
                <li>點選看看</li>
                <li>會自動的</li>
                <li>我的網站</li>
            </ul>
        </div>
        <div class="banner" id="banner">
            <a href="#">
                <div class="banner-slide slide1"></div>
            </a>
            <a href="#">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="#">
                <div class="banner-slide slide3"></div>
            </a>
            <a href="#">
                <div class="banner-slide slide4"></div>
            </a>
        </div>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS程式碼：

* {
    padding: 0;
    margin: 0;
}

.main {
    width: 1200px;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
}

.nav {
    width: 1200px;
    height: 80px;
}

ul {list-style-type: none;}

li {
    float: left;
    width: 25%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
}

.changeColor {
    background: #ffcc00;
    border-radius: 5px;
}

.banner {
    width: 1200px;
    height: 460px;
    overflow: hidden;
}

.banner-slide {
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
}

.slide1 {
    background-image: url("../img/1.jpg");
}
.slide2 {
    background-image: url("../img/2.jpg");
}
.slide3 {
    background-image: url("../img/3.jpg");
}
.slide4 {
    background-image: url("../img/4.jpg");
}

JS程式碼：

var timer = null,
    index = 0,
    pics = document.getElementsByClassName("banner-slide"),
    lis = document.getElementsByTagName("li");


//封裝一個代替getElementById()的方法
function byId(id){
    return typeof(id) === "string"?document.getElementById(id):id;
}

function slideImg() {
    var main = byId("main");
    var banner = byId("banner");
    main.onmouseover = function(){
        stopAutoPlay();
    }
    main.onmouseout = function(){
        startAutoPlay();
    }
    main.onmouseout();

    //點選導航欄切換圖片
    for(var i=0;i<pics.length;i++){
        lis[i].id = i;
          //給每個li項繫結點選事件
        lis[i].onclick = function(){
          //獲取當前li項的index值
            index = this.id;
            changeImg();
        }
    }
}
//開始播放輪播圖
function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>3){
            index = 0;
        }
        changeImg();
    },1000);
}
//暫停播放
function stopAutoPlay(){
    if (timer) {
        clearInterval(timer);
    }
}
//改變輪播圖
function changeImg(){
    for(var i=0;i<pics.length;i++){
        pics[i].style.display = "none";
        lis[i].className = "";
    }
    pics[index].style.display = "block";
    lis[index].className = "changeColor";
}

slideImg();

效果如下：

JS實現簡單的輪播圖（非常簡單，一看就懂）

JS實現簡單的輪播圖（非常簡單，一看就懂）

Sql Server中儲存過程中輸入和輸出引數（簡單例項，一看就懂）

解惑內部類（結合程式碼，一解就懂）

焦點輪播圖（7）原生JS實現焦點輪播圖--完整程式碼

簡單輪播圖（從本地資源獲取圖片）

原生JS實現旋轉輪播圖+文字內容切換

原生JS例項之輪播圖《由簡單到炫酷》系列二

原生JS例項之輪播圖《由簡單到炫酷》系列一

簡單的輪播圖（單張顯示，無特效）

純js實現無縫輪播圖

RecyclerView實現廣告輪播圖（一）

用原生JS實現旋轉輪播圖

用js實現旋轉輪播圖

JS實現圖片輪播效果（自動和手動）

iOS最笨的辦法實現無限輪播圖（網路載入）

長連線是如何實現的（不看後悔，一看必懂）

如何實現自己的執行緒池（不看後悔，一看必懂）

面試 | JS高階---原型到原型鏈（一看就懂）

maven如何編譯（陳老師精講一看就懂）

hibernate相關面試題（不看後悔，一看必懂）

JS實現簡單的輪播圖（非常簡單，一看就懂）

相關推薦