效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 200px;
padding:5px;
border:1px solid #000;
margin:100px auto;
}
#inner{
width: 500px;
height: 200px;
position:relative;
overflow:hidden;
}
ul{
width:600%;
list-style:none;
position:absolute;
}
ul>li{
float:left;
width: 500px;
}
ol{
position:absolute;
list-style:none;
right:30px;
bottom:20px;
}
ol>li{
float:left;
width: 20px;
height: 20px;
line-height: 20px;
border:1px solid #000;
border-radius:20px;
text-align:center;
margin-right:15px;
cursor:pointer;
}
span {
display: inline-block;
width: 30px;
height: 60px;
line-height: 60px;
text-align: center;
position: absolute;
top: 100px;
margin-top: -30px;
background-color: rgba(0, 0, 0, 0.2);
}
#switch_button{
display: none;
}
#switch_button>span:nth-child(2){
right:0;
}
ol>li.current{
background-color:orange;
color:white;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">
<ul>
<li><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
<li><img src="image/4.jpg" alt=""></li>
<li><img src="image/5.jpg" alt=""></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div id="switch_button">
<span><</span>
<span>></span>
</div>
</div>
</div>
<script>
var box=document.getElementById("box");
var switchButton=document.getElementById("switch_button");
var ul=document.getElementsByTagName("ul")[0];
var moveWitch=ul.children[0].offsetWidth;
var ol=document.getElementsByTagName("ol")[0];
var oliArr=ol.children;
var spanArr=switchButton.children;
var index=0;
var circleIndex=0;
box.onmouseover=function(){
switchButton.style.display="block";
clearInterval(timer)
};
box.onmouseout=function(){
switchButton.style.display="none";
timer=setInterval(autoPlay,2000);
};
ul.appendChild(ul.children[0].cloneNode(true));
var timer=setInterval(autoPlay,2000);
function autoPlay(){
index++;
if(index>ul.children.length-1){
ul.style.left=0;
index=1
}
aa(ul,-index*moveWitch);
circleIndex++;
if(circleIndex>oliArr.length-1){
circleIndex=0;
};
for(var i=0;i<oliArr.length;i++){
oliArr[i].removeAttribute("class");
}
oliArr[circleIndex].setAttribute("class","current")
};
for(var i=0;i<oliArr.length;i++){
oliArr[i].index=i;
oliArr[i].onclick=function(){
// 此处淘宝有bug
if(index==ul.children.length-1){
index=0;
ul.style.left=0;
}
for(var i=0;i<oliArr.length;i++){
oliArr[i].removeAttribute("class")
}
this.setAttribute("class","current");
aa(ul,-this.index*moveWitch);
index=circleIndex=this.index;
}
}
spanArr[0].onclick=function(){
index--;
if(index<0){
index=ul.children.length-2;
ul.style.left=-(ul.children.length-1)*moveWitch+"px";
}
aa(ul,-index*moveWitch);
circleIndex--;
if(circleIndex<0){
circleIndex=oliArr.length-1;
};
for(var i=0;i<oliArr.length;i++){
oliArr[i].removeAttribute("class")
}
oliArr[circleIndex].setAttribute("class","current")
};
spanArr[1].onclick=function(){
autoPlay()
}
function aa(ele,endx){
var speed;
clearInterval(ele.timer);
if(endx>ele.offsetLeft){
speed=10;
}else if(endx<ele.offsetLeft){
speed=-10;
}else{
speed=0;
};
ele.timer=setInterval(function(){
ele.style.left=ele.offsetLeft+speed+"px";
if(Math.abs(endx-ele.offsetLeft)<Math.abs(speed)){
clearInterval(ele.timer);
ele.style.lfet=endx+"px";
}
},20)
}
</script>
</body>
</html>