JS實現---圖片輪播效果

時間 2019-11-20

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS幻燈代碼</title>
    <script>

        function show(num) {
            var obj0=document.getElementById("image_0");
            switch (num){
                case 1:
                    obj0.src="../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg";
                    break;
                case 2:
                    obj0.src="../image/00fba12e3275496a904141a1303fdcf3.jpg";
                    break;
                case 3:
                    obj0.src="../image/3b8ec93770744ff4ad12e25ec4a200b1.jpg";
                    break;
                case 4:
                    obj0.src="../image/1fbc738f98634c0f80f283e14455369c.jpg";
                    break;
            }
        }
//定義定時器，每隔三秒就換圖
        var index=1;
        function IMG() {
            setInterval(function () {
                index++;
                if (index>=4){
                    index=1;
                }
                show(index);
            },3000);
        }

    </script>
</head>
//須要注意的地方是：當頁面加載完的時候就須要輪播圖片須要在body裏邊調用onload方法
<body onload="IMG()">
<div style="width: 300px;height: 300px">
    <div style="width: 100%;height: 100%">
        <img id="image_0" src="../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg" />
        <div style="position:absolute;left:150px;top:310px;">
            <a href="javascript:show(1)">1</a> 
            <a href="javascript:show(2)">2</a> 
            <a href="javascript:show(3)">3</a> 
            <a href="javascript:show(4)">4</a>
        </div>
    </div>
    </div>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。