Cum să obțineți mai multe imagini derulante în HTML în mod continuu (Programare, Javascript, Jquery, Html, Css, Imagine)

Abhishek Shandilya a intrebat.
a intrebat.

Acesta este întregul meu cod HTML și CSS

Acesta este css pentru imaginile de defilare.

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

Acesta este codul 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>

Cineva îmi poate trimite linkul dacă este posibil prin javascript sau Jquery

puteți vizualiza acest link pentru o vizualizare rapidă…

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

1 răspunsuri
TaoPR

Aceasta ar putea fi o bibliotecă pe care probabil o căutați

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

Această bibliotecă necesită jQuery și pare confortabil de utilizat.Sper că vă ajută.

Comentarii

  • @AbhishekShandilya Mă bucur că vă este de ajutor. Vă rugăm să marcați-l ca „răspuns”, astfel încât alte persoane care au dat peste acest fir să știe că este făcut. 🙂 –  > Por TaoPR.