如何在 HTML 中连续获取多个滚动图像答案

【问题标题】：How to get multiple scrolling images in HTML continuously如何在 HTML 中连续获取多个滚动图像
【发布时间】：2015-08-14 10:59:17
【问题描述】：

这是我的全部代码 HTML 和 CSS

这是滚动图像的 css。

 <style>
     * {margin: 0; padding: 0;}

     body {
        background-color: #666;
     }

    #container {
        width:70%;
        overflow: hidden;
        margin: 50px auto;
        background: white;
    }

    /*header*/
    header {
        width: 800px;
        margin: 40px auto;
    }

    header h1 {
        text-align: center;
        font: 100 60px/1.5 Helvetica, Verdana, sans-serif;

    }

    header p {
        font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
        text-align: justify;
    }

    /*photobanner*/

    .photobanner {
        height: 233px;
        width: 3550px;
        margin-bottom: -45px;
    }

    /*keyframe animations*/
    .first {
        -webkit-animation: bannermove 30s linear infinite;
           -moz-animation: bannermove 30s linear infinite;
            -ms-animation: bannermove 30s linear infinite;
             -o-animation: bannermove 30s linear infinite;
                animation: bannermove 30s linear infinite;
    }

    @keyframes "bannermove" {
     0% {
        margin-left: 0px;
     }
     100% {
        margin-left: -2125px;
     }

    }

    @-moz-keyframes bannermove {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }

    }

    @-webkit-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }

    }

    @-ms-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }

    }

    @-o-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }

    }



    .photobanner img {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .photobanner img:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        cursor: pointer;

        -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    }
    </style>
   </head>

这是 HTML 代码

    <body>
      <div id="container">
       <a href="http://www.somelink.com">
        <div class="photobanner">
           <img class="first" src="images/Arjun_singh.jpg" alt="" />
           <img src="images/dinesh.jpg" alt="" />
           <img src="images/dr.neha.jpg" alt="" />
           <img src="images/dr.pooja.jpg" alt="" />
           <img src="images/dr.preeti.jpg" alt="" />
           <img src="images/dr.rajesh.jpg" alt="" />
           <img src="images/Arjun_singh.jpg" alt="" />
           <img src="images/dinesh.jpg" alt="" />
           <img src="images/dr.neha.jpg" alt="" />
           <img src="images/dr.pooja.jpg" alt="" />
           <img src="images/dr.preeti.jpg" alt="" />
           <img src="images/dr.rajesh.jpg" alt="" />
           <img src="images/dr.preeti.jpg" alt="" />
           <img src="images/dr.rajesh.jpg" alt="" />
           <img src="images/dr.preeti.jpg" alt="" />
           <img src="images/dr.preeti.jpg" alt="" />
           <img src="images/dr.rajesh.jpg" alt="" />
           <img src="images/dr.preeti.jpg" alt="" />
           <img src="images/dr.rajesh.jpg" alt="" />
         </div>
         </a>
       </div>
      </body>

如果可以，可以通过 javascript 或 Jquery 将链接发送给我

您可以查看此链接以快速查看...

http://designshack.net/tutorialexamples/photobanner/index.html

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

这可能是您可能正在寻找的库

http://logicbox.net/jquery/simplyscroll/

这个库需要jQuery 并且看起来很舒服。希望对您有所帮助。

【讨论】：

@AbhishekShandilya 很高兴它对您有帮助。请将其标记为“答案”，以便遇到此线程的其他人知道它已完成。 :)