Js实现Flash播放效果[带源码]-CFANZ编程社区

关于做这样的功能，需要掌握html基本元素、css布局，js知识。当你看到关于轮播图这样的效果展示，有点不敢相信，因为自己的真的不会，一方面真的不会，所以就是不会，详细一点的介绍，可是又没有时间，源码就在其中，主要复制到自己的电脑上，配置一下具体的文件结构，还有就是添加几张图片，就能完美展示在你面前。

这是css样式文件

/* 公共部分 */
body{
	background-color: #666;
}
	ul{
		padding: 0;
		margin: 0;
	}
	li{
		list-style: none; /*去除样式*/
	}
	img{
		border: 0;
	}
	/* 整个布局*/
	.play{
		width: 400px;
		height: 430px;
		margin: 50px auto 0; /* 上边距50px 左右居中  下边距0 */
		background-color: #999;
		font: 12px Arial;/* 字体大小12px 雅黑字体 */
 	}
	/* 大的轮播图 设置开始*/
	.big_pic{
		width: 400px;
		height: 320px;
		overflow: hidden; /* 超出隐藏 */
		border-bottom: 1px solid #ccc;
		background-color: #222;
		/* background-color: red; */
		position: relative;/* 绝对布局*/
	}
	.big_pic li img{
		width: 400px;
		/* height: 320px; */
	}
	.big_pic li{
		width: 400px;
		height: 320px;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		background: url(../images/loading.gif) no-repeat center center;
	}
	/* 左表记 */
	.mark_left{
		width: 200px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: red;
		z-index: 300;
		filter: alpha(opacity:0);
		opacity: 0;
	}
	/*右表记*/
	.mark_right{
		/* width: 200px; */
		width: 50%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background-color: red;
		z-index: 300;
		filter: alpha(opacity:0);
		opacity: 0;
	}
	/* 左边上一张 */
	.big_pic .prev{
		width: 60px;
		height: 60px;
		background: url(../images/btn.gif) no-repeat;
		z-index: 301;
		/* position: relative; */
		position: absolute;
		top: 130px;
		left: 10px;
		cursor: pointer;/* 鼠标样式变为小手 */
		filter: alpha(opacity:0);
		opacity: 0;
	}
	/* 右边上一张 */
	.big_pic .next{
		width: 60px;
		height: 60px;
		background: url(../images/btn.gif) no-repeat 0 -60px;
		z-index: 301;
		/* position: relative; */
		position: absolute;
		top: 130px;
		right: 10px;
		cursor: pointer;/* 鼠标样式变为小手 */
		filter: alpha(opacity:0);
		opacity: 0;
	}
	/* 文本信息 */
	.big_pic .text{
		position: absolute;
		left: 10px;
		bottom: 5px;
		color: #ccc;
		z-index: 302;
	}
	.big_pic .length{
		position: absolute;
		right: 10px;
		bottom: 5px;
		z-index: 302;
		color: #ccc;
	}
	/* 信息条 */
	.big_pic .bg{
		width: 400px;
		height: 25px;
		background-color:black ;
		filter:alpha(opacity:30);
		opacity: 0.3;
		/* background-color: rgba(0,0,0,.3);设置透明背景颜色 */
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 302;
	}
	/* 大的轮播图 设置结束*/
	/* 小的轮播图 设置开始*/
	.small_pic{
		width: 380px;
		height: 94px;
		position: relative;
		top: 7px;
		left: 10px;
		overflow: hidden;
	}
	.small_pic ul{
		position: absolute;
		top: 0;
		left: 0;
		height: 94px;
	}
	.small_pic li{
		width: 120px;
		/* height: 100%; */
		height: 94px;
		float: left;/* 左浮动 */
		background: url(../images/loading.gif) no-repeat center center;
		cursor: pointer;
		filter: alpha(opacity=60);
		opacity: 0.6;
		padding-right: 10px;  /* 在这里踩坑了 */
	}
	.small_pic img{
		width: 120px;
		height: 94px;
	}
	/* 小的轮播图 设置结束*/

这是我自己写的js工具文件

	function getStyle(obj,name){
			if(obj.currentStyle){//IE适配浏览器
			return obj.currentStyle[name]; //width height
			}else{
			return getComputedStyle(obj,false)[name];
			}
	}
	function startMove(obj,attr,iTarger){
			// alert(obj.timer);
		clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				var cur = 0;
				if(attr=='opacity'){
					cur=parseFloat(getStyle(obj,attr))*100;
			}else{
					cur=parseInt(getStyle(obj,attr));
				}
				var speed = (iTarger-cur)/6;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(cur==iTarger){
					clearInterval(obj.timer);
				}else{
					if(attr=='opacity'){
						obj.style.filter='alpha(opacity:'+(cur+speed)+')';
						obj.style.opacity=(cur+speed)/100;
					}else{
						obj.style[attr]=cur+speed+'px';
					}
				}
			},30);
		}

