<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '微軟雅黑';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$('box');
//最外層div
var screen = box.children[0];
//相框
var screenWidth = screen.offsetWidth;
//相框的寬度
var ulobj = screen.children[0];
//整個ul
var list = ulobj.children;
//ul里面的每個li
var olobj = screen.children[1];
//ol
var arr = my$('arr');
//獲取左右按鍵
//設置一個全局變量為了后面可以使用
var index = 0;
//根據ui里的li的個數 循環添加ol里面的小按鈕
for (var i = 0; i < list.length; i++) {
//創建一個li
var liobj = document.createElement('li');
//追加到ol里面
olobj.appendChild(liobj);
//設置li的內容
liobj.innerHTML = (i + 1);
//為每個li添加自定義屬性 保存其索引值
liobj.setAttribute("index", i);
//為每個li注冊鼠標進入事件
liobj.onmouseover = function () {
//排他功能
for (var j = 0; j < olobj.children.length; j++) {
//移除全部li的樣式
olobj.children[j].removeAttribute('class');
}
//設置當前的li的樣式
this.className = 'current';
//獲取當前li的索引值
index = this.getAttribute("index");
//調用動畫函數 傳入要移動的ul 和 位置（移動的是負數）
animate(ulobj, -index * screenWidth);
};
}
//設置ol中第一個li有背景顏色
olobj.children[0].className = "current";
//克隆一個第一個li到最后cloneNode() 方法克隆所有屬性以及它們的值。
// 如果您需要克隆所有后代，請把 deep 參數設置 true，否則設置為 false。
ulobj.appendChild(list[0].cloneNode(true));
//自動播放
var timeId = setInterval(clickHandle, 1000);
//鼠標進入
box.onmouseover = function () {
//顯示兩邊的按鈕
arr.style.display = 'block';
//鼠標進入時候就清理定時器
clearInterval(timeId);
}
//鼠標離開
box.onmouseout = function () {
//隱藏兩邊的按鈕
arr.style.display = 'none';
//鼠標離開時重新設置定時器（自動播放 其他就是右鍵的點擊事件）
timeId = setInterval(clickHandle, 1000);
}
//為右鍵注冊點擊事件
my$('right').onclick = clickHandle
//右鍵事件函數
function clickHandle() {
//先判斷當前的索引值是否等於5 那就說明已經看到最后一張（也是第一張）那么立刻將索引重置為第一張 且將當前的最后一張切換到第一張
if (index == list.length - 1) {
index = 0;
ulobj.style.left = 0 + "px";
}
//索引加1
index++;
//移動圖片
animate(ulobj, -index * screenWidth);
//判斷索引是不是第五個 如果是就說明是最后一張也是第一張 把最后一個索引的樣式取消 設置第一個的樣式
if (index == list.length - 1) {
olobj.children[olobj.children.length - 1].className = "";
olobj.children[0].className = 'current';
} else {
//索引不是最后一個就正常按照索引值設置樣式
for (var j = 0; j < olobj.children.length; j++) {
olobj.children[j].removeAttribute('class');
}
olobj.children[index].className = 'current';
}
}
//為左鍵注冊事件
my$("left").onclick = function () {
//判斷是不是第一張圖 如果是就立刻把索引改完最后一張的索引（最后一張與第一張一樣）切換成最后一張
if (index == 0) {
index = 5;
ulobj.style.left = -index * screenWidth + "px";
}
index--;
animate(ulobj, -index * screenWidth);
//正常設置樣式
for (var j = 0; j < olobj.children.length; j++) {
olobj.children[j].removeAttribute('class');
}
//設置當前索引對於的樣式
olobj.children[index].className = 'current';
}
//設置任意的一個元素,移動到指定的目標位置
function animate(element, target) {
clearInterval(element.timeId);
//定時器的id值存儲到對象的一個屬性中
element.timeId = setInterval(function () {
//獲取元素的當前的位置,數字類型
var current = element.offsetLeft;
//每次移動的距離
var step = 10;
step = current < target ? step : -step;
//當前移動到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定時器
clearInterval(element.timeId);
//直接到達目標
element.style.left = target + "px";
}
}, 5);
}
</script>
</body>
</html>
