슬라이더에서 페이드 인/아웃 이미지

슬라이더 이미지가 배경으로 희미 해지지 않고 서로 번갈아 가며 다음 이미지를로드하려고하는 중입니다. 슬라이더에서 페이드 인/아웃 이미지

슬라이더

이 내가 당신의 슬라이더를 만들 쉽게 FlexSlider 같은 것을 사용할 수 있습니다

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

출처

2013-02-11 Eratosthenes

내 머리 꼭대기에서 이전 이미지를 페이드 아웃하기 전에 다음 이미지를 페이드 인하 고 각 페이드에서 z- 인덱스를 수정하여 이미지가 페이드 인하도록 할 수 있습니다. – MildWolfie

답장을 보내 주셔서 감사합니다.하지만 슬라이딩 배너와 함께 탭 기능을 사용할 수 있어야합니다. 사용자가 특정 슬라이드로 이동하기 위해 각 개별 탭 (위의 링크에 표시된대로 슬라이더의 오른쪽을 따라 위치)을 클릭 할 수있게하려고합니다. – Eratosthenes

이 무엇 http://bit.ly/Vbfq2W

에서 볼 수 있습니다. 모든 슬라이드는 다른 슬라이드 위에 배치되므로 슬라이드를 변경하면 슬라이드간에 "크로스 페이드"가 생깁니다.

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

출처

2013-02-19 16:46:16

는) 절대 위치 및 z - 인덱스, 또는
B를 사용하여 서로의 상단에있는 다른 슬라이드를 넣어) 하나의 이미지를 넣어 : 여기

당신이 시도 할 수 있는지의 코드 예제 래퍼 (wrapper)는 다음 이미지를 보여 주려 할 때마다 현재 이미지의 src를 배경 이미지로 가져옵니다. 이미지를 숨기고 모든 슬라이더 등 예를 들어, JQuery와주기, flexslider, nivoslider을 위해 작동 기본적으로 어떻게

그게 전부에 퇴색하고, 시각적 차이가없는 그 준비되는 즉시 새 이미지를로드합니다

출처

2013-02-25 14:48:35 Alex

이것을위한 플러그인을 만들었습니다. 매우 직선적 인 기본 슬라이더.

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

     }

내가 입력 : "마지막"리스트 아이템은 페이드와 상기 항목 prependTo()

코드의 중심에 "첫 번째"위치로 위치에 존재 재 애니메이션 후 애니메이션 그것은 바이올린에서, 그래서 당신은 그것을 가지고 놀 수 있고 그것이 무엇을하는지 볼 수 있습니다. http://jsfiddle.net/djwave28/mwPSB/18/

또한 애니메이션 중에 목록에서 실제로 표시되는 설정을 변경할 수있는 설정에 대한 설명을 추가했습니다.

출처

2013-02-25 17:25:24 Daniel

슬라이더에서 페이드 인/아웃 이미지

답변

관련 문제