如何在不使用选框标签的情况下滚动图像?Javascript，jquery或css任何东西

How to scroll images without using marquee tag? Javascript,jquery or css anything

本文关键字：Javascript 图像 jquery 任何东 css 滚动 情况下 标签      更新时间：2023-09-26
 <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关键帧，但我没有得到我想要的。这些图像位于索引页底部。这是从左到右或从右到左滚动的客户徽标。提前谢谢。

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

请尝试以下操作：

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

相关文章：