使用JavaScript製做一個好看的輪播圖

時間 2019-12-14

標籤使用 javascript 製做一個好看欄目 JavaScript 简体版

原文原文鏈接

目錄javascript

使用JavaScript製做出好看的輪播圖效果
- 準備材料

使用JavaScript製做出好看的輪播圖效果

準備材料

1.圖片若干張（包括輪播圖和按鈕的圖片）

1.jpg

2.jpg

3.jpg

4.jpg

1.png

2.png

3.png

4.png

a1.png

a2.pngcss

2.將按鈕的圖片應用到按鈕上的CSS樣式文件

我取名爲b1-2a1-4.css，其中b1和b2是左右選擇的按鈕，a1-4是跳轉到1到4中的一張圖的按鈕。html

.b1 {
    width: 62px;
    height: 94px;
    background: url(image/a1.png);
    position: absolute;
    top: 200px;
    left: 7px;
}

.b2 {
    width: 62px;
    height: 94px;
    background: url(image/a2.png);
    float: left;
    position: absolute;
    top: 200px;
    left: 677px;
}

.a1 {
    width: 29px;
    height: 29px;
    background: url(image/1.png);
    position: absolute;
    top: 420px;
    left: 600px;
}

.a2 {
    width: 29px;
    height: 29px;
    background: url(image/2.png);
    position: absolute;
    top: 420px;
    left: 630px;
}

.a3 {
    width: 29px;
    height: 29px;
    background: url(image/3.png);
    position: absolute;
    top: 420px;
    left: 660px;
}

.a4 {
    width: 29px;
    height: 29px;
    background: url(image/4.png);
    position: absolute;
    top: 420px;
    left: 690px;
}

3.實現輪播和點擊跳轉的JavaScript代碼

其中用一個變量i的餘數來判斷當前是第幾張圖片。
經過changeImg函數來控制圖片的切換。
有一個2秒的計時器，每2秒i值加1。
b3是100ms執行一次，檢測i值是否改變，並調用changeImg函數來切換圖片。
b1和b2是左右切換，a1-a4是任意切換，他們除了要完成相應的切換（i++/i--/i=400/401/...）以外，還要調用changeImg函數，最後要重置一下2秒自動輪播的定時器。
這個文件的名字，嗯，就是b1-3a1-4.js

var i = 400;
var img = document.getElementById("img1");
var timeID;
timeID = setInterval("i++", 2000);

function changeImg(i) {
    var imgs;
    if(i % 4 == 0) {
        imgs = "image/1.jpg";
    } else if(i % 4 == 1) {
        imgs = "image/2.jpg";
    } else if(i % 4 == 2) {
        imgs = "image/3.jpg";
    } else {
        imgs = "image/4.jpg";
    }
    return imgs;
}

function b1() {
    i--;
    var img = document.getElementById("img1");
    img.src = changeImg(i);
    clearInterval(timeID);
    timeID = setInterval("i++", 2000);
}

function b2() {
    i++;
    var img = document.getElementById("img1");
    img.src = changeImg(i);

    clearInterval(timeID);
    timeID = setInterval("i++", 2000);
}

function a1() {
    i = 400;
    var img = document.getElementById("img1");
    img.src = changeImg(i);
    clearInterval(timeID);
    timeID = setInterval("i++", 2000);
}

function a2() {
    i = 401;
    var img = document.getElementById("img1");
    img.src = changeImg(i);

    clearInterval(timeID);
    timeID = setInterval("i++", 2000);
}

function a3() {
    i = 402;
    var img = document.getElementById("img1");
    img.src = changeImg(i);
    clearInterval(timeID);
    timeID = setInterval("i++", 2000);
}

function a4() {
    i = 403;
    var img = document.getElementById("img1");
    img.src = changeImg(i);

    clearInterval(timeID);
    timeID = setInterval("i++", 2000);
}

function b3() {
    var img = document.getElementById("img1");
    img.src = changeImg(i);
}
setInterval("b3()", 100);

4.用html將他們聯繫起來！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="b1-2a1-4.css" />
        <script src="b1-3a1-4.js" type="text/javascript"></script>
    </head>
    <body>
        <img src="image/1.jpg" id="img1"/>
        <input type="button" class="b1" onclick="b1()"/>
        <input type="button" class="b2" onclick="b2()"/>
        <input type="button" class="a1" onclick="a1()"/>
        <input type="button" class="a2" onclick="a2()"/>
        <input type="button" class="a3" onclick="a3()"/>
        <input type="button" class="a4" onclick="a4()"/>
    </body>
</html>

完工！（這實際上是以前作的，拿來湊數233333）話說我真的以爲挺好看的作的~java