<!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 天前628

javascript - CSS图片轮播显示问题

全部回复(5)我来回复