如何在HTML中连续获得多个滚动图像

How to get multiple scrolling images in HTML continuously

本文关键字：滚动图像连续 HTML 更新时间：2023-09-26

这是我的全部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

这可能是你正在寻找的库

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

这个库需要jQuery，看起来使用起来很舒服。