带缩略图的图片切换

最新推荐文章于 2022-11-10 16:33:51 发布

灰头兔脸

最新推荐文章于 2022-11-10 16:33:51 发布

阅读量289

点赞数

分类专栏：学习记录

本文链接：https://blog.csdn.net/whoops_butterfly/article/details/78431354

版权

学习记录专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li,p{ margin:0px; padding:0px;}
#list{position:absolute; bottom:35px; left:282px; }
#max{width:712px; height:568px; margin:0 auto; background:url(../img/back.png); position:relative;}
#word{ font-size:24px; color:#FFF; text-align:center; padding-top:10px;}
#content{width:683px; height:456px; background:url(../img/loader_ico.gif) #000 no-repeat center; position:absolute; top:42px; left:15px;}
#picture{width:683px; height:456px;}
#list li{float:left; width
:15px; height:15px; background:#999; border-radius:15px; list-style-type:none; margin-right:8px;}
#content a{font-size:30px; line-height:60px; width:60px; height:60px; background:#e73106; position:absolute; top:210px; text-align:center;

border-radius:60px; color:#FFF; font-weight:bold; opacity:0.5;}
#pre{left:25px;}
#next{right:25px;}
#list .active{background:#e73106;}
#content .hover{opacity:1}
.min{width:163px;height:110px; background:url(../img/img6.png); position:absolute; bottom:15px; }
.little{width:149px; height:85px; position:absolute;}
</style>
<script>
	window.οnlοad=function(){
		       var oDiv = document.getElementById("content");
			   var oPre = document.getElementById("pre");
			   var oNex = document.getElementById("next");
			   var oUl = document.getElementById("list");
			   var aLi = oUl.getElementsByTagName("li");
			   var oP=document.getElementById("word");
			   var oImg = document.getElementById("picture");
			   var aMin=oUl.getElementsByTagName("div");
			   var apic=oUl.getElementsByTagName("img");
			   var aImg = ['../img/cat1.jpg','../img/cat2.jpg','../img/cat3.jpg','../img/cat4.jpg','../img/cat5.jpg'];
			   var num=0;
			  //初始化
			   function fntab(){
				          oImg.src=aImg[num];
						  oP.innerHTML = 'Lovely Cat';
						   for( var i=0; i<aLi.length;i++){
                                         aLi[i].className = '';
                                         }
									     aLi[num].className = 'active'; 
				   } 
			  fntab();
			  //‘<’‘>’鼠标移入事件
			  oPre.onmouseover = function(){
				       this.className='hover';
				  }
			 oNex.onmouseover = function(){
				       this.className = 'hover';
				 }
			 //‘<’‘>’鼠标移出事件
			  oPre.onmouseout = function(){
				       this.className='';
				  }
			 oNex.οnmοuseοut= function(){
				       this.className = '';
				 }
			//点击上一张，图片切换
			  oPre.onclick = function(){
				         num--;
						 if(num==-1){
							      num=aImg.length-1;
							  }
						  fntab();
					    }
              //点击下一张，图片切换
			 oNex.onclick = function(){
					   num++;
					   if(num==aImg.length){
						        num=0;
						   }
					    fntab();
				 }
			  //显示缩略图
			  for(i=0;i<aLi.length;i++){
				      aLi[i].index=i;
					  aLi[i].οnmοuseοver=function(){
						        for(i=0;i<aLi.length;i++){
									     aMin[i].className='';
										 aMin[i].style.left='';
										 aMin[i].innerHTML='<img>'+'</img>';
										 
									}       
							aMin[this.index].className='min'; 
							aMin[this.index].style.left=-72+this.index*25+'px';
							apic[this.index].src=aImg[this.index];
							apic[this.index].className='little';
							apic[this.index].style.left=7+'px';
							apic[this.index].style.top=5+'px';
							
							
               }
				     aLi[i].οnmοuseοut=function(){
						        for(i=0;i<aLi.length;i++){
								aMin[i].className='';
                       }   
							   aMin[this.index].className='';   
                               aMin[this.index].innerHTML='';
						  }
				     aLi[i].οnclick=function(){
						      num=this.index;
							   fntab();
							   
						 }
				  }
			  	 
				
	};
</script>
</head>
<body>
<div id="max">
<p id="word"></p>
	<div id="content">
     	<a id="pre"><</a>
        <img id="picture" />
        <a id="next">></a>
    </div>
    <ul id="list">
    	<li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
</div>
</body>
</html>

灰头兔脸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带缩略图的图片切换

无标题文档ul,li,p{ margin:0px; padding:0px;}#list{position:absolute; bottom:35px; left:282px; }#max{width:712px; height:568px; margin:0 auto; background:url(../img/back.png); position:relative;}#word{
复制链接

扫一扫