CSS3 を使用して、画面上で画像を (内外に) スライドさせるスクリプトを作成しました。最後のアニメーションが終了したときに CSS に新しいアニメーションを開始させる方法が見つかりませんでした。また、CSS アニメーションでは背景画像を変更できません (試してみました)。そのため、className を切り替えるために少し JavaScript を使用する必要があったため、画像が変更されました。ただし、同期が失われる可能性があるため、これは最善の解決策ではありません。それに加えて、それは純粋な CSS3 アニメーションを持つという目的を無効にします。
Q: 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);
}
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% |
*------------------------------------------*