如何獲得多個滾動圖像在HTML不斷

這是滾動的圖像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

來源

2015-06-01 Abhishek Shandilya