如何在不使用字幕标记的情况下滚动图像？ Javascript，jQuery或CSS等等

Question

 <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>

I wanted to scroll these images without using html's marquee tag...please help me.I have used css keyframes but I didn't get what I wanted. 我想滚动这些图像而不使用html的字幕标记...请帮助我。我使用过css关键帧，但没有得到我想要的。 These images are in index page bottom side. 这些图像在索引页面的底部。 This is clients logos scrolling from left to right or right to left....thanks in advance. 这是客户徽标从左向右滚动或从右向左滚动。

Answer 1

/*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
                });

Answer 2

Please try this: 请尝试以下方法：

<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/ http://jsfiddle.net/jonathansampson/XxUXD/

如何在不使用字幕标记的情况下滚动图像？ Javascript，jQuery或CSS等等

问题描述

2 个解决方案

解决方案1
1 2016-12-02 08:26:25

解决方案2
-1 2016-01-21 10:41:26

如何在不使用字幕标记的情况下滚动图像？ Javascript，jQuery或CSS等等

问题描述

2 个解决方案

解决方案1 1 2016-12-02 08:26:25

解决方案2 -1 2016-01-21 10:41:26

解决方案1
1 2016-12-02 08:26:25

解决方案2
-1 2016-01-21 10:41:26