如何在jQuery div滑块上显示第一张幻灯片

我正在制作一张幻灯片，每张幻灯片上的链接都会触发滑动动作。但我无法弄清楚如何让第一张幻灯片出现在加载页面上，所以为了使它工作，我不得不使第一张幻灯片可见，其他隐藏，这不是一个真正的修复，只是让我可以继续工作，所以我需要去改变它如何在jQuery div滑块上显示第一张幻灯片

这里是小提琴

http://jsfiddle.net/Paula/XmeGN/10/

另外，我可以把它滑到左边，而不是权利。

谢谢大家的帮助！

HTML

<div id="banner_container" style="min-height:160px; clear:both;"> 

    <div id="banner_wrapper"> 
    <div class="banner_panel2" id="target1"> 
        <a href="#target1" class="banner_panel">Target 1</a><br/> 
        <a href="#target2" class="banner_panel">Target 2</a><br/> 
        <a href="#target3" class="banner_panel">Target 3</a><br/>       
        Target 1 
    </div> 
    <div class="banner_panel" id="target2"> 
        <a href="#target1" class="banner_panel">Target 1</a><br/> 
        <a href="#target2" class="banner_panel">Target 2</a><br/> 
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 2 
    </div> 
    <div class="banner_panel" id="target3"> 
        <a href="#target1" class="banner_panel">Target 1</a><br/> 
        <a href="#target2" class="banner_panel">Target 2</a><br/> 
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 3 
    </div> 
</div> 
</div>

的javascript：

jQuery(function($) { 

    $('a.banner_panel').click(function() { 
        var $target = $($(this).attr('href')), 
            $other = $target.siblings('.active'); 

        if (!$target.hasClass('active')) { 
            $other.each(function(index, self) { 
                var $this = $(this); 
                $this.removeClass('active').animate({ 
                    left: $this.width() 
                }, 500); 
            }); 

            $target.addClass('active').show().css({ 
                left: -($target.width()) 
            }).animate({ 
                left: 0 
            }, 500); 
        } 
    }); 

});

CSS：

* { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 


#banner_container { 
    width:880px; 
    position:relative; 
    background-color:#E6E6E6; 
    margin:30px; 
    background-image: linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247)     82%); 
    background-image: -o-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%); 
    background-image: -moz-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%); 
    background-image: -webkit-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%); 
    background-image: -ms-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%); 

    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.22, rgb(207,207,207)), 
    color-stop(0.82, rgb(247,247,247)) 
); 
    border:1px #CCC solid; 
    border-radius:10px; 
    -moz-border-radius:10px; 
    padding:20px 10px 10px 10px; 
    overflow:hidden; 
    } 
     

#banner_wrapper{ 
    width:890px; 
    position:relative; 
    z-index:5; 
    } 

div.banner_panel { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    display:none; 
} 
div.banner_panel2 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
}

来源

2012-09-02 Paula

你能解释为什么这不是一个真正的修复？另外，你的小提琴中的代码非常混乱。它总是值得将其剥离到最低限度，以便我们可以看到核心功能 - 我们不关心花哨的CSS - 这使得它更难以阅读！ – jaypeagi

这里是尽可能清洁的代码http://jsfiddle.net/Paula/XmeGN/12/ 它不工作，因为它是，如果您单击任何幻灯片以外的第一个，幻灯片将显示盈方第一张幻灯片，但第一张幻灯片永远不会消失。我不知道它是否有任何意义，但如果你玩的代码，你会明白我的意思:) – Paula

加入到主动目标1，我还将展示如何删除是Panel2

 <div id="banner_wrapper"> 
    <div class="active banner_panel" id="target1"> 
        <a href="#target1" class="active banner_panel">Target 1</a><br/> 
        <a href="#target2" class="banner_panel">Target 2</a><br/> 
        <a href="#target3" class="banner_panel">Target 3</a><br/>       
        Target 1 
    </div> 
    <div class="banner_panel" id="target2"> 
        <a href="#target1" class="banner_panel">Target 1</a><br/> 
        <a href="#target2" class="banner_panel">Target 2</a><br/> 
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 2 
    </div> 
    <div class="banner_panel" id="target3"> 
        <a href="#target1" class="banner_panel">Target 1</a><br/> 
        <a href="#target2" class="banner_panel">Target 2</a><br/> 
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 3 
    </div> 
</div>

的javascript：

jQuery(function($) { 

    $('a.banner_panel').click(function() { 
        var $target = $($(this).attr('href')), 
            $other = $target.siblings('.active'); 

        if (!$target.hasClass('active')) { 
            $other.each(function(index, self) { 
                var $this = $(this); 
                $this.removeClass('active').animate({ 
                    left: $this.width() 
                }, 500); 
            }); 

            $target.addClass('active').show().css({ 
                left: -($target.width()) 
            }).animate({ 
                left: 0 
            }, 500); 
        } 
    }); 

}); 

$('div.banner_panel.active').show();

小提琴：http://jsfiddle.net/XmeGN/18/

来源

2012-09-02 22:37:06

真棒！非常感谢你，完全有效，只有当我在第一张幻灯片中使用banner.panel时，它不会显示任何幻灯片，但在第一张幻灯片中使用带有banner.panel2的代码完美无缺！现在，有没有办法改变js，让它向左滑动而不是向右滑动？ – Paula

http://jsfiddle.net/XmeGN/16/不工作？什么浏览器？ –

尝试http://jsfiddle.net/XmeGN/18/我加'''' –

保，

在HTML，改变class="banner_panel2"到class="banner_panel"和删除CSS指令为banner_panel2。
（可选）从div.banner_panel {...}删除CSS指令display:none;。
在点击处理程序定义之后添加$("div.banner_panel").eq(0).find('a.banner_panel').eq(0).trigger('click'); 。调整一个或两个eq(0)表达式以选择您选择的任何其他面板作为初始面板。

此外，在点击处理程序的顶部添加e.preventDefault();。当单击指向当前活动面板的链接时，这会抑制不良效果。

的Javascript现在应该是这样的：

$('a.banner_panel').on('click', function(e) { 
    e.preventDefault(); 
    var $target = $($(this).attr('href')), 
     $other = $target.siblings('.active'); 

    if (!$target.hasClass('active')) { 
     $other.removeClass('active').each(function(index, self) { 
      var $this = $(this); 
      $this.animate({ 
       left: $this.width() 
      }, 500); 
     }); 
     $target.addClass('active').show().css({ 
      left: -($target.width()) 
     }).animate({ 
      left: 0 
     }, 500); 
    } 
}); 
$("div.banner_panel").eq(0).find('a.banner_panel').eq(0).trigger('click');

DEMO

用户将（可能）看到飞行中的效果在页面加载，但也许这不是坏事。

这样做可以确保面板的初始状态与用户为自己点击时的状态相同。如果将来您更改点击处理程序来做一些稍微不同的事情，那么您就不必担心检查HTML/CSS是否兼容。提供一切工作正常用户点击，然后初始状态也将罚款。

来源

2012-09-02 22:46:36

如何在jQuery div滑块上显示第一张幻灯片

回答

相关问题