为什么幻灯片代码不是't正确
Why slideshow code isn't correct?
我想用我以前用过一百次的代码做一个幻灯片,但由于某种原因,现在不起作用了。我不明白我做错了什么。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 );
});
这是一个正在进行的工作示例。有什么想法吗?:|
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 );
});
Fiddle:http://jsfiddle.net/sdGhT/8/
相关文章:
- React重新渲染但未显示正确的组件
- 幻灯片滚动javascript不起作用
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 我的jQuery插件参数没有正确启动,遇到了问题
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Amazon S3 REST API大小不正确
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- Javascript Reg Exp不正确匹配
- Javascript计数器变量未显示正确的值
- MeteorJS:在带有回调的vzaar api上正确使用wrapAsync
- 创建具有可变长度幻灯片显示的幻灯片
- 他们是否有任何带有幻灯片的响应式灯箱,可以正确滑动
- 引导程序 3 轮播上的计数器未显示正确数量的幻灯片
- 如何使这个JQuery滑块正确地呈现幻灯片
- 不能正确地委托幻灯片放映
- 幻灯片没有正确渲染
- 向这个javascript幻灯片组添加链接的正确方法是什么
- 为什么幻灯片代码不是't正确
- 幻灯片.js jQuery插件在Chrome或Safari中无法正确加载,但在Firefox中很好
- jQuery:幻灯片动画走得很远,然后“跳”到正确的高度