我由腳本使用CSS3在屏幕上的圖像上滑動（輸入和輸出）。我無法找到一種方法，使CSS開始一個新的動畫時，最後一個完成，CSS動畫不允許更改背景圖片（我試過）。所以我不得不使用一點javascript來切換className，所以圖像會改變。然而，這不是最好的解決方案，因爲它有機會不同步。除此之外，它打破了純CSS3動畫的目的。滑動橫幅90％HTML + CSS3 10％JS

問：有沒有一種方法，我可以減少的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% | 
*------------------------------------------*

來源

2012-05-06 Ozzy

只是一條線:)'如果（非營利組織== NTOT）非營利組織= 0;'變化：'非營利組織非營利組織=％NTOT; 1'，順便說一句，如果你已經使用'=='總是使用'==='來比較。 –

@ RokoC.Buljan我也只是想過太大聲笑。但試圖在上面的行（npos ++） – Ozzy

現在是-1行：;）'setInterval（function（）{ main.className = cArr [npos = npos ++％ntot]; }，8000）;' –

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

來源

2012-05-06 18:51:13

滑動橫幅90％HTML + CSS3 10％JS

統計

回答

相關問題