这是混合html+js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/styles.css" type="text/css">
		<script src="js/startmove.js"></script>
		<script>
		function getByClass(oParams,sCalss){ //参数 类  
			var aEle = oParams.getElementsByTagName('*');//获取所有的元素
			var sResult=[];
			for(var i=0;i<aEle.length;i++){
				if(aEle[i].className==sCalss){//如果类名相同
					sResult.push(aEle[i]);//追加到数组
				}
			};
			return sResult;
		};
		window.onload=function(){
			var arr = ['浩瀚的城市无边的工作与生活','沉寂在繁忙背后的毅力的故事','武侠小伙倾城一笑我奈何','新上市的汽车新特性','唯美唯爱易与你长存','显像管与世界财富的梦想'];
			
			var oDiv = document.getElementById('playimages'); //获取div
			var oDivTx = getByClass(oDiv,'text')[0]; //文字说明
			var oDivL = getByClass(oDiv,'length')[0];
			var oBtnPrev = getByClass(oDiv,'prev')[0];//根究类名找到div
			var oBtnNext = getByClass(oDiv,'next')[0];
			var oMarke_left = getByClass(oDiv,'mark_left')[0];
			var oMarke_right = getByClass(oDiv,'mark_right')[0];
			//小图
			var oDivsamll = getByClass(oDiv,'small_pic')[0];
			// alert(oDivsamll);
			var oUlSamll=oDivsamll.getElementsByTagName('ul')[0];
			var aLiSmall = oDivsamll.getElementsByTagName('li');
			//大图
			var oUlbig = getByClass(oDiv,'big_pic')[0];
			var aLiBig = oUlbig.getElementsByTagName('li');
			var nowzIndex=2; //代表现在的索引
			var now = 0;
			oUlSamll.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px'; //设置小图的ul的width值
			oDivL.innerText=now+'/'+aLiSmall.length;//默认值
			oDivTx.innerHTML=arr[0];
			// 左右按钮
			oBtnPrev.onmouseover=oMarke_left.onmouseover=function(){//鼠标移入
				startMove(oBtnPrev,'opacity',100);//鼠标移入让图片可见
			}
			oBtnPrev.onmouseout=oMarke_left.onmouseout=function(){
				startMove(oBtnPrev,'opacity',0);
			}
			oBtnNext.onmouseover=oMarke_right.onmouseover=function(){//鼠标移入
				startMove(oBtnNext,'opacity',100);//鼠标移入让图片可见
			}
			oBtnNext.onmouseout=oMarke_right.onmouseout=function(){
				startMove(oBtnNext,'opacity',0);
			}
			function tab(){
				aLiBig[now].style.zIndex=nowzIndex++;
				for(var i=0;i<aLiSmall.length;i++){
					startMove(aLiSmall[i],'opacity',60);
				}
				startMove(aLiSmall[now],'opacity',100); //让当前的显示100
				aLiBig[now].style.height=0; //设置当前图片高度为0
				startMove(aLiBig[now],'height',320);
				if(now==0){//如果是第一张图片
					startMove(oUlSamll,'left',0);
				}else if(now == aLiSmall.length-1){ //如果是最后一张
					startMove(oUlSamll,'left',-(now-2)*aLiSmall[0].offsetWidth);
				}else{
					startMove(oUlSamll,'left',-(now-1)*aLiSmall[0].offsetWidth);
				}
			}
			
			function tab()
				{
					aLiBig[now].style.zIndex=nowzIndex++;
					
					for(var i=0;i<aLiSmall.length;i++)
					{
						startMove(aLiSmall[i], 'opacity', 60);
					}
					
					startMove(aLiSmall[now], 'opacity', 100);
					
					aLiBig[now].style.height=0;
					startMove(aLiBig[now], 'height', 320);
					
					if(now==0)
					{
						startMove(oUlSamll, 'left', 0);
					}
					else if(now==aLiSmall.length-1)
					{
						startMove(oUlSamll, 'left', -(now-2)*aLiSmall[0].offsetWidth);
					}
					else
					{
						startMove(oUlSamll, 'left', -(now-1)*aLiSmall[0].offsetWidth);
					}
					oDivTx.innerHTML=arr[now];
					oDivL.innerText=now+'/'+aLiSmall.length;
				}
			//点击
			oBtnPrev.onclick=function(){
				now--; 
				if(now==-1){
					now = aLiSmall.length-1;
				}
				tab();//切换图片
			};
			oBtnNext.onclick=function(){
				now++;
				if(now==aLiSmall.length){
					now=0;
				}
				tab();
			};
			// 自动轮播图片
			var timer = setInterval(oBtnNext.onclick,2000); //开启自动
			oDiv.onmouseover=function(){
				clearInterval(timer);
			}
			oDiv.onmouseout=function(){
				timer=setInterval(oBtnNext.onclick,2000);
			}
		};

		</script>
	</head>
	<body>
		<div id="playimages" class="play">
			<ul class='big_pic'> <!-- 大图 -->
				<div class="prev"></div> <!-- 上一个 -->
				<div class="next"></div> <!-- 下一个 -->
				<div class="text">加载图片说明</div>
				<div class="length">计算图片数量</div>
				<a href="javascript:;" class="mark_left"></a><a class="mark_right" href="javascript:;"></a>
				<div class="bg"></div>
				<li style="z-index: 1;" ><img src="images/1.jpg" alt="1.jpg"></li>
				<li><img src="images/2.jpg" alt="2.jpg"></li>
				<li><img src="images/3.jpg" alt="3.jpg"></li>
				<li><img src="images/4.jpg" alt="4.jpg"></li>
				<li><img src="images/5.jpg" alt="5.jpg"></li>
				<li><img src="images/6.jpg" alt="6.jpg"></li>
			</ul>
			<div class="small_pic"> <!-- 小图 -->
			<ul style="width: 390px;">
				<li style="filter: 100; opacity:1;"><img src="images/1.jpg" alt=""></li>
				<li><img src="images/2.jpg" alt="2.jpg"></li>
				<li><img src="images/3.jpg" alt="3.jpg"></li>
				<li><img src="images/4.jpg" alt="4.jpg"></li>
				<li><img src="images/5.jpg" alt="5.jpg"></li>
				<li><img src="images/6.jpg" alt="6.jpg"></li>
			</ul>
			</div>
		</div>
	</body>
</html>

有兴趣的，遇到困难可以留言。