我想用我以前使用过数百次的代码制作幻灯片,但由于某种原因它现在不起作用。我不知道我做错了什么。 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是一个进行中的例子。有什么想法吗? :|
最佳答案
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/
关于javascript - 为什么幻灯片代码不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15002916/