js點擊上下按鈕切換圖片

時間 2019-12-04

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    &emsp;&emsp;
    <meta charset="utf-8">
    &emsp;&emsp;<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
            /*將box裏的內容居中顯示*/
        }

        .btn {
            display: inline-blocki;
            /*讓a標籤變成行內塊級元素*/
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #333;
            padding: 5px;
            font-size: 12px;
        }

        .btn:active {
            background-color: #666;
            color: white;
        }
    </style>
</head>

<body>
    &emsp;&emsp;<div class="box">
        &emsp;&emsp;&emsp;&emsp;<img src="http://m.beijing.xuefu.com/beijing/img/mcd-index-002xa.png" alt="pic" id="img">
        &emsp;&emsp;&emsp;&emsp;<p>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a href="javascript:;" class="btn" data-control="last">上一頁</a>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a href="javascript:;" class="btn" data-control="next">下一頁</a>
            &emsp;&emsp;&emsp;&emsp;</p>
        &emsp;&emsp;</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var imgs = [//定義數組用來存儲圖片的路徑
            'http://m.beijing.xuefu.com/beijing/img/mcd-index-002xa.png',
            'http://beijing.xuefu.com/g-img/index-banner/index-mwh-bn4.png',
            'http://beijing.xuefu.com/g-img/index-banner/index-mnj-sj4.png'
        ];
        var index = 0;//設置第一張圖片的索引值爲0
        var len = imgs.length;//獲取存儲圖片數組的長度
        $('.btn').on('click', function () {
            if ($(this).data('control') === "last") {

                index = Math.max(0, --index);//若是index的值小於0，使index爲0
            } else
                index = Math.min(len - 1, ++index);//若是index大於了數組長度 ，使index等於數組長度減一的值
            document.title = (index + 1) + '/' + len;//改變標題內容
            $('#img').attr('src', imgs[index]);//動態改變圖片的路徑
        });
    </script>
</body>

</html>
複製代碼

相關標籤/搜索

每日一句

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

js點擊上下 按鈕 切換圖片

js點擊上下按鈕切換圖片