<!DOCTYPE html><html lang="en"><head> {代码...} </head><body><div class="wrapper"> {代码...} &lt

The problem occurs in .wrapper li{position: absolute;left: 0;top:0;}, above this sentence, all li are absolutely positioned, and the positions are left: 0, top: 0, and the following Covers the previous one, so it is the last one displayed; the way you write the carousel image on Baidu, according to your way of writing, cannot be adjusted

You can save the image path in the array and use js to replace the src value of the image to achieve click play

You absolutely position all img elements, of course the last one is at the top, and you absolutely position their parent containers

javascript - CSS image carousel display problem

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

I would like to ask why the last picture is displayed on the top instead of the first one!

为情所困2697 days ago589

<head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } .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 id="imgp"> <img id="imgImg" src="img/1.png" /> </p> <p class="toggle"> <span id="prev"><</span> <span id="next">></span> </p> </body> <script type="text/javascript"> var arrayImg = ['img/1.png' , 'img/2.png' , 'img/3.png' , 'img/4.png' , 'img/5.png']; var prev = document.getElementById("prev"); var next = document.getElementById("next"); var imgImg = document.getElementById("imgImg"); var i = 0 ; prev.onclick = function(){ i--; if(i < 0){ i = 4 ; } imgImg.setAttribute("src" , arrayImg[i]); } next.onclick = function(){ i++; if(i > 4){ i = 0 ; } imgImg.setAttribute("src" , arrayImg[i]); } </script>

javascript - CSS image carousel display problem

reply all(5)I'll reply