ホームページ > 記事 > ウェブフロントエンド > 配列を上手に使って画像切り替えのJSコードを作成する
配列を上手に使って画像切り替えのJSコードを作成する
- 高洛峰オリジナル
- 2016-12-03 14:49:271110ブラウズ
前回の記事では、JSにおける配列の具体的な操作について説明しました。詳しくは、（JSにおける配列のさまざまな操作のまとめ）を参照してください。ここでは詳しく説明しません。今日の主な目的は、配列を使用して左右の画像を簡単に切り替える方法です。
この記事での画像切り替えの具体的な手順は次のとおりです:
ステップ 1: シンプルなレイアウトと基本的な表示スタイルを設計する;
ステップ 2: js を介して関連要素を取得する;
ステップ 3: 配列ストレージを介して画像の URL と画像を取得する
ステップ 4: 初期化: 画像の初期化、画像番号の表示、対応するテキストの初期化などを含みます。
ステップ 5: ボタンをクリックして画像を切り替え、実際には単純なアプリケーションです。配列の。
実装コード:
<!DOCTYPE html> <br>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style>
.box{
width: 600px;
height:400px;
border: 10px solid #ccc;
position: relative;
margin: 40px auto 0;
}
.box a{
width: 30px;
height: 30px;
background-color: #000;
border: 5px solid #fff;
position: absolute;
top:180px;
text-align: center;
font-size:25px;
font-weight: bold;
line-height: 30px;
color:#fff;
text-decoration: none;
filter: alpha(opacity:40);
opacity: 0.4;
}
.box a:hover{
filter:alpha(opacity:80);
opacity:0.8;
}
.box #prev{
left: 10px;
}
.box #next{
right: 10px;
}
#text,#num{
height: 30px;
line-height:30px;
width: 600px;
color:#fff;
position: absolute;
left: 0;
background-color: #000;
text-align: center;
filter: alpha(opacity:80);
opacity: 0.8;
margin:0;
}
.box #text{
bottom: 0;
}
.box #num{
top:0;
}
.box #img1{
width: 600px;
height: 400px;
}
</style>
<script>
window.onload = function () {
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var oText = document.getElementById("text");
var oNum = document.getElementById("num");
var oImg = document.getElementById("img1");
var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var arrText = ['文字1','文字2','文字3','文字4'];
//初始化
var num = 0;
function fnTab(){
oNum.innerHTML = num + 1 + '/' + arrText.length;
oImg.src = arrUrl[num];
oText.innerHTML = arrText[num];
};
fnTab();
oPrev.onclick = function(){
num --;
if( num == -1){
num = arrUrl.length -1;
}
fnTab();
};
oNext.onclick = function(){
num ++;
if(num == arrUrl.length){
num = 0;
}
fnTab();
};
};
</script>
</head>
<body>
<div class="box">
<a id="prev" href="javascript:;"> < </a>
<a id="next" href="javascript:;"> > </a>
<p id="text">图片正在加载中……</p>
<span id="num">数量正在统计中……</span>
<img id="img1" src="../images/1.jpg" alt="">
</div>
</body>
</html>この例は非常に単純で、主に配列の単純な読み書きと HTML 属性コンテンツの読み書きが含まれます。注意する必要があるのは、次の画像をクリックして最後の画像に移動するか、前の画像をクリックして最初の画像に移動する場合、特定の数値変更を設定する必要があることです。そうしないと、画像と数値が対応する境界を越えてしまいます。質問は内容がありません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。