cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Masalah paparan karusel imej CSS

<!DOCTYPE html>
<html lang="ms">
<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>

</kepala>
<badan>
<p class="pembungkus">

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

Saya ingin bertanya mengapa gambar terakhir dipaparkan pada halaman dan bukannya gambar pertama!

为情所困为情所困2741 hari yang lalu627

membalas semua(5)saya akan balas

  • 世界只因有你

    世界只因有你2017-05-31 10:43:15

    <!DOCTYPE html>
    <html>

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

    </html>

    balas
    0
  • 怪我咯

    怪我咯2017-05-31 10:43:15

    Masalah berlaku dalam .wrapper li{kedudukan: mutlak;kiri: 0;atas:0;}, di atas ayat ini, semua li berada pada kedudukan mutlak, dan kedudukan ditinggalkan: 0, atas: 0, dan yang berikut Meliputi yang sebelumnya, jadi ia adalah yang terakhir dipaparkan; cara anda menulis imej karusel pada Baidu, mengikut cara penulisan anda, tidak boleh dilaraskan

    balas
    0
  • 黄舟

    黄舟2017-05-31 10:43:15

    .wrapper li{
        position: absolute;        <---
        left: 0;
        top:0;
    }

    balas
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-31 10:43:15

    Anda boleh menyimpan laluan imej dalam tatasusunan dan menggunakan js untuk menggantikan nilai src imej untuk mencapai main klik

    balas
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-31 10:43:15

    Anda benar-benar meletakkan semua elemen img, sudah tentu yang terakhir berada di bahagian atas, dan anda benar-benar meletakkan bekas induknya

    balas
    0
  • Batalbalas