欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

类似flash幻灯片效果

程序员文章站 2022-05-26 19:42:32
...

html css布局：


类似flash幻灯片效果

html:

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<link rel="stylesheet" href="css/style.css"/>
<title>flash效果幻灯片</title>
<script type="text/javascript" language="javascript" src="javascript/move.js"></script>
<script type="text/javascript" language="javascript" src="javascript/flashmove.js"></script>
</head>
<body>
  <div  id="play" class="play">
       <div class="big_pic" id="big">
       <div class="make_prevouse" id="make_prevouse"></div>
       <div class="make_next" id="make_next"></div>
       <ul>
       <li style="z-index:1;"><img src="image/1.jpg" /></li>
       <li><img src="image/2.jpg" /></li>
       <li><img src="image/3.jpg" /></li>
       <li><img src="image/4.jpg" /></li>
       <li><img src="image/5.jpg" /></li>
       <li><img src="image/6.jpg" /></li>
       </ul>
       <a class="prevouse" href="javascript:void(0);"></a>
       <a class="next" href="javascript:void(0);"></a>
       </div>
       <div class="small_pic" id="small">
       	<ul>
           <li style="filter:alpha(opacity:100);opacity:1;"><img src="image/1.jpg" /></li>
           <li><img src="image/2.jpg" /></li>
           <li><img src="image/3.jpg" /></li>
           <li><img src="image/4.jpg" /></li>
           <li><img src="image/5.jpg"  /></li>
      	   <li><img src="image/6.jpg" /></li>
        </ul>
       </div>
  </div>
</body>
</html>


css: 

body
{
	background:#CCC;
	width:100%;
}
.play
{
	
	width:500px;
	height:500px;
	border:2px solid #9F3; 
	margin:50px auto;
	font: 12px Arial;
}
.big_pic
{
	position:relative;
	width:490px;
	height:390px;
	border:1px solid #000;
	margin:5px auto 5px auto;
	overflow:hidden;
}
.small_pic
{
	position:relative;
	width:490px;
	height: 95px;
	border:1px solid #000;
	margin:0px auto 5px auto;
	overflow:hidden;
}
ul
{
	margin:0px;
	padding:0px;
}
li
{
	list-style:none;
}
.big_pic li
{
	width:490px;
	height:390px;
	position:absolute;
	top:0;
	left:o;
	overflow:hidden;
}
img 
{ 
	border: 0; 
}
.prevouse
{
	width:245px;
	height:390px;
	position:absolute;
	background-color:#C33;//不能删除掉，否则ie下不能兼容
	top:0;
	left:0;
	z-index:100;
	filter:alpha(opacity:0);
	opacity:0;

}
.next
{
	width:244px;
	height:390px;
	position:absolute;
	top:0;
	right:0;
	z-index:100;
	background-color:#0F0;
	filter:alpha(opacity:0);
	opacity:0;
}
.small_pic li
{
	background-color:#999;
	float:left;
	width:150px;
	height: 85px;
	margin:5px auto 5px 10px;
	filter:alpha(opacity:60);
	opacity:0.6;
}
.small_pic img 
{ 
	width: 150px;
    height: 85px;
}
.make_prevouse
{
	 width: 60px; 
	 height: 60px; 
	 background:url(../image/btn.gif) no-repeat;
	 position: absolute; 
	 top: 140px;
	 left: 10px; 
	 cursor: pointer; 
	 z-index:101;
	 filter:alpha(opacity:0);
	 opacity:0;
}
.make_next
{
	
	 width: 60px; 
	 height: 60px; 
	 background:url(../image/btn.gif) no-repeat 0 -60px;
	 position: absolute; 
	 top: 140px;
	 right: 10px; 
	 cursor: pointer; 
	 z-index:101;
	 filter:alpha(opacity:0);
	 opacity:0;
}
.small_pic ul
{
	  height: 95px;
	  position: absolute; 
	  top: 0; 
	  left: 0; 
}


js文件：

flashmove.js


window.onload=function()
{
	var bDiv=document.getElementById("big");	
	var sDiv=document.getElementById("small");
	var sUl=sDiv.getElementsByTagName("ul")[0];
	var sLi=sUl.getElementsByTagName("li");
	var bUl=bDiv.getElementsByTagName("ul")[0];
	var bLi=bUl.getElementsByTagName("li");
	var oA=bDiv.getElementsByTagName('a');
	var gonext=bDiv.getElementsByTagName('div');    //获取前进后退按钮元素
	var i=0;
	var iNow=0;
	for(i=0;i<gonext.length;i++)
	{
		gonext[i].index=i;
		gonext[i].onmouseover=function()
		{
			starMove(gonext[this.index],'opacity',300);
		};
		gonext[i].onmouseout=function()
		{
			starMove(gonext[this.index],'opacity',0);
		};
		gonext[i].onclick=function()
		{
			if(this.className=='make_prevouse')
			{
					starMove(bLi[iNow],'top',390);
					bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);
					if(iNow==0)
					{
						iNow=(bLi.length-1);
						bLi[iNow].style.top='0px';
						bLi[iNow].style.zIndex='1';

					}
					else
					{
						iNow--;
					}
					bLi[iNow].style.top='0px';
					bLi[iNow].style.zIndex='1';
					small_move(iNow);

			}
			else
			{
				
					starMove(bLi[iNow],'top',390);
					bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);
					if(iNow==(bLi.length-1))
					{
						iNow=0;
						bLi[iNow].style.top='0px';
						bLi[iNow].style.zIndex='1';

					}
					else
					{
						iNow++;
					}
					bLi[iNow].style.top='0px';
					bLi[iNow].style.zIndex='1';
					small_move(iNow);
			}
				
		};
		
	}
