在滑块图像上淡入淡出答案

【问题标题】：Fade in and Out on Slider Image在滑块图像上淡入淡出
【发布时间】：2013-02-11 17:21:03
【问题描述】：

我正在尝试让滑块图像彼此淡入，而不是淡入背景，然后加载下一张图像。

这就是我所拥有的

$("#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 &amp; 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>

【问题讨论】：

在我的脑海中，您可以尝试在淡出上一张图像之前淡入下一张图像，并在每次淡出时修改 z-index 以确保图像淡入在顶部。
感谢您的回复，但我需要能够拥有标签功能以及滑动横幅。我希望用户能够单击每个单独的选项卡（位于滑块的右侧，如上面的链接所示）以导航到特定的幻灯片。

标签： javascript jquery slider fading

【解决方案1】：

您可以轻松地使用 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>

【讨论】：

【解决方案2】：

a) 使用绝对定位和 z-index 将不同的幻灯片放在一起，或者
b) 将图像放在一个包装器中，每次将要显示下一个图像时，它都会将当前图像的 src 作为背景图像。隐藏图像将没有视觉差异，加载新图像并在准备好后立即淡入

这基本上就是所有滑块的工作原理，例如 jquery cycle、flexslider、nivoslider 等。

【讨论】：

【解决方案3】：

为此做了一个插件。一个非常直接的基本滑块。 “最后一个”列表项使用 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/

我还添加了一些您可以更改的设置，以显示动画期间列表实际发生的情况。

【讨论】：