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

时间：2012-05-06 17:41:19

标签： javascript html5 animation css3

我制作了一个脚本，使用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

slider.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%; }
}

slider.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);
}

的index.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% |
*------------------------------------------*

1 个答案:

答案 0 :(得分：1)

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