recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Problème d'affichage du carrousel d'images CSS

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

Je voudrais demander pourquoi la dernière photo est affichée sur la page au lieu de la première !

为情所困为情所困2741 Il y a quelques jours624

répondre à tous(5)je répondrai

  • 世界只因有你

    世界只因有你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>

    répondre
    0
  • 怪我咯

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

    Le problème se produit dans .wrapper li{position : absolue;gauche : 0;top:0;}, au-dessus de cette phrase, tous les li sont positionnés de manière absolue et les positions sont à gauche : 0, haut : 0, et ce qui suit couvre le la précédente, c'est donc la dernière affichée ; la façon dont vous écrivez l'image du carrousel sur Baidu, selon votre façon d'écrire, ne peut pas être ajustée

    répondre
    0
  • 黄舟

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

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

    répondre
    0
  • 淡淡烟草味

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

    Vous pouvez enregistrer le chemin de l'image dans le tableau et utiliser js pour remplacer la valeur src de l'image afin de réaliser une lecture par clic

    répondre
    0
  • 给我你的怀抱

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

    Vous avez positionné de manière absolue tous les éléments img, bien sûr le dernier est en haut, et vous avez positionné leurs conteneurs parents de manière absolue

    répondre
    0
  • Annulerrépondre