cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Saya telah mengkaji carta karusel yang saya buat selama sebulan saya ingin bertanya kepada anda tentang masalah yang timbul di dalamnya.

Ada dua masalah:

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>
漂亮男人漂亮男人2817 hari yang lalu471

membalas semua(4)saya akan balas

  • 高洛峰

    高洛峰2017-05-19 10:12:56

    var timer=setInterval(right,1500)
     $stp.mouseout(function(){
           timer = setInterval(right,1500)
    })
     $stp.mouseover(function(){
            clearInterval(timer)
     })

    Jika anda menetapkan semula pemasa apabila tetikus dialihkan keluar, ingatlah untuk memberikan nilai kepada pemasa, jika tidak, clearInterval yang berikutnya tidak akan mengetahui sei yang jelas~

    balas
    0
  • 阿神

    阿神2017-05-19 10:12:56

     var timer=setInterval(right,1500)
            $stp.mouseout(function(){
                setInterval(right,1500)
            })
            $stp.mouseover(function(){
                clearInterval(timer)
            })
            

    Terdapat masalah di sini Pemasa dihidupkan pada permulaan Selepas kali pertama, pemasa dimatikan Apabila tetikus keluar semula, pemasa dihidupkan $stp.mouseout(){

                setInterval(right,1500)
            })

    Tetapi pemasa ini bukan pemasa, jadi anda tidak boleh mengosongkan pemasa ini kemudian.

    balas
    0
  • 某草草

    某草草2017-05-19 10:12:56

    <!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();
        })
    
    
    })();

    balas
    0
  • 黄舟

    黄舟2017-05-19 10:12:56

    Kenapa tiada siapa yang menjawab soalan kedua saya?

    balas
    0
  • Batalbalas