この小さなデモでは、主に長さと幅が固定されたボックスを使用して画像を表示し、画像を変更するたびに画像ボックスの style 属性の margin-left を変更してカルーセル効果を作成します。
.org/1999/xhtml"> ;head>
無題ドキュメント .box {
幅: 900px;
マージン: 20px;
マージン: 0 自動;
.imagebox {
幅: 3600px;
高さ: 350px;
-webkit-transition: すべて 1 のイーズインアウト ; out;
-o-transition: すべて 1 の easy-in-out;
transition: すべて 1 の easy-in-out; 🎜>float: left;
height: 350px;
="ボックス">
div>
="button" value="right" onclick="turnright()"/>
var int=setInterval("change") ()",3*1000);
var a=document.getElementById("ImageBox");
var i=1;
function change() {
if(i==4) {
i=0;
}
i=i 1;
a.style.marginLeft=(1-i)*900 "px" ;
function stopchange(){clearInterval(int);}
function startchange(){int=setInterval("change()",2*1000);}
a .onmouseover=function(){clearInterval(int) ;}
a.onmouseout=function() {int=setInterval("change()",2*1000);}
functionturnleft(){
stopchange(); 1;
a.style.marginLeft=(1-i)*900 "px";
if(i==4){
}
startchange() ;
}
関数turnright(){
stopchange();
if(i>1){
a.style.marginLeft= (2-i)*900 "px";
i=i-1;
}else{
a.style.marginLeft=-3*900 "px";
i=4;
startchange();
}