如何在HTML中连续获得多个滚动图像

This is my whole code HTML and CSS

这是我的全部HTML和CSS代码

This is css for the scrolling images.

这是用于滚动图像的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>

This is HTML code

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

One can send me the link if it is possible by javascript or Jquery

如果可能的话，可以通过javascript或Jquery向我发送链接

you can view the this link for quick view...

你可以查看这个链接以快速查看……

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

1 个解决方案

#1

This might be a library which you're probably looking for

这可能是一个你可能正在寻找的库

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

This library requires jQuery and seems comfortable to use. Hope this helps you.

这个库需要jQuery，看起来使用起来很舒服。希望这能帮助你。

#1