この記事の内容は、JavaScriptで画像切り替えのアニメーション効果(コード)を実現する方法についてです。必要な方は参考にしていただければ幸いです。
最初のレンダリングは大体こんな感じです。左のボタンをクリックすると写真が切り替わります。
非常に簡単なように見えますが、まだいくつかの困難があるため、このケースを選択して慎重に分析します。
ステップ 1: レイアウト
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: RGB(123,113,104);
}
#pic{
width: 300px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pic img{
width: 300px;
height: 400px;
}
#pic span,#pic p{
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(61,50,48,0.5);
}
#pic span{
top: 0px;
}
#pic p{
bottom: 0px;
}
#pic ul{
position: absolute;
top:0px;
left: 320px;
}
#pic li{
list-style: none;
width: 40px;
height: 40px;
background-color: #333;
margin-bottom:10px ;
}
#pic li.active{
background-color: #F2F2F2;
}
</style>
<body>
<p id="pic">
<img src="/static/imghwm/default1.png" data-src="img/1.jpeg" class="lazy" / alt="JavaScriptで画像切り替えのアニメーション効果を実現する方法（コード）" >
<span>- / -</span>
<p>图片描述正在加载中...</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</body>
</html>ステップ 2: データと初期化
1) データを見つける
2) ページを初期化する
<script type="text/javascript">
window.onload = function(){
var op = document.getElementById("pic");
var oImg = op.getElementsByTagName('img')[0];
var oSpan = op.getElementsByTagName('span')[0];
var oP = op.getElementsByTagName('p')[0];
var oUl = op.getElementsByTagName('ul')[0];
var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
//一般有数组就需要一个值
var num = 0;
//初始化
oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
oImg.src = arrSrc[num];
oP.innerHTML = arrText[num];
for(var i=0;i<arrSrc.length;i++){
oUl.innerHTML += '<li></li>';
}
}
</script>ステップ 3: 画像を切り替え、画像を切り替え、これまでのテキストを表示します。は実現されましたが、その隣の ul の効果はまだ実現されていません
var oLi = oUl.getElementsByTagName('li');
//切换图片
for(var i=0;i<arrSrc.length;i++){
//自定义属性，一一对应
oLi[i].index = i;
oLi[i].onclick = function(){
var id = this.index;
//通过自定义的属性设置对应的信息
oImg.src = arrSrc[id];
oP.innerHTML = arrText[id];
oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
}
}ステップ 4: li のクラス スタイルを追加します。
アイデア 1:
li のすべてのスタイルをクリアし、クリックしたスタイルに追加します。
var oldLi = 0;
//初始化
oLi[oldLi].className = 'active';
//在点击事件中
//循环将class清空
for(var j=0;j<arrSrc.length;j++){
oLi[j].className = "";
}
oLi[id].className = "active";アイデア 2:
前の値をクリアし、現在追加します
変数を定義し、oldLi はクリックされた前の値を保存します
デフォルトは 0 です
次のものをクリックすると、0 (デフォルト) がクリアされます。
そして、現在クリックされている li のインデックス カスタム属性を記録します oldLi = this.index;
次に、現在の li の class 属性を設定します
oLi[oldLi].className = ''; oldLi = id; this.className = 'active';
Completed;
完全なコードとスクリーンショットを以下に投稿します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: RGB(123,113,104);
}
#pic{
width: 300px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pic img{
width: 300px;
height: 400px;
border-radius:10px;
}
#pic span,#pic p{
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(61,50,48,0.5);
}
#pic span{
top: 0px;
border-radius:10px 10px 0 0;
}
#pic p{
bottom: 0px;
border-radius: 0 0 10px 10px;
}
#pic ul{
position: absolute;
top:0px;
left: 320px;
}
#pic li{
list-style: none;
width: 40px;
height: 40px;
background-color: #333;
margin-bottom:10px ;
border-radius: 10px;
}
#pic li.active{
background-color: #F2F2F2;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("pic");
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
//一般有数组就需要一个值
var num = 0;
var oldLi = 0;
//初始化
oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
oImg.src = arrSrc[num];
oP.innerHTML = arrText[num];
for(var i=0;i<arrSrc.length;i++){
oUl.innerHTML += '<li></li>';
}
oLi[oldLi].className = 'active';
//切换图片
for(var i=0;i<arrSrc.length;i++){
//自定义属性，一一对应
oLi[i].index = i;
oLi[i].onclick = function(){
var id = this.index;
//通过自定义的属性设置对应的信息
oImg.src = arrSrc[id];
oP.innerHTML = arrText[id];
oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
oLi[oldLi].className = '';
oldLi = id;
this.className = 'active';
}
}
}
</script>
<body>
<div id="pic">
<img src="/static/imghwm/default1.png" data-src="img/1.jpeg" class="lazy" / alt="JavaScriptで画像切り替えのアニメーション効果を実現する方法（コード）" >
<span>- / -</span>
<p>图片描述正在加载中...</p>
<ul>
<!--<li class="active"></li>-->
</ul>
</div>
</body>
</html>関連する推奨事項:
JavaScriptでインポートとエクスポートを実装する方法(コード付き)
ネイティブJSカルーセルレンダリングのアニメーション効果(コード付き)
以上がJavaScriptで画像切り替えのアニメーション効果を実現する方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AMこの記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AMJavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AMJavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AMJavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AMPythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
SublimeText3 中国語版
中国語版、とても使いやすい
WebStorm Mac版
便利なJavaScript開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
