當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS图片播放器
JS圖片播放器
轉載請注明來源?http://blog.csdn.net/ei__nino/article/details/9088289
<!-- pictures album -->
<!-- Copyright 2013, ?EI Nino-->
<!-- Email: Jinyachen@gmail.com-->
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: Jinyachen@gmail.com--> <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: Jinyachen@gmail.com */ 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= '';//#e8fimgs[ii].style.color='';//#FFF}var i = index;imgs[i].style.background= '#9ea';//#e8fimgs[i].style.color='#666';//#FFFimgs[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>最終效果：
變種效果:
1,
2.
3,
總結
- 上一篇： linux 系统如何自动关机和开机
- 下一篇： 荀令衣香--JavaScript全对象方