2016-03-12 2 views
0

Я пытаюсь просто реализовать простое автоматическое слайд-шоу с JQuery на моей веб-странице. Я следовал этому руководству: https://www.youtube.com/watch?v=r5iPoJZjXnU. Но, похоже, что мои функции fadeOut() и fadeIn() работают неправильно. Код работает, но переходы между изображениями слишком быстрые и негладкие.JQuery автоматический слайд-шоу

Вот что я сделал:

добавил эти строки в моих тегах головы для Jquery загрузки и JQuery UI librairies:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

затем, в конце моих тегов тела я просто добавил:

<script type="text/javascript"> 
function galerie(){ 
     var active = $("#slideshow .active"); 
     var next = (active.next().length > 0) ? active.next() : $("#slideshow img:first"); 
     active.fadeOut(function(){ 
      active.removeClass("active"); 
     }); 
     next.fadeIn("slow").addClass("active"); 
    } 
</script> 

и вызывать эту функцию всякий раз, когда я нажимаю на моей h1 тег:

<h1 onClick="galerie()">Pure</h1> 

Есть ли у вас предложения?

+0

Edit: это определенно IMG тег, который FADEOUT и FadeIn не очень хорошо, потому что, когда я просто попробовать: $ (». Активный„) Затухание (“. медленный"); он исчезает без перехода –

ответ

0

Проблема soleved, это была моя HTML структура, которая не была права

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