What is the best way to continuously swap out images inside a div every second, except when the mouse hovers over

I recently posted a question on Stack Overflow about displaying an image in a div when a specific link is hovered over, and thanks to the help of user adeneo, I was able to find a solution (jsFiddle):

HTML Markup:

<div id="imgs">
    <img src="http://www.flash-slideshow-maker.com/images/help_clip_image020.jpg" alt="image 1">
    <img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" alt="image 2">
    <img src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg" alt="image 3">
</div>

<ul id="my-ul">
    <li><a href="#" class="img1">hover to see image1</a></li>
    <li><a href="#" class="img2">hover to see image2</a></li>
    <li><a href="#" class="img3">hover to see image3</a></li>
</ul>​

JavaScript Solution:

$('#my-ul a').on('mouseenter mouseleave', function(e) {
    $('#imgs img').eq($(this).parent('li').index()).toggle(e.type==='mouseenter');
});

I am now looking for guidance on how to modify http://jsfiddle.net/ScAVW/1/ so that the images within the div change every second as follows: 1->2->3->1->2->3->1... continuously, unless one of the three links is hovered over. When a link is hovered over, the corresponding image should be displayed and the image rotation should pause. Once the mouse leaves the link, the images should resume changing within the div.

Answer №1

Check out this handy image rotation script. It will pause when you hover over a link, showing the corresponding image; and it will start again when you move your mouse away.

var intervalId = setInterval(rotate, 1000); // rotate every 1s

function rotate() {
  var $imgs = $("#imgs img"),
      $visible = $imgs.filter(":visible").hide().index();
  $imgs.eq(($visible + 1) % $imgs.length).show();  
}

$('#my-ul a').on('mouseenter mouseleave', function(e) {
  var $imgs = $('#imgs img');
  if (e.type === 'mouseenter') {
    clearInterval(intervalId); // stop, hammer time
    $imgs.filter(":visible").hide();
    $imgs.eq($(this).parent('li').index()).show();
  } else {
    intervalId = setInterval(rotate, 1000);
  }
});

VIEW DEMO HERE.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing unique fonts on a website

I've noticed that some websites use unique fonts. One font in particular caught my eye - it's called MuseoSlab500Regular. How can I incorporate this font into my styles? Do I need to download the font from a specific source to ensure it display ...

Creating a large and spacious modal in Angular using ngx-bootstrap

I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...

Always selecting the initial element's ID. How can we reset the event and retrieve the correct element?

While creating a bootstrap accordion, I encountered an issue with changing icons when showing and hiding the elements. I have a function that almost works, but it always takes the ID of the first element instead of the actual ID when clicked on. Is there ...

Tips for testing views in ember.js using unit tests

We are currently delving into the world of Ember.js. Our development process is completely test-driven, and we aim to apply the same methodology to Ember.js. Having prior experience in test-driven development with Backbone.js apps using Jasmine or Mocha/Ch ...

Assurance of retrieving information

I am looking to extract specific information from the following website . I have implemented Promises in order to retrieve data about planets, then films associated with a particular planet object. My next goal is to access data within the species array ne ...

How can you achieve a smooth transition effect using a combination of jquery, php sessions, and automatically refreshing the page

I am in search of a smooth transition effect for a dynamic user layout system that I have developed. My layout is dependent on a session having either the value 1 or 2, and then I call the layout using a switch statement. switch ($_SESSION['layout&a ...

What is the best way to show a background color on a heading?

I am new to website design and I have successfully created a slideshow. However, I am facing an issue with applying a background color to the heading so that it stands out over the image. Despite setting the background color in the CSS, it is not displayin ...

eliminate the gap in the MUI Accordion when it is expanded

How can I prevent the Accordion MUI component from moving and applying top and bottom margins to summary elements in expanded mode? I added the following code to the summary element but it doesn't seem to be working. Any suggestions on how to fix this ...

The functionality of redirecting to the homepage after registration is not working as intended due to the issue of the uiD not being properly set in the session

I have created a registration form to register users and once the registration is complete, it should redirect to index.html (home page). There seems to be an issue where upon pressing the submit button, the page refreshes and the form resets without redi ...

Position multiple divs at the bottom of aligned divs

I'm currently facing issues with aligning divs at the bottom within multiple vertically aligned divs. <p>Top of page</p> <div id="container"> <div class="message">area1</div> <div class="message">area2</ ...

Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth. My idea involves adding an extension to the vi ...

Uploading Files with Vuetify 2 v-file-input and AxiosIn this tutorial, we

After researching extensively on the topic, I reviewed questions such as file-upload-in-vuetify and vuetify-file-uploads, but unfortunately, the solutions provided did not work for me. My current challenge involves utilizing Vuetify 2's <v-file-in ...

Transform a jQuery element into an HTML element

I'm facing a dilemma where I have a jQuery element that needs to be passed into a function that only works with HTML elements. How can I efficiently convert the jQuery element into an HTML element? ...

Setting the display property to none continues to impact the positioning of elements

Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To a ...

What are the reasons behind the lack of smooth functionality in the Bootstrap 4 slider?

My customized bootstrap4 slider is functional, but lacks smoothness when clicking on the "next" and "prev" buttons. The slider transitions suddenly instead of smoothly. Any suggestions on how to fix this? Here is the code for the slider: $('.carous ...

Styling your sidebar with CSS and Bootstrap to accommodate dynamic content with varying heights

How can I adjust the height of my sidebar block to match the height of the sidebar main block and the content block? Check out this example image I created: https://i.sstatic.net/qFIxe.png I'm currently using Bootstrap 4 and have experimented with ...

Showing image URL data fetched in JSON format using AJAX library JQuery

I am using Ajax to retrieve data from the database in JSON format. I am able to retrieve various data fields successfully, but I am facing an issue with displaying an image. Although I can see the image URL in the JSON response, the image is not being disp ...

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

Unlocking the JSON array of data in JavaScript: A step-by-step guide

Hey there, I need help extracting an array from a JSON data structure. Here's an example of my JSON object: { Data1 : { Data2 : "hello", Data3 : "hi" }, Data4 : { Data5 : "this is Karan", } } I'm looking ...

Using Django to populate one dropdown select option based on the selection made in another

In my own unique environment, I have attempted to implement the concept detailed above, albeit with scattered documentation. Unfortunately, I am facing challenges in getting it to function correctly. The current state of affairs is such that the web page o ...