Question

这是我的整个代码HTML和CSS

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

Answer 1

这可能是您可能正在寻找的图书馆

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

此库需要jQuery，并且使用起来很舒服。希望这会对你有所帮助。

如何连续获取HTML中的多个滚动图像

1 个答案: