Marquee ile resimleri döngü halinde kaydırma

181019

Decapat
Katılım
18 Ekim 2019
Mesajlar
107
HTML ve CSS kullanarak marquee ile kayan resimler yaptım.
Ben bu resimlerin sınırsız döngüde dönmesini istiyorum (mesela baştaki resim en sondakinin arkasına gelsin ve döngü öyle devam etsin) ve marquee başlayınca ekran dışından sola doğru geliyor, ben bunu ekranın en solundan başlatmak istiyorum. Nasıl yapabilirim?


Kod:
HTML:
<div class="marquee">
        <marquee>

          <img src="1.jpg">
          <img src="2.jpg">
          <img src="3.jpg">
          <img src="4.jpg">
          <img src="5.jpg">
          <img src="6.jpg">
          <img src="7.jpg">
          <img src="8.jpg">
          <img src="9.jpg">
          <img src="10.jpg">
          <img src="11.jpg">
          <img src="12.jpg">
          <img src="13.jpg">
          <img src="14.jpg">
          <img src="15.jpg">
          <img src="16.jpg">
      
            </marquee>
        </div>
<style>
    .marquee {
   background-color: black;
   position: absolute;
   top: 8%;
   left: 0%;
   width: 100%;
   height: 42%;
}
.marquee img {
    padding-right: 0.2%;
    width: 14%;
    height: 100%;
}
</style>
 
Son düzenleyen: Moderatör:
Bunu zamanında ben de yapmak istemiştim. CSS animasyonlarıyla çözüm bulunabiliyor ama en basiti JQuery kullanmak. Bunun için JQuery'de Marquee plugini var. Nasıl yapıldığının kodlarını sizinle paylaşayım:

JavaScript:
//Marquee Plugin
$('.marquee').marquee({
    allowCss3Support: true,
    duration: 17000,
    gap: 0,
    delayBeforeStart: 50,
    direction: 'left',
    duplicated: true,
    startVisible: true,
});
$(".marquee").hover(function(){
    $(".marquee").marquee("pause");
}, function(){
    $(".marquee").marquee("resume");
});
 

Bu konuyu görüntüleyen kullanıcılar

Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…