Question

我正在尝试创建一个jQuery滑块，但是使用div＆＃39; s：

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

});

可悲的是，它不起作用。它立即转到block-2，当它显示block-1时，它还会显示block-3。有什么方法可以修复这段代码吗？

Answer 1

如果你想要一个接一个地展示它们，你可以像这样链接它们：

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

见工作demo

Answer 2

在这里，我创建了一个可以很好地淡化元素的演示。刚刚为所有主要DIV添加了一个类.fade，并为一个CSS position:absolute;添加了一个，以使它们正确地叠加在一起。

jsBin demo

这个也允许你在悬停时暂停幻灯片！

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

刚刚从我的插件中借用了代码，我很感兴趣你可以take a look 或者如果您对上述问题有疑问，请随时提出

Answer 3

好吧，我将使用我多年来使用的Mootools代码

用jquery循环遍历div

3 个答案:

jsBin demo