简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - CSS圖片輪播顯示問題
为情所困
为情所困 2017-05-31 10:41:15
0
5
575

<!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>

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

为情所困
为情所困

全部回覆(5)
世界只因有你
世界只因有你2017-05-31 10:43:15 5樓


雷雷

點贊 +0
新增回覆
刘奇
刘奇2017-05-31 10:43:15 4樓

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

點贊 +0
新增回覆
黄舟
黄舟2017-05-31 10:43:15 3樓

雷雷

點贊 +0
新增回覆
淡淡烟草味
淡淡烟草味2017-05-31 10:43:15 2樓

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

點贊 +0
新增回覆
给我你的怀抱
给我你的怀抱2017-05-31 10:43:15 1樓

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！