如何在不使用選取框標記的情況下滾動圖像？ Javascript，jquery或css任何東西

<marquee> 
     <div class="client"> 
      <img src="images/c1.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c2.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c3.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c4.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c5.png"/> 
     </div 
     ><div class="client"> 
      <img src="images/c6.png"/> 
     </div 
     ><div class="client"> 
      <img src="images/c7.png"/> 
     </div> 

     </marquee>

我想滾動這些圖像，而不使用html的選框標記...請幫助我。我用過css關鍵幀，但我沒有得到我想要的。這些圖像位於索引頁底部。這是客戶徽標滾動從左到右或從右到左....在此先感謝。如何在不使用選取框標記的情況下滾動圖像？ Javascript，jquery或css任何東西

來源

2016-01-21 Pavan Kumar

顯示你如何使用'keyframes'？ –

這傢伙是你要找的夥伴http://jquery.malsup.com/cycle/ –

查http://log.vieron.net/articles/pure-css-infinite-scrolling-image-marquee/ – ketan

-1

請試試這個：

<style type="text/css"> 
/* Make it a marquee */ 
.marquee { 
    width: 450px; 
    margin: 0 auto; 
    overflow: hidden; 
    white-space: nowrap; 
    box-sizing: border-box; 
    animation: marquee 50s linear infinite; 
} 

.marquee:hover { 
    animation-play-state: paused 
} 

/* Make it move */ 
@keyframes marquee { 
    0% { text-indent: 27.5em } 
    100% { text-indent: -105em } 
} 

/* Make it pretty */ 
.microsoft { 
    padding-left: 1.5em; 
    position: relative; 
    font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif; 
} 

/* ::before was :before before ::before was ::before - kthx */ 
.microsoft:before, .microsoft::before { 
    z-index: 2; 
    content: ''; 
    position: absolute; 
    top: -1em; left: -1em; 
    width: .5em; height: .5em; 
    box-shadow: 1.0em 1.25em 0 #F65314, 
       1.6em 1.25em 0 #7CBB00, 
       1.0em 1.85em 0 #00A1F1, 
       1.6em 1.85em 0 #FFBB00; 
} 

.microsoft:after, .microsoft::after { 
    z-index: 1; 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 2em; height: 2em; 
    background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0)); 
} 

/* Style the links */ 
.vanity { 
    color: #333; 
    text-align: center; 
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif; 
} 

.vanity a, .microsoft a { 
    color: #1570A6; 
    transition: color .5s; 
    text-decoration: none; 
} 

.vanity a:hover, .microsoft a:hover { 
    color: #F65314; 
} 

/* Style toggle button */ 
.toggle { 
    display: block; 
    margin: 2em auto; 
} 

</style> 
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg" /></p> 
<button class="toggle">Toggle Beautification</button> 
<script type="application/javascript"> 
$(".toggle").on("click", function() { 
    $(".marquee").toggleClass("microsoft"); 
}); 
</script>

http://jsfiddle.net/jonathansampson/XxUXD/

來源

2016-01-21 10:41:26

/*download .js file from here and include it in ur project */ 
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js 


<head> 
     <script src="assets/js/crawler.js" type="text/javascript" ></script> 
</head> 

/* add id to ur div tag */ 
<div id="marquee"> 
     <div class="client"> 
      <img src="images/c1.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c2.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c3.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c4.png"/> 
     </div> 
     <div class="client"> 
      <img src="images/c5.png"/> 
     </div 
     ><div class="client"> 
      <img src="images/c6.png"/> 
     </div 
     ><div class="client"> 
      <img src="images/c7.png"/> 
     </div> 
</div> 

/* Add this script in ur project in head tag*/ 
marqueeInit({ 
        uniqueid: 'marquee', 
        style: { 

        }, 
        inc: 5, //speed - pixel increment for each iteration of this marquee's movement 
        mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) 
        moveatleast: 2, 
        neutral: 150, 
        savedirection: true, 
        random: true 
       });

來源

2016-12-02 08:26:25 Bilal

嘗試上面的解決方案，我也在我的網站上實現了它。 – Bilal

這裏是鏈接 – Bilal

http://codepen.io/anon/pen/aBERgr – Bilal

如何在不使用選取框標記的情況下滾動圖像？ Javascript，jquery或css任何東西

回答

相關問題