<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {margin: 0; padding: 0;}
.box {width: 490px; height: 170px; padding: 5px; border: 1px solid #ccc; margin: 200px auto;}
#inner {width: 490px; height: 170px; overflow: hidden; position: relative;}
ul {list-style: none; width: 600%; position: absolute; left: 0;}
li {float: left;}
.square {position: absolute; bottom: 10px; right: 10px;}
.square span {display: inline-block; width: 16px; height: 16px; margin: 3px; background-color: #fff; text-align: center; border: 1px solid #ccc; line-height: 16px; cursor: pointer;}
.square .current {background-color: darkorange; color: #fff;}
.arrow {display: none;}
.arrow span {position: absolute; top: 50%; margin-top: -23px; width: 20px; height: 46px; background-color: rgba(0,0,0,0.3); color: #FFFFFF; text-align: center; font: 400 15px/46px "consolas";}
.arrow span:hover {background-color: rgba(0,0,0,0.6);}
.arrow .arrow-left {left: 0; border-radius: 0 5px 5px 0;}
.arrow .arrow-right {right: 0; border-radius: 5px 0 0 5px;}
</style>
<script type="text/javascript">
window.onload = function () {
var inner = document.getElementById("inner");
var box = inner.parentNode;
var imgWidth = inner.offsetWidth;
var ul = inner.firstElementChild || inner.firstChild;
var square = inner.children[1];
var arrow = inner.children[2];
var spanArr = arrow.children;
var speed = 15;
for(var i=0; i<ul.children.length; i++){
var newSpan = document.createElement("span");
if(i==0){
newSpan.className = "current";
}
newSpan.innerHTML = i+1;
square.appendChild(newSpan);
}
var newLi = ul.children[0].cloneNode(true);
ul.appendChild(newLi);
var squareArr = square.children;
for(var i=0; i<square.children.length; i++){
squareArr[i].index = i;
squareArr[i].onmouseover = function(){
for(var j=0; j<squareArr.length; j++){
squareArr[j].className = "";
}
this.className = "current";
imgIndex = squareIndex = this.index;
animater(ul,-this.index*imgWidth,speed);
}
}
var timer = null;
var imgIndex = 0;
var squareIndex = 0;
timer = setInterval(autoPlay,1000);
function autoPlay() {
imgIndex++;
if(imgIndex>squareArr.length){
ul.style.left = 0;
imgIndex = 1;
}
animater(ul,-imgIndex*imgWidth,speed);
squareIndex++;
if(squareIndex>squareArr.length-1){
squareIndex = 0
}
for(var j=0; j<squareArr.length; j++){
squareArr[j].className = "";
}
squareArr[squareIndex].className = "current";
}
box.onmouseover = function () {
clearInterval(timer);
arrow.style.display = "block";
}
box.onmouseout = function () {
timer = setInterval(autoPlay,1000);
arrow.style.display = "none";
}
spanArr[0].onclick = function () {
imgIndex--;
if(imgIndex>squareArr.length){
ul.style.left = 0;
imgIndex = 1;
}else if(imgIndex<0){
ul.style.left = -(ul.children.length-1)*imgWidth+"px";
imgIndex = ul.children.length-2;
}
animater(ul,-imgIndex*imgWidth,speed);
squareIndex--;
if(squareIndex>squareArr.length-1){
squareIndex = 0
}else if(squareIndex<0){
squareIndex = squareArr.length-1;
}
for(var j=0; j<squareArr.length; j++){
squareArr[j].className = "";
}
squareArr[squareIndex].className = "current";
}
spanArr[1].onclick = function () {
autoPlay();
}
}
function animater (ele,target,speed) {
clearInterval(ele.timer);
speed = target>ele.offsetLeft ? speed : -speed;
ele.timer = setInterval(function(){
var val = ele.offsetLeft - target;
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val) <= Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},10);
}
</script>
</head>
<body>
<div class="box">
<div id="inner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="square">
</div>
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
</div>
</body>
</html>
网友评论