Я нашел скрипт поворота изображений jquery, и добавление гиперссылок к изображениям нарушает анимацию
Вопрос
Нашел эту замечательную статью об использовании jquery для обмена изображениями:
http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html
Как вы предлагаете мне сделать гиперссылки на изображения?
Решение 3
Решил это:
function swapImages() {
var $active = $('#myGallery a:has(img) > img.active');
var $next = ($('#myGallery a:has(img.active)').next().find('img').length > 0) ? $('#myGallery a:has(img.active)').next().find('img') : $('#myGallery a:has(img):first > img');
$active.fadeOut(function() {
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
Другие советы
Узнайте, как работает jquery, и исправьте это!Или используйте плагин, такой как cycle plugin - это все еще требует некоторых знаний jquery.
Непроверенный, но это должно сработать...
function swapImages(tag){
var element = tag||'img';
var $active = $('#myGallery '+tag+'.active');
var $next = ($('#myGallery '+tag+'.active').next().length > 0) ? $('#myGallery '+tag+'.active').next() : $('#myGallery '+tag+':first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
setInterval(function(){swapImages('a');}, 5000);
// or the original usage with no links on the images
setInterval(swapImages, 5000);
Просто имейте в виду все, что вы предоставляете в качестве tag
получит класс active
так что используйте css как необходимый.
В любом случае, это действительно просто - я бы также посоветовал выполнить несколько руководств или прочитать документацию по jQuery.Вы должны быть в состоянии разобрать этот скрипт по мере его чтения - он довольно прост :-)