<!DOCTYPE html><html lang="en"><head> {程式碼...} </head><body><div class="wrapper"> {程式碼...} <

問題是出現在.wrapper li{position: absolute;left: 0;top:0;}，這一句上面，所有的li都被絕對定位了，並且位置都是left: 0, top: 0，後面的覆蓋在前面的上面，因此就是顯示的最後一個了；百度一下輪播圖的寫法，依你的寫法，是整不出來的

可以將圖片路徑保存在陣列裡面，使用js取代image的src值來實現點擊播放

你把所有的img元素都絕對定位了，當然是最後一張在最上面啊，你把他們的父容器絕對定位

javascript - CSS圖片輪播顯示問題

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    *{
        margin: 0;
        padding:0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .wrapper{
        width: 640px;
        height: 368px;
        margin: 50px auto;
        position: relative;
    }
    .wrapper li{
        position: absolute;
        left: 0;
        top:0;
    }

    .toggle{
        width: 640px;
        height: 368px;
    }
    .toggle span{
        width: 30px;
        height: 50px;
        background:#FF9629;
        position: absolute;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
       /* display: none;*/
    }
    #prev{
        top:159px;
    }
    #next{
        top:159px;
        right:0;
    }
</style>

</head>
<body>
<p class="wrapper">

<ul id="list">
    <li><a href="#"><img src="img/1.jpg"></a></li>
    <li><a href="#"><img src="img/2.jpg"></a></li>
    <li><a href="#"><img src="img/3.jpg"></a></li>
    <li><a href="#"><img src="img/4.jpg"></a></li>
    <li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<p class="toggle">
    <span id="prev"><</span>
    <span id="next">></span>
</p>

</p>
<script type="text/javascript">

var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
function fn(ev) {
    var nowLeft =parseInt(list.style.left)+ev;
    list.style.left = nowLeft+"px";
}

prev.onclick = function () {
    fn(640);
};
next.onclick = function () {
   fn(-640);
};

</script>
</body>
</html>

我想問一下，為什麼頁面上顯示的是最後一張圖片在最上面，而不是第一張！

为情所困2741 天前625

javascript - CSS圖片輪播顯示問題

全部回覆(5)我來回復