js中的圖片指定切換效果的實現
用到的js中的知識：js中的for循環的熟練運用
js中的this屬性：指的是調用當前 方法 （函數） 的那個對象
js中的自定義屬性：js可以爲任意的HTML元素添加任意個自定義的屬性
js中的索引值屬性：在js中當你想建立“匹配” “對應” 的關係時就需要用到索引值index
實現圖片指定切換的代碼一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
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 aLi = oUl.getElementsByTagName('li');
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
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 aLi = oUl.getElementsByTagName('li');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊嬉戲','愛心世界','美麗花環'];
var num = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
} // 找到代碼中的li
//初始化
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
oP.innerHTML = arrText[num];
aLi[num].className = 'active'; // 運用className的方法將指定的li變爲其它的顏色
for( var i=0;i<aLi.length;i++){
aLi[i].index = i; // 定義了索引值
aLi[i].onclick = function(){
oImg.src = arrUrl[this.index];
oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
oP.innerHTML = arrText[this.index]; // htis與索引值屬性的聯合使用
for( var i=0;i<aLi.length;i++){
}
this.className = 'active';
} // 此處爲點擊哪個li，哪個li就變爲當前的li的方法之
} // 此處爲點擊哪個li，哪個li就變爲當前的li的方法之
}
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
</body>
</html>
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
</body>
</html>
此代碼中當點擊哪個li，哪個li就爲當前的li的方法的基本思路爲：
清空所有li的class屬性，給當前點擊的那個li添加className屬性。
此方法雖然暴力，但是卻很實用。
實現圖片指定切換的代碼二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
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 aLi = oUl.getElementsByTagName('li');
var oldLi = null;// 定義了一個變量名
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊嬉戲','愛心世界','美麗花環'];
var num = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
} // 找到代碼中的li
oldLi = aLi[num];//將li的值存儲在此變量中
//初始化
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
oP.innerHTML = arrText[num];
aLi[num].className = 'active'; // 運用className的方法將指定的li變爲其它的顏色
for( var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
oImg.src = arrUrl[this.index];
oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
oP.innerHTML = arrTextt[this.index]; // htis與索引值屬性的聯合使用
oldLi.className = '';
oldLi = this;// 將此時點擊的值設爲當前值的前一個值，方便下一次點擊時進行改變
this.className = 'active';
} // 此處爲點擊哪個li，哪個li就變爲當前的li的方法之
}
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
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 aLi = oUl.getElementsByTagName('li');
var oldLi = null;// 定義了一個變量名
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊嬉戲','愛心世界','美麗花環'];
var num = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
} // 找到代碼中的li
oldLi = aLi[num];//將li的值存儲在此變量中
//初始化
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
oP.innerHTML = arrText[num];
aLi[num].className = 'active'; // 運用className的方法將指定的li變爲其它的顏色
for( var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
oImg.src = arrUrl[this.index];
oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
oP.innerHTML = arrTextt[this.index]; // htis與索引值屬性的聯合使用
oldLi.className = '';
oldLi = this;// 將此時點擊的值設爲當前值的前一個值，方便下一次點擊時進行改變
this.className = 'active';
} // 此處爲點擊哪個li，哪個li就變爲當前的li的方法之
}
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
</body>
</html>
此代碼中當點擊哪個li，哪個li就爲當前的li的方法的基本思路爲：
清空當前的前一個li的class屬性，給當前點擊的那個li添加className屬性。
此方法雖然更爲合理，但是實用起來卻不如第一種簡潔方便。
代碼的簡化處理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
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 aLi = oDiv.getElementsByTagName('li');
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
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 aLi = oDiv.getElementsByTagName('li');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊嬉戲','愛心世界','美麗花環'];
var num = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
}
//初始化
function fnTab(){
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
oP.innerHTML = arrText[num];
for( var i=0;i<aLi.length;i++){
aLi[i].className = '';
}
aLi[num].className = 'active';
}// 將相似的代碼轉換成相同的代碼，再將其定義爲函數
fnTab()// 定義函數之後，要將其調用，函數內部的代碼纔會執行
for( var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
num = this.index;
fnTab();// 每寫一次此函數，都意味着函數內部的代碼被調用了
}
}
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
</body>
</html>
代碼中遇見相同的或者相似的代碼，應該用定義函數的方法，是相同的代碼進行封裝起來，使代碼看起來更加簡潔。
在使用函數時，要注意，定義完函數之後，一定要進行調用，否則函數自己是不會主動執行的。