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");
});
 
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

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

Technopat Haberler

Yeni konular

Geri
Yukarı