如何在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滑塊上顯示第一張幻燈片

回答

相關問題