淡入和淡出滑块图像

Question

I am trying to have the slider images fade into one another as opposed to fading to the background, and then loading the next image. 我正在尝试使滑块图像彼此淡化，而不是淡入背景，然后加载下一个图像。

The slider can be seen at http://bit.ly/Vbfq2W 滑块位于http://bit.ly/Vbfq2W

This is what I have 这就是我所拥有的

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

Answer 1

You can easily use something like FlexSlider to create your slider. 您可以轻松地使用FlexSlider之类的东西来创建滑块。 Every slides will be positionned one over the other so that when you change slide, there will be a "cross fade" between them. 每张幻灯片都将一个放在另一个上，这样当你更换幻灯片时，它们之间就会出现“交叉淡入淡出”。

Here's a code example of what you could try : 这是您可以尝试的代码示例：

<!-- 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>

Answer 2

a) put the different slides on top of each other using absolute positioning and z-indexes, or a）使用绝对定位和z索引将不同的幻灯片放在彼此的顶部，或者
b) put the images in one wrapper, which gets the current image's src as a background-image each time it is about to show the next image. b）将图像放在一个包装器中，每当它要显示下一个图像时，它将当前图像的src作为背景图像。 hiding the image will then have no visual difference, load the new image and as soon as its ready, fade it in 隐藏图像将没有视觉差异，加载新图像，一旦准备就绪，淡入其中

thats basically how all sliders work, for example jquery cycle, flexslider, nivoslider, etc. 这基本上是所有滑块的工作方式，例如jquery cycle，flexslider，nivoslider等。

Answer 3

Made a plugin for this. 为此做了一个插件。 A very straight forward basic slider. 非常简单的基本滑块。 The "last" list item is animated with fadeOut and after the animation the item is re-positioned into the "first" position with prependTo() 使用fadeOut对“最后”列表项进行动画处理，并在动画之后使用prependTo（）将项重新定位到“第一个”位置

The heart of the code: 代码的核心：

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);
            });

        }

I put it on fiddle, so you can play around with it and see what it does. 我把它放在小提琴上，所以你可以玩它，看看它做了什么。 http://jsfiddle.net/djwave28/mwPSB/18/ http://jsfiddle.net/djwave28/mwPSB/18/

I also added some comments of settings that you can change that make it visible of what actually occurs with the list during animation. 我还添加了一些设置注释，您可以更改这些设置，以使其可见动画期间列表实际发生的情况。

淡入和淡出滑块图像

问题描述

3 个解决方案

解决方案1
4 2013-02-19 16:46:16

解决方案2
2 2013-02-25 14:48:35

解决方案3
1 2013-02-25 17:25:24

淡入和淡出滑块图像

问题描述

3 个解决方案

解决方案1 4 2013-02-19 16:46:16

解决方案2 2 2013-02-25 14:48:35

解决方案3 1 2013-02-25 17:25:24

解决方案1
4 2013-02-19 16:46:16

解决方案2
2 2013-02-25 14:48:35

解决方案3
1 2013-02-25 17:25:24