简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

ボックスの固定長と幅を使用して画像の自動回転を実装する 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
前の記事：JavaScript は正規表現を使用して日付から -_javascript ヒントを削除します 次の記事：Node.js (インストール、起動、テスト)_node.js
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！