jQuery - 無限期滾動並循環div內的一個圖像

我想在div內創建一個可自動滾動的圖像。像，我有一個600px寬，1200px高的圖片，我想在600pxx200px的div內顯示它，並使其無限滾動和循環。我嘗試過的jQuery插件都是爲了滾動多個li項目而設計的，我已經很難適應它以滿足我的需求。所以我試圖把圖像切成多塊，但看起來很可怕。任何指針？jQuery - 無限期滾動並循環div內的一個圖像

<style type="text/css"> 
    #autoscroll { 
    max-height: 100px; 
    overflow: hidden; 
    } 
</style> 
... 
<div id="autoscroll"> 
    <img src="someimage.jpg"> 
</div>

來源

2011-11-02 sostacked

設置一個容器，將overflow設置爲hidden並顯示要顯示的尺寸。然後添加你的形象，因爲這容器的孩子和動畫自己的立場：

HTML

<div id="container"> 
    <img src="src_of/img.jpg" width="600" height="1200" /> 
</div>

CSS

#container { 
    position : relative; 
    width : 600px; 
    height : 200px; 
    overflow : hidden; 
} 

#container > img { 
    position : absolute; 
    top  : 0; 
    left  : 0; 
}

$(function() { 
    var $image = $('#container').children('img'); 
    function animate_img() { 
     if ($image.css('top') == '0px') { 
      $image.animate({top: '-1000px'}, 2500, function() { 
       animate_img(); 
      }); 
     } else { 
      $image.animate({top: '0px'}, 2500, function() { 
       animate_img(); 
      }); 
     } 
    } 
    animate_img(); 
});

注意，我動畫的top圖像的高度負的圖像減去容器的高度（（conta iner.height（） - image.height（））* -1）。

這裏是上述解決方案的的jsfiddle：http://jsfiddle.net/J9BM8/1/

來源

2011-11-02 17:30:42 Jasper

感謝您的快速回復。我如何讓它始終朝着同一個方向循環？所以它不會倒退到頂端，而是在它到達最後時從頭開始循環呢？ – sostacked

瞭解它...添加了$ image.css（'top'，'0px'）;在animate_img（）之前;在第一個完整的功能。再次感謝！ – sostacked

不客氣。請記住，您還可以以「三個」維度對圖像進行動畫處理。我做了一些與上述代碼非常接近的代碼，它以二維方式滾動，當它碰到特定的點時，它會改變圖像的高度/寬度以模擬放大。 – Jasper

設置圖像作爲背景重複像

#autoscroll { 
    background-image: url('someimage.jpg'); 
    background-repeat: repeat-y; 
}

和動畫的背景位置。

來源

2011-11-02 17:25:52 Mathletics

您可以嘗試將圖像設置爲div的背景（而不是使用img標記並將圖像放入div內），然後使用jQuery通過background-position css屬性爲圖像的背景座標創建動畫。

我沒有任何代碼，但這不應該很難實現，它應該工作。

來源

2011-11-02 17:26:18

對於可訪問性，它可能在語義上和語法上都不正確。這取決於它的內容。 – mddw

的更新@碧玉的答案。

滾動時間可調整爲圖像高度&也是頂部滾動。頂部和滾動時間是動態 http://jsfiddle.net/J9BM8/476/

HTML

<div id="container"> 
<img src="https://d98b8t1nnulk5.cloudfront.net/production/images/layout/devices/default/ios_iPhone-5S_7.0_portrait.jpg?1445944951" width="320" />

$(function() { 
var $image = $('#container').children('img'); 
function animate_img() { 
    if ($image.css('top') == '0px') { 
     $image.animate({top: -($image.height()-468)+"px"}, $image.height()*5, function() { 
      animate_img(); 
     }); 
    } else { 
     $image.animate({top: '0px'}, $image.height()*5, function() { 
      animate_img(); 
     }); 
    } 
} 
animate_img();

}）;

來源

2015-10-28 04:06:08 PrashantC

jQuery - 無限期滾動並循環div內的一個圖像

回答

相關問題