<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>
//獲取最外面的div
var box = my$("box");
//獲取相框
var screen = box.children[0];
//獲取相框的寬度
var imgWidth = screen.offsetWidth;
//獲取ul
var ulObj = screen.children[0];
//獲取ul中的所有的li
var list = ulObj.children;
//獲取ol
var olObj = screen.children[1];
//焦點的div
var arr = my$("arr");
var pic = 0;//全局變量
//創(chuàng)建小按鈕----根據(jù)ul中的li個數(shù)
for (var i = 0; i < list.length; i++) {
//創(chuàng)建li標(biāo)簽,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每個ol中的li標(biāo)簽上添加一個自定義屬性,存儲索引值
liObj.setAttribute("index", i);
//注冊鼠標(biāo)進入事件
liObj.onmouseover = function () {
//先干掉所有的ol中的li的背景顏色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//設(shè)置當(dāng)前鼠標(biāo)進來的li的背景顏色
this.className = "current";
//獲取鼠標(biāo)進入的li的當(dāng)前索引值
pic = this.getAttribute("index");
//移動ul
animate(ulObj, -pic * imgWidth);
};
}
//設(shè)置ol中第一個li有背景顏色
olObj.children[0].className = "current";
//克隆一個ul中第一個li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自動播放
var timeId= setInterval(clickHandle,1000);
//鼠標(biāo)進入到box的div顯示左右焦點的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠標(biāo)進入廢掉之前的定時器
clearInterval(timeId);
};
//鼠標(biāo)離開到box的div隱藏左右焦點的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠標(biāo)離開自動播放
timeId= setInterval(clickHandle,1000);
};
//右邊按鈕
my$("right").onclick =clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中l(wèi)i的個數(shù)-1的值,此時頁面顯示第六個圖片,而用戶會認(rèn)為這是第一個圖,
//所以,如果用戶再次點擊按鈕,用戶應(yīng)該看到第二個圖片
if (pic == list.length - 1) {
//如何從第6個圖,跳轉(zhuǎn)到第一個圖
pic = 0;//先設(shè)置pic=0
ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認(rèn)位置
}
pic++;//立刻設(shè)置pic加1,那么此時用戶就會看到第二個圖片了
animate(ulObj, -pic * imgWidth);//pic從0的值加1之后,pic的值是1,然后ul移動出去一個圖片
//如果pic==5說明,此時顯示第6個圖(內(nèi)容是第一張圖片),第一個小按鈕有顏色,
if (pic == list.length - 1) {
//第五個按鈕顏色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一個按鈕顏色設(shè)置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按鈕的背景顏色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
//左邊按鈕
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//設(shè)置小按鈕的顏色---所有的小按鈕干掉顏色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//當(dāng)前的pic索引對應(yīng)的按鈕設(shè)置顏色
olObj.children[pic].className = "current";
};
//設(shè)置任意的一個元素,移動到指定的目標(biāo)位置
function animate(element, target) {
clearInterval(element.timeId);
//定時器的id值存儲到對象的一個屬性中
element.timeId = setInterval(function () {
//獲取元素的當(dāng)前的位置,數(shù)字類型
var current = element.offsetLeft;
//每次移動的距離
var step = 10;
step = current < target ? step : -step;
//當(dāng)前移動到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定時器
clearInterval(element.timeId);
//直接到達目標(biāo)
element.style.left = target + "px";
}
}, 10);
}
