Бесконечная прокрутка сайта banner help [html/css]

Я работаю над бесконечным баннером прокрутки для страницы, но у меня возникают проблемы с его выходом.Бесконечная прокрутка сайта banner help [html/css]

мой HTML код следующим образом: `е

<div class="header"> 
     <img class="first" src="image-1.jpg" alt="" /> 
     <img src="image2.jpg" alt="" /> 
     <img src="image3.jpg" alt="" /> 
     <img src="image4.jpg" alt="" /> 
     <img src="image5.jpg" alt="" /> 
     <img src="image6.jpg" alt="" /> 
     <img src="image1.jpg" alt="" /> 
     <img src="image2.jpg" alt="" /> 
     <img src="image3.jpg" alt="" /> 
     <img src="image4.jpg" alt="" /> 

    </div> 
</div>

и мой CSS код заключается в следующем:

`* {margin: 0; padding: 0;} 

body { 
     background: url('background.jpg'); 
} 

#container { 
    width: 1000px; 
    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: 80px; 
} 


/*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; 
} 

}

, когда я запускаю файл HTML я вижу баннер прокрутки, но я также вижу другие фотографии, которых нет в то время в баннере.

я должен получать только 3 фотографии движущихся в одно время и все другие фотографии скрыты, но они показывают, как well..please помочь ..

источник

2014-12-08 user2962635

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Photo banner</title> 
     <style> 
     * {margin: 0; padding: 0;} 

     body { 
      background-color: #FF0000; 
     } 

     #container { 
      width: 1000px; 
      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: 80px; 
     } 

     /*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 { 
      height: 233px; 
      width: 3550px; 
      margin-bottom: 80px; 
     } 

     .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> 
    <body> 
     <div id="container"> 
      <header> 
       <h1>Animated Photo Banner</h1> 
       <p>Lorem ipsum dolor...</p> 
      </header> 

      <!-- Each image is 350px by 233px --> 
      <div class="photobanner"> 
       <img class="first" src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-5.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-6.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt=""> 
       <img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt=""> 
      </div> 
     </div> 
    </body> 
</div>

источник

2014-12-08 21:39:42

спасибо much..you лучший .. – user2962635

сценарий вы поставили на самом деле работу, но поскольку изображения не были загружены, вам пришлось подождать установленное время, прежде чем они сбросят и начнут заново. –

Бесконечная прокрутка сайта banner help [html/css]

ответ

Смежные вопросы