类似flash幻灯片效果

最新推荐文章于 2021-06-17 20:00:24 发布

xidianyueyong

最新推荐文章于 2021-06-17 20:00:24 发布

阅读量335

点赞数 1

分类专栏： html5 js小部件，前端文章标签： flash幻灯片效果幻灯片效果的图片播放

本文链接：https://blog.csdn.net/xidianyueyong/article/details/76795276

版权

html5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

js小部件，前端

6 篇文章 0 订阅

订阅专栏

html css布局：

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.οnlοad=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].οnmοuseοver=function()
		{
			starMove(gonext[this.index],'opacity',300);
		};
		gonext[i].οnmοuseοut=function()
		{
			starMove(gonext[this.index],'opacity',0);
		};
		gonext[i].οnclick=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].οnclick=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].οnmοuseοver=function()
		{
			starMove(gonext[this.index],'opacity',60);
		};
		oA[i].οnmοuseοut=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);
	
		
}