Question

好吧所以我试图让悬停功能工作，当我的鼠标离开悬停区域时，我所在的div将暂停并再次启动。这是我到目前为止所拥有的

HTML

 <div id="slideshow">
 <div>
 <iframe width="400"; " height="290"; src="www.google.com"></iframe>
 </div>
 <div>
 <iframe width="400"; " height="290"; src="www.google.com"></iframe>
 </div>
 <div>
 <iframe width="400"; " height="290"; src="www.google.com"></iframe>
 </div>
 </div>

CSS

<style>
 #slideshow {  
position: relative; 
width: 340px; 
height: 340px; 
padding: 1px; 
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: relative; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
}

</style>

的jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$("#slideshow > div:gt(0)").hide();
$("#slideshow").hover(function () { 
this.stop();
}, function () {
this.start();
});

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  10500);

</script>

对此问题的任何帮助将不胜感激。我尝试过一些不同的东西，例如.hover（）,. stop（）和clearInterval（）。我认为我的执行完全错了。提前致谢。

Answer 1

你开始学习javascript。你必须阅读文档并理解使用api的功能，如jquery和其他javascript库。请理解函数并使用this.start（）和this.stop（）来定义它吗？

Answer 2

您可以在mouseenter事件中使用clearInterval实现目标。 试试这个

<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>slideshow</title>
        <style>
             #slideshow {  
                position: relative; 
                width: 400px;
                height: 290px;              
                box-shadow: 0 0 20px rgba(0,0,0,0.4); 
            }
            #slideshow iframe { 
                position: absolute; 
                top: 0px; 
                left: 0px;      
                height: 100%;   /* fit to parent */
                width: 100%;    
                display: none;      
            }
            #slideshow iframe:first-child{display:block;} /*Initially display  
                                                           the first iframe */
        </style>
    </head>
    <body>
        <div id="slideshow">
                <iframe src="http://www.example.com"></iframe> 
<!-- You cannot use www.google.com. The reason for this is, 
that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. 
This option prevents the browser from displaying iFrames that are not hosted
 on the same domain as the parent page. -->

                <iframe src="http://www.example.com"></iframe>
                <iframe src="http://www.example.com></iframe>
        </div>
         <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>

            myinterval = doAnimation(); // Start the animation

            $('#slideshow').on({                    
                mouseenter: function(e){
                    clearInterval(myinterval); //stop animation
                  },
                mouseleave: function(e){      //restart animation 
                    myinterval = doAnimation();   
                  }
            });

          // Animate the slideshow.
            function doAnimation(){
                return setInterval(function(){
                    $('#slideshow :first-child')
                        .fadeOut()
                        .next('iframe')
                        .fadeIn()
                        .end()
                        .appendTo('#slideshow');
                    }, 2000);
            }

        </script>
    </body>
</html>

停止在div上盘旋

2 个答案: