communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
javascript - J'étudie le graphique carrousel que j'ai réalisé depuis un mois et j'aimerais vous poser des questions sur les problèmes qui s'y posent.
漂亮男人
漂亮男人 2017-05-19 10:10:56
0
4
482

Il y a deux problèmes : 

1，鼠标进入和移出只有第一次有用  后面就图片就开始乱切换了
2，点击右移按钮 图片不能从第一张切换到第5张 
做了一天了  求大神搭救！
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
*{
    margin: 0;padding: 0;
}
#ft{
    position: relative;
    width: 320px;height: 400px;
    margin: 50px auto;border: 1px solid #000;
    background-color: pink;    border-radius: 15px;

}
.rt{
    width: 30px;height: 30px;opacity:0.2;
    top: 160px;left: 290px;position: absolute;z-index: 10;
}
.lt{
    width: 30px;height: 30px;opacity:0.2;
    position: absolute;top: 160px;z-index: 10;left: 0;
}
img{
    width: 250px;height: 350px;
    position: absolute;left: 34px;top: 25px;

}
.cg{
    z-index: 9;



}
</style>
<body>
    <p id="ft">
        <p id="chd2">
            <img class="cg" src="1.png" >
            <img src="2.png" >
            <img src="3.png" >
            <img src="4.png" >
            <img src="5.png" >
        </p>
        <p id="chd1">
            <img class="lt" src="7.png" alt="">
            <img class="rt" src="8.png" alt="">
        </p>
    </p>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js">
    </script>
    <script>
        var $img=$("#chd2 img")
        var $stp=$("#chd2")
        var timer=setInterval(right,1500)
        $stp.mouseout(function(){
            setInterval(right,1500)
        })
        $stp.mouseover(function(){
            clearInterval(timer)
        })
        $(".rt").click(right)//点击向左按钮
         function right(){
            for(var i=0;i<$img.length;i++){
                if($img[i].className=="cg"&&i<$img.length-1){
                    $img[i].nextElementSibling.className="cg";
                    $img[i].className="";
                    break;
                }else if(i==$img.length-1){
                    $img[i].className="";
                    $img[0].className="cg";
                }
            }
        }
        $(".lt").click(function(){//点击向右按钮
            for(var i=0;i<$img.length;i++){
                if($img[i].className=="cg"&&i>0){
                    $img[i].className="";
                    $img[i].previousElementSibling.className="cg";
                    break;
                }else if(i==0){
                    $img[i].className="";
                    $img[4].className="cg";break
                }
            }
        })



    </script>


</body>
</html>
漂亮男人
漂亮男人

répondre à tous(4)
小葫芦
小葫芦2017-05-19 10:12:56 4 plancher 
var timer=setInterval(right,1500)
 $stp.mouseout(function(){
       timer = setInterval(right,1500)
})
 $stp.mouseover(function(){
        clearInterval(timer)
 })

Si vous réinitialisez le minuteur lorsque la souris est déplacée, n'oubliez pas d'attribuer une valeur au minuteur, sinon le clearInterval suivant ne connaîtra pas le message d'effacement ~

Comme +0
Ajouter une réponse
阿神
阿神2017-05-19 10:12:56 3 plancher 
 var timer=setInterval(right,1500)
        $stp.mouseout(function(){
            setInterval(right,1500)
        })
        $stp.mouseover(function(){
            clearInterval(timer)
        })

Il y a un problème ici. La minuterie est activée au début. Après le premier passage, la minuterie est désactivée lorsque la souris est à nouveau exécutée, une minuterie est activée $stp.mouseout(function(){

). 
            setInterval(right,1500)
        })

Mais cette minuterie n'est pas une minuterie, vous ne pouvez donc pas effacer cette minuterie plus tard.

Comme +0
Ajouter une réponse
某草草
某草草2017-05-19 10:12:56 2 plancher 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        html{
            margin: 0;
            padding:0;
        }
        img{
            display: none;
        }

    </style>
    <title>Title</title>
</head>
<body>
    <p id="scroll" style="width: 400px;height:200px;padding: 20px ">
        <img src="1.bmp" alt="">
        <img src="2.bmp" alt="">
        <img src="3.bmp" alt="">
        <img src="4.bmp" alt="">
    </p>
    <script src="app.js"></script>
</body>
</html>
(function () {
    let scroll = document.getElementById("scroll");
    let images = Array.prototype.slice.call(document.querySelectorAll("#scroll > img"));
    
    let index = 0;
    images[index].style.display = "block";
    
    let startScroll = function () {
        return setInterval(
            function () {
                for(let image of images){
                    image.style.display = "none";
                }
                images[index].style.display = "block";
                index = (index+1)>3?0:index+1
            },
            1000
        );
    };

    let int = startScroll();

    scroll.addEventListener("mouseover",function (e) {
        clearInterval(int);
    });

    scroll.addEventListener("mouseout",function (e) {
        int = startScroll();
    })


})();
Comme +0
Ajouter une réponse
黄舟
黄舟2017-05-19 10:12:56 1 plancher

Pourquoi personne n'a répondu à ma deuxième question ?

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal