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

如果您希望它们一个接一个地显示，您可以像这样链接它们：

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

在这里，我创建了一个可以很好地淡化你的元素的演示。只需.fade为所有主要 DIV 添加一个类，并添加一个 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

好吧，我将只使用我拥有多年的工作 Mootools 代码

于 2012-10-23T00:04:04.293 回答