滑动横幅 90% HTML+CSS3 10% JS

Sliding banner 90% HTML+CSS3 10% JS

本文关键字：HTML+CSS3 JS      更新时间：2023-09-26

我制作了一个脚本，使用 CSS3 在屏幕上滑动图像（进出）。我找不到一种方法可以让 CSS 在最后一个动画完成后开始一个新动画，并且 CSS 动画不允许更改背景图像（我试过了）。所以我不得不使用一个小的javascript来切换className，这样图像就会改变。但是，这不是最好的解决方案，因为它有机会不同步。除此之外，它违背了拥有纯CSS3动画的目的。

问：有没有办法减少javascript（不混淆代码）或完全不使用javascript？

源

/  
/index.html  
/scripts/slider.css  
/scripts/slider.js  
/img/layout/banner1.png  
/img/layout/banner2.png  
/img/layout/banner3.png

滑块.css

.main {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    height: 100%; /* if there is no content you need this to show something */
    background-repeat: no-repeat;
    background-position: center 50%;
    animation-name: slideInOut;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    -moz-animation-name: slideInOut;
    -moz-animation-duration: 8s;
    -moz-animation-delay: 0s;
    -moz-animation-timing-function: ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -webkit-animation-name: slideInOut;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -o-animation-name: slideInOut;
    -o-animation-duration: 8s;
    -o-animation-delay: 0s;
    -o-animation-timing-function: ease-out;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
}
.main.m1 {
    background-image: url("../img/layout/banner1.png");
}
.main.m2 {
    background-image: url("../img/layout/banner2.png");
}
.main.m3 {
    background-image: url("../img/layout/banner3.png");
}
@keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-moz-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-webkit-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-o-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}

滑块.js

function startSlider() {
    var main = document.getElementById("main");
    var cArr = ["main m1","main m2","main m3"];
    var ntot = cArr.length;
    var npos = 0;
    setInterval(function() {
        main.className = cArr[npos++];
        if (npos == ntot) npos = 0;
    }, 8000);
}

索引.html

<link rel="StyleSheet" href="scripts/slider.css"/>
<script type="text/javascript" src="scripts/slider.js"/>
<body onload="startSlider();">
<div id="main" class="main m3"></div>

统计

*------------------------------------------*
|            | Chars (no spaces) | % total |
|------------|-------------------|---------|
| javascript |               210 |   9.95% |
| html+css3  |          165+1735 |  90.05% |
*------------------------------------------*
| total      |              2110 | 100.00% |
*------------------------------------------*

setInterval(function() {
    main.className = cArr[npos=++npos%ntot];         
}, 8000);
相关文章：