Wie mehrere Scroll-Bilder in HTML kontinuierlich

Das ist meine ganze HTML-Code und CSSWie mehrere Scroll-Bilder in HTML kontinuierlich

Dies ist CSS für die verschobene Bilder zu bekommen.

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

Dies ist HTML-Code

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

Man kann mir den Link schicken, wenn es von Javascript oder Jquery

Sie diesen Link für betrachten Schnellansicht möglich ist ...

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

Quelle

2015-06-01 Abhishek Shandilya

Dies könnte eine Bibliothek sein, die Sie wahrscheinlich für

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

Diese Bibliothek suchen erfordert jQuery und scheint komfortabel zu bedienen. Hoffe das hilft dir.

Quelle

2015-06-01 05:12:09

Dank seiner Arbeit .. –

@AbhishekShandilya Froh, dass es Ihnen hilfreich ist. Bitte markieren Sie es als "Antwort", damit andere Leute, die diesen Thread gefunden haben, wissen, dass es erledigt ist. :) –

Wie mehrere Scroll-Bilder in HTML kontinuierlich

Antwort

Verwandte Themen