javascript：自定義屬性縮略圖切換練習

時間 2021-01-02
標籤 javascript html java ide this url htm 對象 seo 欄目 JavaScript 简体版
原文原文鏈接
<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
		<style>
			div,p,ul,li{padding:0; margin:0;}
		#div1{width:710px;height:568px;background:#ccc url(../img/zidingyishuxing/bj1.jpg) no-repeat;}
		#div2{width:683px;height:458px;margin:0px 15px 0px 12px;position:relative;}
		#div2 a{width:80px;height:80px;opacity:0.6;line-height:80px;position:absolute;font-size:40px;
		display:block;background:url(../img/zidingyishuxing/a.png) no-repeat center center;color:#fff;
		text-align:center;opacity:0.5;}
		#div2 a:hover{width:80px;height:80px;position:absolute;font-size:40px;display:block;opacity:1;
		background:url(../img/zidingyishuxing/a.png) no-repeat center center;}
			#a1{top:220px;left:30px;}
			#a2{top:220px;right:20px;}
		p{height:40px;font-size:24px;text-indent:15px;line-height:40px;}
		ul{display:inline-block;background:blue;text-align:center;width:710px;height:70px; line-height:70px;} 
		
		ul li{display:inline-block;list-style:none;width:60px;height:60px;position:relative;
		text-align:center;line-height:70px;margin-right:10px;
		background:url(../img/zidingyishuxing/yko.png) no-repeat center center;}
		.bg{background:url(../img/zidingyishuxing/ykt.png) no-repeat center center;}
		
		ul li a{display:inline-block;position:absolute;top:0px;}
		ul li img{display:none;width:100px;height:67px;background:yellow;position:absolute;top:-80px;}
	</style>
	<script type=「text/javascript」>
			window.onload = function(){
	var div2 = document.getElementById('div2');
	var div = document.getElementsByTagName('div')[0];
	//alert(div[0].innerHTML);//2
	var p1 = document.getElementsByTagName('p')[0];
	var a1 = document.getElementById('a1');
	var a2 = document.getElementById('a2');
	var img1 = div2.getElementsByTagName('img');
	var ul = div.getElementsByTagName('ul')[0];//ul既不是數據也不是對象！
	var imgs = ul.getElementsByTagName('img');
	//alert(img instanceof(Object));
	//alert(img.length);//1
	var arrimg1 = ['../img/zidingyishuxing/1.jpg', '../img/zidingyishuxing/2.jpg', '../img/zidingyishuxing/3.jpg', '../img/zidingyishuxing/4.jpg', '../img/zidingyishuxing/5.jpg'];
	var arrimg2 = ['../img/zidingyishuxing/11.jpg', '../img/zidingyishuxing/22.jpg', '../img/zidingyishuxing/33.jpg', '../img/zidingyishuxing/44.jpg', '../img/zidingyishuxing/55.jpg'];
	
	var lis = ul.getElementsByTagName('li');
	var imgs = ul.getElementsByTagName('img');
	
	var m = 0;
	var oldli = null;
	oldli = lis[m];
	for (var i = 0; i < lis.length; i++) {
		lis[i].index = i;//自定義屬性
		imgs[i].index = i;
		//如下是ul列表中每一個li點擊時切換主圖！
		lis[i].onclick = function(){
			oldli.className = '';
			m = this.index;
			oldli = lis[m];
			oldli.className = 'bg';
			//alert(this.index);
			img1[0].src = arrimg1[this.index];
		}
		
		lis[i].onmouseover = function(){
			//alert('kkk');
			for (var j = 0; j < arrimg1.length; j++) {
				imgs[j].style.display = "none";
				imgs[this.index].style.display = 'block';
				imgs[this.index].src = arrimg2[this.index];
			}
		};
	}
		
	a1.onclick = function(){
		oldli.className = '';
		m--;
		//lis[m].style.background="url(../img/zidingyishuxing/ykt.png) no-repeat center center";
		
		if (m >= 0) {
			oldli = lis[m];
			oldli.className = 'bg';
			img1[0].src = arrimg1[m];
		}
		else {
			//alert(arrimg1.length);//5
			m = arrimg1.length - 1;
			img1[0].src = arrimg1[m];
			oldli = lis[m];
			oldli.className = 'bg';
			//alert(lis[m].className);
		}
		
	}
	
	
	a2.onclick = function(){
		oldli.className = '';
		m++;
				
		if (m < arrimg1.length) {
			oldli = lis[m];
		oldli.className = 'bg';
			img1[0].src = arrimg1[m];
		}
		else {
			//alert(m);
			m = 0;
			oldli = lis[m];
			oldli.className = 'bg';
			img1[0].src = arrimg1[m];
		}
	}
		
}	
</script>
	</head>
	<body>
		<div id="div1">
			<p>帶縮略圖的圖片輪轉</p>
			<div id="div2"><a id="a1"><</a><a id="a2">></a><img src='../img/zidingyishuxing/1.jpg'/></div>
			<ul><li><a></a><img /></li><li><a></a><img /></li><li><a></a><img /></li><li><a></a><img /></li><li><a></a><img /></li></ul>
		</div>
		
	</body>
</html>