我想制作一个幻灯片,其中包含我之前已经使用过数百次的代码,但由于某些原因它现在还没有用。我无法弄清楚我做错了什么。 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是一个正在进行的工作示例。任何想法? :|
答案 0 :(得分:3)
slideSwitch()
。这在控制台中显示。另请注意,幻灯片代码无法正常运行,因此我添加了.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 );
});