爲內容而不是圖像創建水平滾動條

Question

我想知道如何使用CSS定位和浮動來實現內容滑塊效果。

例如，我不想菜單鏈接到頁面，我想禁用鏈接行爲，而是使頁面內容顯示爲水平滑動（左側或右側），以使舊內容的效果離開屏幕和新的內容出現在屏幕上？

這個效果如何實現？

在這樣的一個頁面上顯示內容有沒有SEO的優點或缺點，因爲反對鏈接到大量的網頁？

感謝， 裏克

編輯：這個問題已經被修改，以顯得不那麼具體的問題，因此更多地使用到整個社會。

Answer 1

首先，你應該把你的<h2>外.sliders類的。

您可以添加以下樣式的div：

<div class='container'> 

    <div class='sliders'> 
     <div class='panel' id='home_slider'></div> 
     <div class='panel' id='portfolio_slider'></div> 
     <div class='panel' id='contact_slider'></div> 
    </div> 

</div> 

那麼你的風格是：

.container{ 
    width:960px; 
    overflow:hidden; 
    position:relative; 
} 

.sliders{ 
    float:left; 
    width:10000px; 
    position:relative; 
    left:0; top:0; 
} 

.panel{ 
    float:left; 
    width:auto; /*You can define a width for this if required*/ 
    margin:20px; 
} 

你必須改變上述值，以滿足您的要求，但它的要點在於'.container'類充當一個層，在其下面有'.sliders'類，其中包含所有'.panels'div。通過在'container'上設置'overflow：none'，無論'.sliders'div有多大，可見的'.sliders'寬度仍然與'.containers'的可見區域相同。 '.sliders'div的寬度將根據您內部div的數量而擴展（如果將寬度設置爲auto），那麼您只需使用一些JQuery來爲'.sliders'類的左側位置設置動畫。

希望這會有所幫助。

Answer 2

嘗試使用的jCarousel插件滑動的div

http://sorgalla.com/projects/jcarousel

Answer 3

獲取jQuery。獲取scrollTo。讀。學習。實行。

scrollTo演示：http://demos.flesler.com/jquery/scrollTo/

相當不錯的活生生的例子：http://www.charliegentle.co.uk/

希望你自己看着辦吧。如果您遇到困難，請將您的代碼添加到http://jsfiddle.net/，我會查看是否可以找到您要出錯的地方。