//小图点击事件处理
	for(i=0;i<sLi.length;i++)
	{
		sLi[i].index=i;
		sLi[i].onclick=function()
		{
			if(this.index>iNow)
			{
					starMove(bLi[iNow],'top',390);
					bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);
					if(iNow==(bLi.length-1))
					{
						iNow=0;
						bLi[iNow].style.top='0px';
						bLi[iNow].style.zIndex='1';

					}
					else
					{
						iNow=this.index;
					}
					bLi[iNow].style.top='0px';
					bLi[iNow].style.zIndex='1';
					small_move(iNow);
			}
			if(this.index<iNow)
			{
					starMove(bLi[iNow],'top',390);
					bLi[iNow].style.zIndex=(parseInt(getstyle(bLi[iNow],'zIndex'))+1);
					if(iNow==0)
					{
						iNow=(bLi.length-1);
						bLi[iNow].style.top='0px';
						bLi[iNow].style.zIndex='1';

					}
					else
					{
						iNow=this.index;
					}
					bLi[iNow].style.top='0px';
					bLi[iNow].style.zIndex='1';
					small_move(iNow);
			}
		};
	}
	
	sUl.style.width=sLi.length*(parseInt(getstyle(sLi[0],'width'))+10)+10+'px';
	for(i=0;i<oA.length;i++)
	{
		oA[i].index=i;
		oA[i].onmouseover=function()
		{
			starMove(gonext[this.index],'opacity',60);
		};
		oA[i].onmouseout=function()
		{
			starMove(gonext[this.index],'opacity',0);
		};
	}
//小图移动
function small_move(itarget)
{
	
	if(itarget==0||itarget==1)
	{
		for(i=0;i<sLi.length;i++)
		{
			if(i==itarget)
			{
				sLi[i].style.filter='alpha(opacity:100)';
				sLi[i].style.opacity=1;
			}
			else
			{
				sLi[i].style.filter='alpha(opacity:30)';
				sLi[i].style.opacity=0.3;
			}
		}
		starMove(sUl,'left',0);
	}
	else if(itarget==(sLi.length-1)||itarget==(sLi.length-2))
	{
		for(i=0;i<sLi.length;i++)
		{
			if(i==itarget)
			{
				sLi[i].style.filter='alpha(opacity:100)';
				sLi[i].style.opacity=1;
			}
			else
			{
				sLi[i].style.filter='alpha(opacity:30)';
				sLi[i].style.opacity=0.3;
			}
		}
		starMove(sUl,'left',-(sLi.length-3)*160-5);
	}
	else 
	{
		for(i=0;i<sLi.length;i++)
		{
			if(i==itarget)
			{
				sLi[i].style.filter='alpha(opacity:100)';
				sLi[i].style.opacity=1;
			}
			else
			{
				sLi[i].style.filter='alpha(opacity:30)';
				sLi[i].style.opacity=0.3;
			}
		}
		starMove(sUl,'left',-(itarget-1)*160);
	}
}
};
 move.js 

// JavaScript Document
//准确获取标签样式
function getstyle(obj,attr)
{
		if(obj.currentStyle)
		{
			return obj.currentStyle[attr];	
		}
		else
		{
			return getComputedStyle(obj,false)[attr];
		}
}
//移动 框架
function starMove(obj,attr,itarget)
{
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			if(attr=='opacity')
			{
				var iCur=parseInt(parseFloat(getstyle(obj,attr))*100);	
			}
			else
			{
				var iCur=parseInt(getstyle(obj,attr));	
			}
			var ispeed=(itarget-iCur)/8;
			ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
			if(iCur==itarget)
			{
				obj.style[attr]=itarget+'px';
				clearInterval(obj.timer);
			}
			else
			{
				if(attr=='opacity')
				{
					obj.style.filter='alpha(opacity:'+(iCur+ispeed)+')';	
					obj.style.opacity=(iCur+ispeed)/100;
				}
				else
				{
					obj.style[attr]=iCur+ispeed+'px';
				}
				
			}
		},30);
	
		
}


相关标签： flash幻灯片效果 幻灯片效果的图片播放

上一篇： 数据结构-二叉树的遍历

下一篇： C语言实现顺序栈

推荐阅读