How to stop marquee slide show on mouse over in JavaScript?

问题

I want to stop slide show on mouse over and start on mouse out.
I saw some suggestions in stack overflow.
In that i didn't get any solution (may be this is my fault to understand the others code according to my code. So because of that i am giving my code).

<marquee height="80%" width="600px" direction="left" scrolldelay="120" align="middle">
<div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>
  <div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>
  <div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p ><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>
  <div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p ><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>

        </marquee>

回答1:

Try this

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();"></marquee>

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"></marquee>

回答2:

If you don't want to write your JavaScript inline, you can put this in a JavaScript file:

marquee = document.getElementsByTagName('marquee')[0];
marquee.onmouseover = function(){
  this.stop();
}
marquee.onmouseout = function(){
  this.start();
}

Here's a demo: http://jsfiddle.net/8fymm/1/

回答3:

try this,

<marquee behavior="scroll" 
         direction="left"
         onmouseover="this.stop();"
         onmouseout="this.start();">Go on... hover over me!</marquee>

see your live Demo

来源：https://stackoverflow.com/questions/22655738/how-to-stop-marquee-slide-show-on-mouse-over-in-javascript

标签

javascript

html

css

slideshow