1

jQueryスライダーを作成しようとしていますが、divを使用しています:

<div id="block-1">
        <div id="bannerleft">
            <div class="wsite-header-1"></div>
        </div>
        <div id="bannerright">
            <h2><span class='wsite-text'>CALL US NOW!</span></h2>
            <p><span class='wsite-text'>Call now and get&nbsp;professional service delivered to you by our team of professional plumbers and technicians.<br/><br/>24/7 Emergency Service available</span></p>
            <div style="text-align:left;"><div style="height: 0px; overflow: hidden;"></div>
<a class="wsite-button wsite-button-large wsite-button-highlight" href="contact-us" >
<span class="wsite-button-inner">CALL NOW 1</span>
</a>
<div style="height: 0px; overflow: hidden;"></div></div>
        </div>
        </div>

<div id="block-2" style="display:none;">
        <div id="bannerleft">
            <div class="wsite-header2"></div>
        </div>
        <div id="bannerright">
            <h2><span class='wsite-text'>CALL US NOW! 2</span></h2>
            <p><span class='wsite-text'>Call now and get&nbsp;professional service delivered to you by our team of professional plumbers and technicians.<br/><br/>24/7 Emergency Service available</span></p>
            <div style="text-align:left;"><div style="height: 0px; overflow: hidden;"></div>
<a class="wsite-button wsite-button-large wsite-button-highlight" href="contact-us" >
<span class="wsite-button-inner">CALL NOW 2</span>
</a>
<div style="height: 0px; overflow: hidden;"></div></div>
        </div>
        </div>

そして、ここにjQueryの部分があります

$(document).ready(function() {

     function animate(){
         $('#block-1').toggle().delay(3000);    
         $('#block-2').toggle().delay(3000); 
         $('#block-3').toggle().delay(3000);         
     } animate();  
     setInterval(animate, 10000);  

});

悲しいことに、それはうまくいきません。すぐにブロック 2 に移動し、ブロック 1 を表示すると、その下にブロック 3 も表示されます。このコードを修正する方法はありますか?

4

3 に答える 3

1

ここで、要素をうまくフェードするデモを作成しました。すべてのメイン DIV にクラス.fadeを追加し、CSSposition:absolute;を追加して適切にオーバーレイするようにしました。

jsBin デモ

これにより、ホバー時にスライドを一時停止することもできます!

var S = 0,             // START 'SLIDE'
    $el = $(".fade"),  // FADE ELEMENTS
    Tim;               // TIMEOUT VAR

function anim(){
  $el.eq(S=++S%$el.length).fadeTo(500,1).siblings($el).stop(1).fadeTo(500,0);
}

function autoAnim(){
    Tim = setTimeout(function(){
      anim();
      autoAnim();
    },4000);
}
autoAnim();

$el.on('mouseenter mouseleave',function(e){
   var m = e.type==='mouseenter' ? clearTimeout( Tim ) : autoAnim();    
}).eq(S).show().siblings($el).hide();

HTML:

<div id="block-1" class="fade"></div>
<div id="block-2" class="fade"></div>
<div id="block-3" class="fade"></div>

CSS:

.fade{
  position:absolute;
}

私のプラグインからコードを借りたところです。興味があるので見てみてください。 または、上記について質問がある場合は、お気軽にお問い合わせください。

于 2012-10-22T23:41:08.867 に答える
1

それらを次々に表示したい場合は、次のようにチェーンできます。

function animate(){
     $('#block-1').toggle(3000, function() {
            $('#block-2').toggle(3000, function() {
                $('#block-3').toggle(3000);
            });
     });     
 } animate();  
 setInterval(animate, 10000);

実際のデモを見る

于 2012-10-22T23:27:59.637 に答える
-1

まあまあ、私は何年も前から持っていた動作中の Mootools コードを使用するだけです

于 2012-10-23T00:04:04.293 に答える