Question

我有一个css滚动幻灯片的代码，在Naren Murali的帮助下，我能够根据仅使用6的演示修改我的14个图像。但是，唯一的问题是我不知道如何修改关键帧动画，使第1张和最后一张图像相同，从而导致从节目结束到下一次迭代的无缝过渡。

如果有人能向我解释如何实现这一目标，我将非常感激。

谢谢。

    html {
        background-color: white;
        }
    body {
        width: 1300px;
    	margin: 0 auto 0;
        }
    #container {
    	width: 500px;
    	overflow: hidden;
    	margin: 50px auto;
    	background: white;
    }
    .photobanner {
        height: 270px;
        width: 6748px;
        margin-bottom: 80px;
        font-size:0px;
    }
    img{
      margin-right:2px;
    }
    .flex-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-top: 30px;
        }
    .first {
    	-webkit-animation: bannermove 60s linear infinite;
    	   -moz-animation: bannermove 60s linear infinite;
    	    -ms-animation: bannermove 60s linear infinite;
    	     -o-animation: bannermove 60s linear infinite;
    	        animation: bannermove 60s linear infinite;
    }
    @keyframes "bannermove" {
     0% {
        margin-left: 0px;
     }
     100% {
        margin-left: -6268px;
     }
    }
    @-moz-keyframes bannermove {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    @-webkit-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    @-ms-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    @-o-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    img{
      margin-right:2px;
    }

    <header>
    </header>
    <section class="flex-container">
        <div id="container">
         <!-- Each image is 480px by 270px -->
        <div class="photobanner">
        	<img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
    </div>
        </div>
     </section>

Answer 1

我回到演示并想出来了。我在14个完整周期之后重复了前4个图像。我使.container宽1000px，宽广.popobanner 8640px宽（480px（图像宽度）x 18）。然后我将边距设置为负值，以将图像线移动得足够远，使得第一个图像的第二次迭代占据初始点。因为在演示中这个数字是-2125并且每个图像的宽度为350px，并且2125/350 = 6这是离散图像的数量，我将我的14个离散图像乘以480 = 6720.这几乎对齐但需要调整。左边距为-6745，运行得相当顺利。

<!DOCTYPE HTML>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    }
.flex-container_1 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 1200px;
    justify-content: center;
    margin: 0 auto 0;
    }
.container {
    width: 1000px;
    overflow: hidden;
    margin: 50px auto;
    background: white;
    }
.photobanner {
    display: flex;
    flex-wrap: nowrap;
    height: 270px;
    width: 8640px;
    margin-bottom: 20px;
    font-size:0px;
}
img{
  margin-right:2px;
}
.first {
    -webkit-animation: bannermove 60s linear infinite;
       -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
         -o-animation: bannermove 60s linear infinite;
            animation: bannermove 60s linear infinite;
}
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -6745px;
 }
}
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
img{
  margin-right:2px;
}
</style>
</head>
<section class="flex-container_1">
    <div class="container">
     <!-- Each image is 480px by 270px -->
     <div class="photobanner">
            <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
<img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
    </div>
        <p>film stills from "wall cuts, train stations, New York City" &#40;2016&#41;</p>
    </div>
      </section>
</html>

使用css滚动幻灯片横幅中的图像无缝循环

1 个答案: