CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
ani_css
ani_css

Reputation: 2126

Change image src with image list

I want to make image lists array or html list and whenever I hover on my image it must change one by one with fade or slide effect and whevever I hoverout my image must change with default images

question 1: whant kind of list that I have to create? html list or array ?

question 2: I create span to get image url with data-src for example is that markup and right ?

click to see demo link on codepen

HTML

<div class="img-area">
 <img src="http://cdn.anitur.com.tr/resimler/logo/2016-11/otel_granada-luxury-belek_9cca25crBlK2lNq0AS5H.jpg" alt="">
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_UIaJYkbajuilxPCGYzxM.jpg">
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_UIaJYkbajuilxPCGYzxM.jpg">
 </div>

   <div class="img-area">
 <img src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_qtNSeosTlMq2dDG35zvY.jpg" alt="">
     <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_OnYNchpgK6PJmucaHMHN.jpg">

and my js but I didn't know what I write

$(document).ready(function(){
 $(".img-area img").hover(function(){
   $(this).parents(".img-area").find("img");
 })
});

Upvotes: 0

Views: 314

Answers (1)

jafarbtech
jafarbtech

Reputation: 7015

Change images in interval using 

function changeImage(img){
    // document.getElementById('bigImage').src=img;
    setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}

Upvotes: 2

Related Questions