2013-02-21 4 views
0

Я хочу сделать слайд-шоу с кодом, который я использовал сто раз раньше, но по какой-то причине он не работает сейчас. Я не могу понять, что я делаю неправильно. HTMLПочему слайдшоу показывает код неправильный?

<div id="project1" class="project curent"> 
<img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-lion-male_436_600x450.jpg" class="active" /> 
<img src="http://www.howdoeslooklike.com/wp-content/uploads/2012/10/Lion-013-2048x2048.jpg" /> 
<img src="http://us.123rf.com/400wm/400/400/aleksm/aleksm1209/aleksm120900002/15398724-winged-lion-front-view-drawing.jpg" /> 
</div> 

CSS

.project{position:absolute; top:0; left:0; width:100%;} 
.project img{position:absolute; top:0; left:0; width:200px; height:auto;z-index:8;} 
.project img.active{z-index:10;} 
.project img.last-active{z-index:9;} 

JQuery

function slideSwitch() { 
    var $active = $(".project img.active"); 
    $active.hide(); 
    if ($active.length == 0) $active = $('.project IMG:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('.project IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 



$(function() { 
    setInterval("slideSwitch()", 1000); 
}); 

И here это работа в примере выполнения. Любые идеи? : |

+1

Любые ошибки JavaScript в консоли? –

+0

Да. Функция slideSwitch не была правильно вызвана в setInterval. Как видно из приведенного ниже ответа. –

ответ

3

slideSwitch() не был правильно назван в setInterval. Это было показано на консоли. Также обратите внимание, что ваш код слайд-шоу работает неправильно, поэтому я добавил .show(), чтобы снова появилось изображение .last-active.

JQuery:

function slideswitch() { 
    var $active = $("#project1 img.active"); 
    $active.hide(); 
    if ($active.length == 0) $active = $('#project1 IMG:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('#project1 IMG:first'); 

    $active.addClass('last-active').show(); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
}; 
$(document).ready(function() { 
    setInterval(slideswitch, 1000); 
}); 

Fiddle: http://jsfiddle.net/sdGhT/8/

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