Jak dostać wiele obrazów przewijania w HTML stale

To jest mój cały kod HTML i CSSJak dostać wiele obrazów przewijania w HTML stale

Jest css do automatycznego wyświetlania obrazów.

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

Jest to kod 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>

Można wysłać mi link, jeśli jest to możliwe poprzez javascript lub Jquery

można zobaczyć ten link do szybkiego podglądu ...

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

Źródło

2015-06-01 Abhishek Shandilya

Może to być biblioteka, która pewnie szuka

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

Biblioteka ta wymaga jQuery i wydaje się wygodny w użyciu. Mam nadzieję, że to ci pomoże.

Źródło

2015-06-01 05:12:09

Dzięki pracy .. –

@AhhishekShandilya Cieszę się, że jest to pomocne dla Ciebie. Proszę oznaczyć ją jako "odpowiedź", aby inne osoby, które natknęły się na ten wątek, wiedziały, że to zrobione. :) –

Jak dostać wiele obrazów przewijania w HTML stale

Odpowiedz

Powiązane problemy