Измените затухающее изображение, нажав на ссылку jQuery

Я создал изображение, исчезающее слайд-шоу, читающее this article. код выглядит следующим образом:Измените затухающее изображение, нажав на ссылку jQuery

$(document).ready(function() { 
    $('#iPhoneExample img:gt(0)').hide(); 
    setInterval(function() { 
     $('#iPhoneExample :first-child').fadeOut(1000) 
     .next('img').fadeIn(1000) 
     .end().appendTo('#iPhoneExample'); 
    }, 3000); 
});

и это HTML и CSS:

<div id="iPhoneExample"> 
<img src="photo1.png" alt="" /> 
<img src="photo2.png" alt="" /> 
<img src="photo3.png" alt="" /> 
<img src="photo4.png" alt="" /> 
<img src="photo5.png" alt="" /> 
<img src="photo6.png" alt="" /> 
</div> 

#iPhoneExample { 
    width:305px; 
    height:597px; 
    background:url('immagini/iphoneBg.png') center no-repeat; 
    position:relative; 
    margin:0px 20px 0px 94px; 
} 
#iPhoneExample img { 
    position:absolute; 
    top:106px; 
    right:22px; 
    bottom:104px; 
    left:25px; 
}

Теперь я хочу, чтобы это сделать. Когда страница загружается, начинается слайд-шоу, но у меня есть 6 ссылок, по одному для каждого изображения, которое я хочу использовать для отображения соответствующего изображения ... Например, слайд-шоу начинается и показывает фото 3, но если я нажму ссылку на фото 5, слайд-шоу должно показать фото5, а затем продолжить фото6 и т. д.

Я считаю, что я должен использовать функцию .click, но я не знаю, что писать внутри нее. Я новичок в jQuery.

Большое вам спасибо за помощь!

источник

2012-06-28 matteodv

Вы можете сделать одну вещь, использовать clearInterval всякий раз, когда фотография щелкнул, замените старую фотографию на новой фотографии, получить его текущее положение (это ли он третий или четвёртый образ, к примеру), и применять setInterval для следующей фотографии, чтобы заменить эту фотографию. Таким образом, если пользователь не нажимает на фотографию, setInterval будет продолжаться, а если пользователь нажмет на фотографию, он переопределит себя и продолжит ... – SexyBeast

Да, я думаю, что это именно то, что я ищу, но вы можете показать мне какой-то код, потому что я редко использую jQuery, и я не могу так много сделать ... Спасибо! – matteodv

Хорошо сделаю. Я отправлю его в ответ. – SexyBeast

<html> 
<head> 
<style> 
div { width: 850px; height: 350px; background: green; } 
</style> 
<script type = "text/javascript" src = "jquery.js"></script> 
<script type = "text/javascript" /> 
$(function() { 
arr = ['photo1.jpg','photo2.jpg','photo3.jpg','photo4.jpg','photo5.jpg','photo6.jpg']; 
$("#iPhoneExample").append("<img src = '"+arr[0]+"' />"); 
timer = setInterval(function() { 
var curnum = parseInt(($("#iPhoneExample").find("img").attr("src").match(/\d/g))[0]); 
var nextnum = curnum > 5 ? 0 : curnum; 
$("#iPhoneExample img").replaceWith("<img src = '"+arr[nextnum]+"' />"); 
},3000); 
$("a").click(function(e) { 
    if ($("a").filter(function() { return $(this).hasClass("clicked"); }).length) 
    { 
     clearInterval(newtimer); 
    } 
    else { 
     $("a:first").addClass('clicked'); 
     }  
    e.preventDefault(); 
    var curnum = parseInt(($(this).attr("href").match(/\d/g))[0]); 
    nextnum = curnum-1; 
    clearInterval(timer); 
    $("#iPhoneExample").html("<img src = '"+arr[curnum-1]+"' />"); 
    newtimer = setInterval(function() { 
    nextnum = nextnum + 1 > 5 ? 0 : nextnum + 1; 
    $("#iPhoneExample").html("<img src = '"+arr[nextnum]+"' />"); 
    },3000); 
    }); 

}); 
</script> 
</head> 
<body> 
<div id = "iPhoneExample"></div> 
<a href = "www.photo1.html">Photo1</a> 
<a href = "www.photo2.html">Photo2</a> 
<a href = "www.photo3.html">Photo3</a> 
<a href = "www.photo4.html">Photo4</a> 
<a href = "www.photo5.html">Photo5</a> 
<a href = "www.photo6.html">Photo6</a> 
</body> 
</html>

источник

2012-06-28 20:16:22 SexyBeast

Измените затухающее изображение, нажав на ссылку jQuery

ответ

Смежные вопросы