当前位置: 首页 > 前端技术 > 正文

JavaScript练习:带缩略图的图片切换效果

带缩略图的图片切换效果

<!doctype html><html><head>
<meta charset="utf-8">
<title>带缩略图的图片切换效果</title>
<style>
body,div,h2,a,ul,li,p{ margin:0; padding:0;}
li{ list-style:none;}
#banner{ width:720px; height:500px; margin:0 auto;padding:20px 30px; background: #666 url(loader_ico.gif) no-repeat center; position:relative;}
h2{ height:36px; margin-bottom:15px; line-height:36px; font-size:24px; color:#fff;}
.pic,.pic img{ width:720px; height:420px;} 
#banner a{ width:36px; height:36px;font-size:24px; line-height:36px;color:#fff;text-decoration:none; text-align:center; background:rgba(0,0,0,.5);position:absolute;top:273px;}
#banner a:hover{background:rgba(0,0,0,.8)}
#prev{ left:50px; }
#next{ right:50px;}
#banner p{ width:720px;height:24px; font-size:14px; line-height:24px; color:#fff; text-align:center;background:rgba(0,0,0,.5); position:absolute;top:71px;}
.nav{ width:130px;height:20px; margin:10px auto;}
.nav li{ width:16px; height:16px; float:left;margin:0 5px; background:#09F; border-radius:50%; position:relative;}
.nav li.on,.nav li:hover{ background:#fff;}
.nav li img{ display:none;width:80px; height:80px; padding:3px; background:#FFF; position:absolute; top:-100px; left:-40px;z-index:100;}
.nav li:hover img{display:block}
</style>
<script>
window.onload = function(){
	var oBan= document.getElementById('banner');
	var oImg= document.getElementById('img1');
	var aBtn= oBan.getElementsByTagName('a');
	var oUl= oBan.getElementsByTagName('ul')[0];
	var aLi= oBan.getElementsByTagName('li');
	var oP=  oBan.getElementsByTagName('p')[0];
	var num=0;
	
	var arrImg = ['http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70kwib3vj20k00bp43e.jpg','http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70l70n9yj20rq0ih11y.jpg','http://ww2.sinaimg.cn/mw1024/88b110f7gw1el70lsdgjfj20xc0e7wmo.jpg','http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70lc81caj20k00dbahg.jpg','http://ww4.sinaimg.cn/mw1024/88b110f7gw1el70kt987xj20k00bjtcu.jpg','http://ww2.sinaimg.cn/mw1024/88b110f7gw1el70krl9h4j20k00dcwmj.jpg'];
	var arrImgs = ['http://ww3.sinaimg.cn/square/88b110f7gw1el70kwib3vj20k00bp43e.jpg','http://ww3.sinaimg.cn/square/88b110f7gw1el70l70n9yj20rq0ih11y.jpg','http://ww2.sinaimg.cn/square/88b110f7gw1el70lsdgjfj20xc0e7wmo.jpg','http://ww3.sinaimg.cn/square/88b110f7gw1el70lc81caj20k00dbahg.jpg','http://ww4.sinaimg.cn/square/88b110f7gw1el70kt987xj20k00bjtcu.jpg','http://ww2.sinaimg.cn/square/88b110f7gw1el70krl9h4j20k00dcwmj.jpg'];

	//初始化
	for(var i=0;i<arrImg.length;i++){
		oUl.innerHTML +='<li></li>';		
	}
	oUl.style.width=arrImg.length*26+'px';
	oImg.src= arrImg[num];
	oP.innerHTML='图片'+num;
	aLi[num].className='on';
	
	aBtn[1].onclick= function(){
		aLi[num].className='';
		if(num<arrImg.length-1){
			num++			
		}else{num=0}
		oImg.src= arrImg[num];
		oP.innerHTML='图片'+num;
		aLi[num].className='on';
	};
	
	aBtn[0].onclick= function(){
		aLi[num].className='';
		if(num==0){
			num=arrImg.length-1;
		}else{
			num--
		}
		oImg.src= arrImg[num];
		oP.innerHTML='图片'+num;		
		aLi[num].className='on';
	};	

	for(var i=0;i<aLi.length;i++){
		aLi[i].index= i;
		//aLi控制图片切换
		aLi[i].onclick= function(){
			oImg.src= arrImg[this.index];
			oP.innerHTML='图片'+this.index;
			aLi[num].className='';
			aLi[this.index].className= 'on';
			num=this.index;			//将num的值改为当前点击的元素
		};
		//移入aLi看小图
		aLi[i].onmousemove = function(){
			aLi[this.index].innerHTML= '<img src="' + arrImgs[this.index] + '">';	
		}
	}

};
</script>
</head>
<body>
<div id="banner">
	<h2>带缩略图的幻灯片</h2>
	<div class="pic"><img id="img1"></div>
  <p></p>
	<a id="prev" href="javascript:;"> < </a>
	<a id="next" href="javascript:;"> > </a>  
  <ul class="nav"></ul>
</div>
</body>
</html>

JavaScript练习:带缩略图的图片切换效果:等您来吐槽!