ボックスの固定長と幅を使用して画像の自動回転を実装する js code_javascript スキル

WBOY
リリース: 2016-05-16 16:45:18
オリジナル
1303 人が閲覧しました

この小さなデモでは、主に長さと幅が固定されたボックスを使用して画像を表示し、画像を変更するたびに画像ボックスの 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;


="ボックス">







="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();
}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!