Slideshow

Howcan I make this slideshow stop when hovering over a certain image?

Code:

<style type="text/css">#rotator1708494624450 {height:100px;} #rotator1708494624450 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1708494624450 img { height:90px;width:728px; }</style> 
   <div id="rotator1708494624450">
        <a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f28/11/40/02/06/33171015.png" /></a> <a target="_blank" title="Fgsuport" href="https://fgsuport.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Fgsuport" src="https://i.servimg.com/u/f96/18/89/87/02/fgsupo10.jpg" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f82/18/13/58/62/clickt10.png" /></a><a target="_blank" title="Private Sector" href="https://private-sector.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Private Sector" src="https://i.servimg.com/u/f60/20/51/79/32/topban10.png" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/adforu10.jpg" /></a><a target="_blank" title="Admin Junkies " href="https://admin-junkies.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Admin Junkies" src="https://i.servimg.com/u/f96/18/89/87/02/adminj10.png" /></a>  <a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/afbnr10.jpg" /></a> 
   </div><script type="text/javascript">(function(){var r = document.getElementById("rotator1708494624450"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1708494624450"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1708494624450";n.style.zIndex = 999})},3500)})();</script>
 

Good modning!

Add an event for the mouse enter the slider area and the mouse leaving the slider area

Code:

<style type="text/css">#rotator1708494624450 {height:100px;} #rotator1708494624450 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1708494624450 img { height:90px;width:728px; }</style>
  <div id="rotator1708494624450">
        <a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f28/11/40/02/06/33171015.png" /></a> <a target="_blank" title="Fgsuport" href="https://fgsuport.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Fgsuport" src="https://i.servimg.com/u/f96/18/89/87/02/fgsupo10.jpg" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f82/18/13/58/62/clickt10.png" /></a><a target="_blank" title="Private Sector" href="https://private-sector.forumotion.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Private Sector" src="https://i.servimg.com/u/f60/20/51/79/32/topban10.png" /></a><a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/adforu10.jpg" /></a><a target="_blank" title="Admin Junkies " href="https://admin-junkies.com/" style="z-index:999" id="itemActif1708494624450"><img alt="Admin Junkies" src="https://i.servimg.com/u/f96/18/89/87/02/adminj10.png" /></a>  <a target="_blank" title="AForum Advertise Here " href="https://www.aforums.org/f8-advertising-banner" style="z-index:999" id="itemActif1708494624450"><img alt="AForum Advertise Here " src="https://i.servimg.com/u/f96/18/89/87/02/afbnr10.jpg" /></a>
  </div><script type="text/javascript">
      (function() {
    var r = document.getElementById("rotator1708494624450"),
        l = r.getElementsByTagName("A"),
        rotate;

    function startRotation() {
        rotate = window.setInterval(function() {
            var a = document.getElementById("itemActif1708494624450"),
                n = jQuery(a).next()[0] || l[0];

            if (!a) return window.clearInterval(rotate);

            n.style.opacity = 1;
            n.style.zIndex = 998;

            jQuery(a).animate({"opacity":0},800,"linear",function() {
                a.id = "";
                a.style.zIndex = "";
                n.id = "itemActif1708494624450";
                n.style.zIndex = 999;
            });
        }, 3500);
    }

    function stopRotation() {
        window.clearInterval(rotate);
    }

    r.addEventListener("mouseenter", stopRotation);
    r.addEventListener("mouseleave", startRotation);

    startRotation();
})();

      </script>

Your code works, just one thing I notice every time I go to another part of the forum, the slideshow seems to freeze and it does not load the slideshow right away, it kinda kicks in but it shows all images at once. After it works perfectly if I stay on the page without refreshing the page or changing.


I had this piece of code, but I wasn't sure if it would work or where to even place it.

Code:

$('rotator1708494624450').mouseenter(function () {
    hovering = true;
}).mouseleave(function () {
    hovering = false;
    slideShow();
});

I notice every time I go to another part of the forum, the slideshow seems to freeze and it does not load the slideshow right away

A timer is used to change images. In your case, the image should change after 3500 ms ===>

Code: n.style.zIndex = 999;});}, 3500);

.
JS has a concept of execution queue since JS is single-threaded. Most likely you have bulk code on another page that needs a lot of resources to execute. Its processing takes more than 3500ms and the timer is slowing down. The timer waits for 3500ms to pass and then waits for the bulk code to finish executing. When the bulk code is executed, it is the timer's turn and executed incorrectly first time.

Perhaps there is still a piece of code that you didn't send.

Code:

$('rotator1708494624450').mouseenter(function () {
    hovering = true;
}).mouseleave(function () {
    hovering = false;
    slideShow();
});

This code simply changes the value of the

Code: hovering

variable when the mouse hovers over an element and moves the mouse away from the element.
In the second case - the code containing the

Code: slideShow

function is run.

Good afternoon!

It's been more week now. We have not heard back from the author.
I'm closing the topic and moving it to the archive.

If your problem is not solved - send me a private message and I will open this topic for further help.

Problem solved & topic archived. Please read our forum rules: ESF General Rules