### 仿 Flash 圖片展示
- 效果思路
- 兩邊的按鈕：淡入淡出
- 大圖下拉：層級、高度變化
- 下方的 `li` ：多物體淡入淡出
- 下方的 `ul` ：位置計算
- 左右按鈕
- 淡入淡出
- 鼠標移動到按鈕上，按鈕會消失
- 層級問題
- 按鈕和遮罩上都得加上事件
- 下方 `li` 效果
- 點擊切換大圖：選項卡
- `li` 淡入淡出：移入移出
- `ul` 移動：位置計算
- 大圖片切換
- 圖片層級：`z-Index` 一直 +1
- 圖片下拉效果（運動框架）
- 可以改為淡入淡出
- 加入自動播放
- 和選項卡一樣
- 代碼：
```HTML
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>仿Flash圖片展示</title>
<link rel="stylesheet" href="../reset.css">
<script src="./lib/move.js"></script>
<style>
body {
width: 100%;
height: 100%;
background-color: cornsilk;
}
li {
float: left;
}
/* 居中 div */
#div_center {
margin: 20px auto;
width: 640px;
height: 450px;
}
/* 定位 div */
#div_position {
width: 640px;
height: 450px;
overflow: hidden;
background-color: rgb(70, 70, 70);
position: absolute;
}
/* 大圖樣式 */
#div_pic {
width: 640px;
height: 360px;
overflow: hidden;
position: relative;
}
.ul_pic {
position: absolute;
}
.li_pic {
position: absolute;
}
.li_pic img{
width: 640px;
height: 360px;
}
/* 左右鍵樣式 */
.ul_btn {
top: 0px;
width: 640px;
height: 360px;
position: absolute;
float: left;
}
.slider_btn_left, .slider_btn_right {
width: 150px;
height: 360px;
}
.slider_btn_right {
float: right;
}
.slider_btn_left img{
padding: 150px 105px 150px 10px ;
position: relative;
width: 35px;
height: 60px;
opacity: 0;
filter: alpha(opacity=0);
float: left;
}
.slider_btn_right img{
padding: 150px 10px 150px 105px ;
position: relative;
width: 35px;
height: 60px;
opacity: 0;
filter: alpha(opacity=0);
float: right;
}
/* 小圖樣式 */
#div_thumbnail {
width: 620px;
background-color: rgb(70, 70, 70);
margin: 0 10px 0 5px;
overflow: hidden;
position: relative;
}
.ul_thumbnail {
width: 640px;
height: 90px;
}
.li_thumnali {
opacity: 0.5;
filter: alpha(opacity=50);
}
.li_thumnali img{
padding: 10px 0px 10px 10px;
width: 125px;
height: 70px;
}
/* 圖片文字欄 */
.ul_txt {
width: 640px;
height: 20px;
position: absolute;
top: 340px;
}
.li4_background {
width: 640px;
height: 20px;
top: 0px;
background-color: rgb(0, 0, 0);
opacity: 0.5;
filter: alpha(opacity=50);
}
.li4_introduction {
top: -17px;
margin-left: 10px;
width: 500px;
position: relative;
color: rgb(255, 255, 255);
filter: alpha(opacity=80);
opacity: 0.8;
}
.li4_sum_num {
width: 120px;
top: -17px;
left: 10px;
position: relative;
color: rgb(255, 255, 255);
filter: alpha(opacity=80);
opacity: 0.8;
}
</style>
<script>
window.onload = function () {
// 封裝 getElementById
function get(id) {
return document.getElementById(id);
}
// 封裝 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 封裝 getByClassName 方法
function getByClassName(oParent, sClass) {
var aResult = new Array();
var aEle = document.getElementsByTagName('*');
for (var i in aEle) {
if (aEle[i].className === sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
// 左右箭頭切換圖片
// 獲取箭頭所在 ul
var oDiv_position = get('div_position');
var ul_btn = getByClassName(oDiv_position[1], 'ul_btn')[0];
// 獲取 li
var li_btn_left = getByClassName(ul_btn, 'slider_btn_left')[0];
var li_btn_right = getByClassName(ul_btn, 'slider_btn_right')[0];
// 獲取 img
var left_icon = getByClassName(li_btn_left, 'left_icon')[0];
var right_icon = getByClassName(li_btn_right, 'right_icon')[0];
// 鼠標移入/移出 顯示/隱藏
li_btn_left.onmouseover = left_icon.onmouseover = function () {
startMove(left_icon, 'opacity', 30);
}
li_btn_left.onmouseout = left_icon.onmouseout = function () {
startMove(left_icon, 'opacity', 0);
}
li_btn_right.onmouseover = right_icon.onmouseover = function () {
startMove(right_icon, 'opacity', 30);
}
li_btn_right.onmouseout = right_icon.onmouseout = function () {
startMove(right_icon, 'opacity', 0);
}
// 獲取大圖 class li
var ul_pic = getByClassName(oDiv_position[1], 'ul_pic')[0];
var oli_pic = getByClassName(ul_pic, 'li_pic');
var oImg = gets('img');
// 獲取縮略圖 class li
var div_thumbnail = get('div_thumbnail');
var ul_thumbnail = getByClassName(div_thumbnail, 'ul_thumbnail')[0];
var oli_thumnali = getByClassName(ul_thumbnail, 'li_thumnali');
var pic_index = 0;
var index = 0;
var z = 1;
// 縮略圖鼠標移入高亮，移出恢復,并注冊index 綁定大圖
for (var i in oli_thumnali) {
oli_thumnali[i].index = i;
oli_pic[i].index = i;
// 鼠標移入
oli_thumnali[i].onmouseover = function () {
startMove(this, 'opacity', 100);
}
// 鼠標移出 如果是當前顯示則不執行
oli_thumnali[i].onmouseout= function () {
if (oli_pic[this.index].style.zIndex != z) {
startMove(this, 'opacity', 50);
}
}
// 點擊小圖片顯示大圖
oli_thumnali[i].onclick = function () {
console.log(pic_index,parseInt(this.index))
// 如果點擊 this.index > 2 && this.index - pic_index > 0 則向右移
if (parseInt(this.index) > 2 && this.index - pic_index >0) {
pic_index = parseInt(this.index);
// 下一張會 ++ 先--
pic_index--;
right_icon.onclick();
} // 如果 this.index > 2 && this.index - pic_index < 0 則向左移
else if (this.index > 0 && this.index - pic_index < 0) {
pic_index = parseInt(this.index);
// 下一張會 -- 先++
pic_index++;
left_icon.onclick();
} else {
pic_index = parseInt(this.index);
tab();
}
}
// 讓第一個圖片顯示
if (oli_pic[i].style.zIndex == z) {
startMove(oli_thumnali[i], 'opacity', 100);
}
}
// 鼠標點擊按鈕 上一張/下一張
left_icon.onclick = function () {
// 是否 <0
if (0 <= pic_index - 1) {
// console.log('1~length-1:',pic_index)
pic_index--;
if (0 < pic_index && pic_index <= oli_thumnali.length - 1) {
// 1~length-1
startMove(ul_thumbnail, 'marginLeft', -(pic_index-1)*li_thumbnali_width);
tab();
} else {
// 0
tab();
}
} else {
// <0 重置pic_index循環播放
// console.log('0:',pic_index)
pic_index = oli_thumnali.length - 1;
startMove(ul_thumbnail, 'marginLeft', -(pic_index-2)*li_thumbnali_width);
tab();
}
}
right_icon.onclick = function () {
// 判斷下一張是否大于總數
if (pic_index + 1 < oli_thumnali.length) {
pic_index++;
// console.log('1~oli_thumnali.length-1：',pic_index);
if (2 < pic_index && pic_index <= oli_thumnali.length - 1) {
startMove(ul_thumbnail, 'marginLeft', -(pic_index-2)*li_thumbnali_width);
tab();
} else {
tab();
}
} else {
// 大于 oli_thumnali.length-1 跳到第一張
pic_index = 0;
startMove(ul_thumbnail, 'marginLeft', pic_index*li_thumbnali_width);
tab();
}
}
function tab() {
// 判斷是否是當前顯示圖片
if (oli_pic[pic_index].style.zIndex != z) {
// 全部圖片半透明
for (var j in oli_thumnali) {
startMove(oli_thumnali[j], 'opacity', 50);
}
// 顯示當前點擊圖片
startMove(oli_thumnali[pic_index], 'opacity', 100);
// 顯示當前index對應大圖
oli_pic[pic_index].style.zIndex = ++z;
// 顯示文字的按鈕
ul_btn.style.zIndex = ul_txt.style.zIndex = z;
// 隱藏大圖 再用動畫顯示
oImg[pic_index].style.height = 0;
startMove(oImg[pic_index],'height', 360);
// 顯示當前圖片介紹
introduction.innerHTML = arr[pic_index];
sum_num.innerHTML = parseInt(pic_index) + 1 + '/' + oli_thumnali.length;
}
}
// 自動播放
oDiv_position.timer = setInterval(right_icon.onclick, 2000);
oDiv_position.onmouseover = function () {
clearInterval(oDiv_position.timer);
}
oDiv_position.onmouseout = function () {
clearInterval(oDiv_position.timer);
oDiv_position.timer = setInterval(right_icon.onclick, 2000);
}
// 設置 ul_thumbnail 的寬度
var li_thumbnali_width = oli_thumnali[0].offsetWidth;
ul_thumbnail.style.width = oli_thumnali.length * oli_thumnali[0].offsetWidth + 'px';
// 設置文字說明
var arr = new Array('雪山','峽谷','懸崖','巖壁','海岸','雪覆蓋的懸崖','雪山','峽谷','懸崖','巖壁','海岸','雪覆蓋的懸崖');
// 獲取文字說明 li
var ul_txt = getByClassName(oDiv_position[1], 'ul_txt')[0];
var introduction = getByClassName(ul_txt, 'introduction')[0];
var sum_num = getByClassName(ul_txt, 'sum_num')[0];
sum_num.innerHTML = pic_index + 1 + '/' + oli_thumnali.length;
introduction.innerHTML = arr[pic_index];
}
</script>
<body>
<div id="div_center">
<div id="div_position">
<div id="div_pic">
<ul class="ul_pic">
<li class="li_pic" style="z-index:1"><img src="./images/album/1.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/3.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/4.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/5.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/6.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/5.jpeg" alt=""></li>
</ul>
</div>
<ul class="ul_btn" style="z-index:1">
<li class="slider_btn_left"><img class="left_icon" src="./images/images/slider_btn_icon_left.png" alt=""></li>
<li class="slider_btn_right"><img class="right_icon" src="./images/images/slider_btn_icon_right.png" alt=""></li>
</ul>
<ul class="ul_txt" style="z-index:1">
<li class="li4_background"></li>
<li class="li4_introduction">圖片說明：<span class="introduction">introduction</span></li>
<li class="li4_sum_num">圖片位置：<span class="sum_num"></span></li>
</ul>
<div id="div_thumbnail">
<ul class="ul_thumbnail">
<li class="li_thumnali"><img src="./images/album/1.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/3.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/4.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/5.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/6.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/5.jpeg" alt=""></li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
- ```js
// ./lib/move.js
// 封裝獲取計算后元素樣式函數，返回小數
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, '') [name];
}
}
// 任意值運動框架
function startMove(obj, name, iTarget ) {
clearInterval(obj.timer);
obj.timer = setInterval(move, 30);
function move() {
var current = 0;
if (name === 'opacity') {
// 用 parseFloat 保留小數并去掉后面 px ，從左至右提取數字，遇到不是數字跳出
// Math.round() 四舍五入取整
current = Math.round(parseFloat(getStyle(obj, name))*100);
} else {
// 用 parseInt 去掉后面 px ，從左至右提取數字，遇到不是數字跳出
current = parseInt(getStyle(obj, name));
}
var speed = (iTarget - current)/3;
if (speed < 0) {
speed = Math.floor(speed);
} else {
speed = Math.ceil(speed);
}
if (iTarget === current) {
clearInterval(obj.timer);
} else {
if (name === 'opacity') {
obj.style[name] = (current + speed)/100;
obj.style.filter = "alpha("+[name]+ "=" + (current + speed) + ")";
} else {
obj.style[name] = current + speed + 'px';
}
}
// console.log('iTarget',iTarget,'current',current,'getStyle',getStyle(obj, name),speed)
}
}
```
- 注意：不讓子元素繼承父元素的 `opacity ` 屬性
- 使用 `rgba(R,G,B,opacity)` 間接的設定 `opacity` 的值，這個屬性不會向下繼承
- 或者把 `opacity` 屬性放到同級元素實現
- 注意：父級使用相對定位，子級才能在范圍內絕對定位
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一個 JS 特效：鼠標提示框
- 網頁換膚和 if 判斷
- 函數傳參
- 循環 while 和 for
- 導航欄選項卡
- JS 簡易日歷
- JavaScript 基礎
- JavaScript 組成
- 變量類型
- 變量類型轉換
- 變量的作用域和閉包
- 命名規范
- 運算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函數返回值
- 函數傳參與行間樣式
- 數組基礎操作
- 定時器的使用
- 定時器的作用
- 數碼時鐘
- Date 對象其它方法
- 延時提示框
- 無縫滾動
- DOM基礎應用
- DOM 基礎
- DOM 節點
- 操作元素屬性
- DOM 元素靈活查找
- DOM 操作應用
- 創建、插入和刪除元素
- 文檔碎片
- DOM操作應用高級
- 表格標簽
- 表格應用
- 表單應用
- JS 運動基礎
- 運動基礎
- 運動框架及應用
- 緩沖運動
- 運動的停止條件
- JS 運動應用
- 多物體運動框架
- 任意值運動框架
- 仿 Flash 圖片展示
- JS 運動中級
- 鏈式運動框架
- 完美運動框架
- 運動框架總結
- 運動框架應用
- JS事件基礎
- Event 對象和事件
- 鼠標事件
- 鍵盤事件
- JS 事件中級
- 默認事件
- 拖拽
- JS 事件高級應用
- 事件綁定
- 高級拖拽
- 自定義滾動條
- Ajax 基礎
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中級
- 編寫 Ajax
- Ajax 數據
- JS 面對對象基礎
- 面對對象是什么
- JS 中的面對對象
- 第一個面對對象的程序
- 工廠方式
- 原型：Prototype
- 面對對象編程方式
- JS 面對對象實例
- 面對對象的選項卡
- JS 面對對象高級
- Json 方式的面向對象
- 拖拽和繼承
- 使用繼承
- 系統對象
- BOM 應用
- BOM 基礎
- 尺寸及坐標
- 常用方法和事件
- COOKIE 基礎與應用
- 什么是 cookie
- 使用 cookie
- JS 中的正則表達式
- 正則表達式基礎
- 字符串與正則配合
- 字符串
- 量詞
- 常用正則例子
- JS Template 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符