如何在水平滾動頁面上創建平滑跳轉部分？

我正在爲我的攝影業務構建我的投資組合網站。我已經建立了該網站，以便組合滾動水平。如何在水平滾動頁面上創建平滑跳轉部分？

這是我到目前爲止。 http://www.dscottclarkphoto.com/portfolio/adventure/adventure.html

我希望能夠包含箭頭，當點擊時將瀏覽器跳到下一張照片。

我試着用什麼在此證明： jQuery: jump to next <section>

我保存的JavaScript到它自己的文件命名jump.js.

<script src="../jquery.js"></script> 
<script type="text/javascript" src="../jump.js"></script> 
</head> 

<div id="images"> 
<ul> 
    <li><section id="1"><img src="../space.jpg" /></section></li> 
    <li><section id="2"><img src="adventure/adv-01.jpg" /></section></li> 
    <li><section id="3"><img src="adventure/adv-02.jpg" /></section></li> 
    <li><section id="4"><img src="adventure/adv-03.jpg" /></section></li> 
    <li><section id="5"><img src="adventure/adv-04.jpg" /></section></li> 
    </ul>

我也試過保存這個樣本，它的行爲也不正確。

</div>

有沒有關於如何使這項工作或更好的方法的建議？

來源

2012-12-05 user1880392

我試過下面的代碼。它的工作原理就是你想要的。

$(function(){ 
    var currentImage = 1; 
    var imagesCount = $('#images li').length - 1; 
    var spacerWidth = $('#images li:eq(1)').offset().left; 
    $('#scroll').click(function(){ 
     currentImage++; 
     if (currentImage == imagesCount) currentImage = 1; 
     var left = $('#images li').eq(currentImage).offset().left; 
     $(window).scrollLeft(left - spacerWidth); 
    }); 
});

當您滾動只是改變$('#scroll')其選擇添加相應的按鈕。現在它附加到「滾動這種方式」文本。

並且請注意，您不需要添加任何額外的標記，如<section>或其他。

來源

2012-12-05 21:29:29 pxx

在您發佈的鏈接中，如果您正在使用水平滾動，您應該將其更改爲$(myEl).offset().left，並使用垂直滾動（$(myEl).offset().top）。沒有嘗試過，但它應該是。此外，與問題無關，但它可能有助於改善頁面外觀，您可能希望將圖像保存爲*.png interlaced，以便它們不會像目前所做的那樣滑落。

來源

2012-12-05 21:32:10 Maroshii

謝謝。這些圖像意味着什麼？ – user1880392

他們逐字地從上到下顯示出來，這是因爲他們被保存的方式。您可能希望將它們重新保存爲'* .png interlaced'或'* .jpg progressive'因爲它們已經在您的瀏覽器上緩存，所以您不會看到它......這樣可以很少改善外觀和用戶體驗沒有工作。 – Maroshii

如何在水平滾動頁面上創建平滑跳轉部分？

回答

相關問題