在幻灯片图像上淡入淡出
我正在尝试让滑块图像彼此淡入，而不是淡出到背景，然后加载下一个图像。
该滑块可在http://bit.ly/Vbfq2W上看到
这就是我的东西
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1">
<a href="#fragment-1"><span>Cloud<br />Services</span></a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><span>IT & Network<br />Support</span></a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><span>Security</span></a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><span>Service 4</span></a>
</li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> </div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
</div>回答 3
Stack Overflow用户
发布于 2013-02-20 00:46:17
你可以很容易地使用像FlexSlider这样的东西来创建你的滑块。每张幻灯片都会一张一张地放在另一张幻灯片上，这样当你更换幻灯片时，它们之间就会有一个“交叉淡出”。
以下是您可以尝试的代码示例：
<!-- Place somewhere in the <body> of your page -->
<div class="flex-controls"></div>
<div class="flexslider">
<ul class="slides">
<li>
<img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" />
</li>
<li>
<img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" />
</li>
<li>
<img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" />
</li>
<li>
<img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" />
</li>
</ul>
</div>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider(
pauseOnAction: false,
pauseOnHover: true,
slideshowSpeed: 5000,
controlsContainer: '.flex-controls' //you could also use custom controls
);
});
</script>Stack Overflow用户
发布于 2013-02-25 22:48:35
a)使用绝对定位和z索引将不同的幻灯片放在彼此的顶部，或者
b)将图像放入一个包装器中，该包装器在每次将要显示下一个图像时将当前图像的src作为背景图像。隐藏图像将没有视觉上的区别，加载新图像，一旦准备好，就淡入。
这基本上是所有滑块的工作方式，例如jquery cycle、flexslider、nivoslider等。
Stack Overflow用户
发布于 2013-02-26 01:25:25
为这个做了一个插件。一个非常简单的基本滑块。“最后”列表项使用fadeOut动画，动画之后，使用prependTo()将该项重新定位到“第一个”位置。
代码的核心：
cycle : function(slide) {
var parent = $(slide).parent();
$(slide).prependTo(parent)
$(slide).css({
display : 'block'
});
},
fadeToNext : function(obj, options) {
$(obj).children().last().delay(options.delay).fadeOut(options.transitionTime, function() {
methods.cycle(this);
methods.fadeToNext(obj, options);
});
}我把它放在小提琴上，这样你就可以玩它了，看看它能做什么。http://jsfiddle.net/djwave28/mwPSB/18/
我还添加了一些设置注释，您可以更改这些注释，使其可见动画期间列表实际发生的情况。
https://stackoverflow.com/questions/14817358
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号