<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/tools.js"></script>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
width: 520px;
height: 300px;
margin: 50px auto;
background-color: greenyellow;
padding: 10px 0;
position: relative;
/* 裁剪溢出的内容 */
overflow: hidden;
#imgList{
list-style: none;
/* width: 2600px; */
position: absolute;
left: 0;
#imgList li{
float: left;
margin: 0 10px;
#imgList li img{
width: 500px;
height: 300px;
#navDiv{
position: absolute;
z-index: 5;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
#navDiv a{
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
filter: alpha(opacity=50);
#navDiv a:hover{
background-color: black;
</style>
<script>
window.onload = function(){
// 擷取 imgList
var imgList = document.getElementById("imgList");
// 擷取頁面所有圖檔 img 标簽
var imgArr = document.getElementsByTagName("img");
// 設定 imgList 寬度
imgList.style.width = 520 * imgArr.length + 'px';
// 預設顯示圖檔的索引
var index = 0;
// 擷取頁面所有 a 标簽
var allA = document.getElementsByTagName("a");
// 設定預設選中的效果
allA[index].style.backgroundColor = "black"
/**
* 點選超連結 切換圖檔
* */
for(var i=0;i<allA.length;i++){
//
allA[i].num = i;
allA[i].onclick = function(){
// 關閉自動切換的定時器
clearInterval(timer);
// 擷取點選超連結的索引 并為其設定為index
index = this.num;
// 切換圖檔
/**
* 第一張 0 0
* 第二張 1 -520
* 第二張 1 -1040
*/
// imgList.style.left = -520 * index + 'px';
// 修改正在 選中的 a
setA(index);
// 使用move 函數 來切換圖檔
move(imgList,"left",-520 * index,20,function(){
autoChange();
})
}
}
// 開啟自動切換
autoChange();
// 定義一個 自動切換的定時器的辨別
var timer;
// 建立一個函數 用來開啟自動切換圖檔
function autoChange(){
// 開啟一個定時器 用來定時去切換圖檔
timer = setInterval(() => {
// 索引自增
index++;
// 判斷 index 的值
index %= imgArr.length;
// 執行動畫 切換圖檔
// 修改導航點
setA(index);
}, 3000);
// 建立方法設定選中的 a
function setA(index){
// 判斷目前索引是否是最後一張圖檔
if(index >= imgArr.length -1){
// 則将 index 設定為0
index = 0;
// 通過 css 将最後一張切換成第一張
imgList.style.left = 0
}
// 将 所有的a 背景顔色設定為 紅色
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor = "";
// 将選中的 a 設定為 黑色
allA[index].style.backgroundColor = "black";
// 封裝動畫函數
function move(obj, attr, target,speed,callback){
// 關閉上一個定時器
clearInterval(obj.timer);
// 擷取元素目前的位置
var current = parseInt(getStyle(obj,attr));
// 判斷 速度的正負值
// 如果 從 0 向 800 移動時 則 speed 為正
// 如果 從 800 向 0 移動時 則 speed 為負
if(current > target){
// 此時速度為負值
speed = -speed;
// 開始定時器 執行動畫效果
// 向 執行動畫的對象中添加一個timer 屬性 用來儲存它自己的定時器的辨別
obj.timer = setInterval(() => {
// 擷取 box1 原來的left 值
var oldValue = parseInt(getStyle(obj,attr));
// 在 舊值的基礎上增加
var newValue = oldValue + speed;
// 向左移動時 需要判斷 newValue 是否小于 target
// 向右移動時 需要判斷 newValue 是否大于 target
if(speed < 0 && newValue < target || (speed > 0 && newValue > target)){
newValue = target;
// 将新值 設定給box1
obj.style[attr] = newValue + 'px';
// 當元素移動到 800px時， 使其停止執行動畫
if(newValue == target){
clearInterval(obj.timer);
// 動畫執行完畢 調用回調函數
callback && callback();
}
}, 30);
}
/**
* 定義一個函數 用來擷取指定元素的目前的樣式
* 參數
* obj 要擷取樣式的元素
* name 要擷取的樣式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
// 正常浏覽器的方式
return getComputedStyle(obj,null)[name];
}else{
// ie8 的方式
return obj.currentStyle[name];
}
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li> <img src="../img/1.jpg" alt=""> </li>
<li> <img src="../img/2.jpg" alt=""> </li>
<li> <img src="../img/3.jpg" alt=""> </li>
<li> <img src="../img/4.jpg" alt=""> </li>
<li> <img src="../img/5.jpg" alt=""> </li>
</ul>
<!-- 導航按鈕 -->
<div id="navDiv">
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
![第九課：程式設計基礎（一）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)