JS图片播放器

JS图片播放器

转载请注明来源 http://blog.csdn.net/ei__nino/article/details/9088289

<!-- pictures album -->
<!-- Copyright 2013,  EI Nino-->
<!-- Email: [email protected]>

1,图片opacity透明度变化

2,按照相册的理念,唯一指定img为相册展示体,对该img进行处理

3,opacity透明度计算问题

4,setInterval控制图片停留时间和变化快慢。

5,大多数还是能通过CSS来调节,必要的地方采用JS

6,图片选择使用LI的附加属性,同时方便以后扩展


最佳浏览:Google chrome


演示地址:http://www.einino.net/

<!DOCTYPE html>
<head>
<meta  charset=utf-8 />
<title>Show Pics</title>
<script type="text/javascript" src='./nino.js' ></script>
<style type="text/css" >
#container{ width:1000px; margin:10px auto;}
</style>

</head>

<body>
<div id="container" >
<!-- pictures album start -->
<div id="album" >
<img id='album-item' src="./1.jpg" alt='1' />
<div id='album-bottom'>
<div id='album-item-title'></div>
<ul id='album-list' >
<li src='./1.jpg' title='偶是美女' name='1' >1</li>
<li  src='./2.jpg' title='大美女' name='2' >2</li>
<li  src='./3.jpg' title='不喜欢你' name='3' >3</li>
<li  src='./4.jpg' title='没感觉' name='4'  >4</li>
</ul>
</div>
</div>
<!-- pictures album end -->
<!-- Copyright 2013,  EI Nino-->
<!-- Email: [email protected]>
<style type="text/css" >

#album{ width:400px; background:#000; margin:0 auto; overflow:hidden; box-shadow:10px 10px 20px;}
#album-item{ width:100%; height:100%;margin:0; padding:0; overflow:hidden;}
#album-bottom{  width:100%;  opacity:0.8; background:#5a9;  text-align:center; overflow:hidden;color:#FFF;  margin-top:-27px; padding:0;}
#album-list{  padding:0;margin:0; float:right; overflow:hidden; }
#album-list li{ cursor:pointer;margin:2px;padding:0;  text-align:center; font-family:'Arial'; color:#FFF; float:left; background:#e8f; width:20px; height:20px; list-style:none; border-radius:10px; }
#album-list li:hover{ background:#FFC0CB; color:#999; }
#album-item-title{ text-align:left; padding-left:5px; font-family:'Microsoft Yahei'; font-size:14px;float:left; width:50%; height:20px; }
</style>
<script type="text/javascript" >
/*
@speed 显示速度
Copyright 2013,  EI Nino
Email: [email protected]
*/
var speed = 3000;//显示速度毫秒
var album = document.getElementById('album');
var albumList = document.getElementById('album-list');
var albumItem = document.getElementById('album-item');
var imgs=new Array();
var imgs_cache =new Array();
var albumItemTitle = document.getElementById('album-item-title');
var index=0;
for(var i in albumList.childNodes)
{
	if(albumList.childNodes[i].nodeName=="LI")
	{
		imgs.push(albumList.childNodes[i]);
		imgs_cache[i] = new Image();
		imgs_cache[i].src = albumList.childNodes[i].getAttribute('src');
		albumList.childNodes[i].addEventListener('click',function(){
			index=parseFloat(this.getAttribute('name'))-1;
			selectPic();
		});
	}
}
selectPic();
setInterval(clockPics,speed);
function selectPic(){
	for(var ii in imgs)
	{
		imgs[ii].style.background= '';//#e8f
		imgs[ii].style.color='';//#FFF
	}
	var i = index;
	imgs[i].style.background= '#9ea';//#e8f
	imgs[i].style.color='#666';//#FFF
	imgs[i].style.fontWeight='bold';
	albumItem.setAttribute('src',imgs[index].getAttribute("src"));
	albumItem.setAttribute('alt',imgs[index].getAttribute("title"));
	albumItemTitle.innerHTML=imgs[index].getAttribute("title");
}

function clockPics(){
	albumItem.style.opacity=1;
	var interval_1= setInterval(function(){
		if(index >= imgs.length||index<0){
			index =0;
		}
		albumItem.style.opacity=Math.ceil(10*parseFloat(albumItem.style.opacity)-1)/10; 
		if(albumItem.style.opacity<=0)
		{
			clearInterval(interval_1);
			selectPic();
			var interval_2= setInterval(function(){
				albumItem.style.opacity=Math.floor(10*parseFloat(albumItem.style.opacity)+1)/10; 
				if(albumItem.style.opacity>=1)
					{clearInterval(interval_2);}
				
			},50);
		}
	},50);
	index++;
}

</script>

</div>
</body>

</html>

最终效果:

JS图片播放器_第1张图片


变种效果:

1,

JS图片播放器_第2张图片

2.


3,

JS图片播放器_第3张图片

你可能感兴趣的:(JS图片播放器)