實現原理

將點擊的a標簽的href屬性值賦給img標簽的src屬性，這樣有個好處，就是如果瀏覽器不支持js的話，點擊a標簽也可跳轉到圖片地址看到圖片，不會影響內容的呈現

註：需要導入jquery庫

html代碼

<div class="banner">
    <img src="1.png">
    <ul>
        <li><a href="1.png">1</a></li>
        <li><a href="2.png">2</a></li>
        <li><a href="3.png">3</a></li>
        <li><a href="4.png">4</a></li>
    </ul>
</div>
 

css代碼

/* 先取消默認樣式 */
a { text-decoration: none; }
ul { list-style-type: none; }
ul, li {
    padding: 0;
    margin: 0;
}
.banner li {
    float: left;
}
.banner img {
    width: 600px;
    height: 400px;
}
/* relative和absolute用於控制切換按鈕位置 */
.banner {
    position: relative;
    width: 600px;
    height: 400px;
    margin: auto;
}
.banner ul {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.banner ul li {margin-left: 5px;}
.banner ul li a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #8c8c8c;
    text-align: center;
    border-radius: 50%; /* 讓按鈕變圓形 */
    color: #FFF
}
 

js代碼

導入jquery庫

<script src="jquery.js"></script>

$(document).ready(function(){  // 在一開始綁定a的點擊切換輪播圖事件
    $(".banner>ul>li>a").click(function(){
       banner(this);
       return false;
    });
    bannerRoll();
});
// 用a標簽按鈕切換輪播圖
function banner(obj) {  // obj 當前標簽
    var img = $(obj).parent().parent().prev();
    $(img).attr("src", $(obj).attr("href"));
}
var t;  // 用於標識定時器
function bannerRoll() {
    t = setInterval(showPic, 3000);     // 設置每三秒調用換圖函數換張圖
}
var x = 0;  // 全局變量，記錄當前第幾張輪播圖
function showPic() {
    // 獲取a父標簽li的個數，輪流播放
    var arr_uls = $(".banner>ul");
    arr_uls.each(function() {   // 遍歷ul標簽，給它的img換張圖
        if (x >= $(this).children().length) x = 0;
        $(this).prev("img").attr("src", arr_uls.children("li").eq(x).children("a").attr("href"));
    });
    x++;
}
//鼠標經過盒子時，清除定時
$(".banner").mouseenter( function(){
        clearInterval(t);
}).mouseleave( function(){
    //鼠標離開盒子時，再次定時
    bannerRoll();
});
 

CSS/HTML/JS實現圖片輪播