<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: ;
margin: ;
list-style: none;
border: ;
} .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: ;
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: yellow;
} #arr {
display: none;
} #arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: %;
margin-top: -20px;
background: #;
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="data:images/1.jpg" width="" height=""/></li>
<li><img src="data:images/2.jpg" width="" height=""/></li>
<li><img src="data:images/3.jpg" width="" height=""/></li>
<li><img src="data:images/4.jpg" width="" height=""/></li>
<li><img src="data:images/5.jpg" width="" height=""/></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
var n=;
var $li=$(".screen ul li"); //声明变量减少服务器的请求次数
var $ul=$(".screen ul");
var $oli=$(".screen ol li");
var $arr=$("#arr");
var imgWidth=$li.width();
// var timer=null;
//克隆第一个图片
var oLi=$li.eq().clone(true);
//把克隆的图片加到ul后面
$ul.append(oLi);
var size=$li.size(); //获取li的个数
// console.log(size);
//滑过数字小图标大图跟着动
$oli.mouseenter(function(){
n=$(this).index();
tab();
})
//点击右箭头移动轮播图
$("#box #arr #right").click(function(){
toRight();
})
//点击左箭头移动轮播图
$("#box #arr #left").click(function(){
toLeft();
}) //指到盒子上左右箭头出现 离开隐藏
$("#box").hover(function(){
$arr.css("display","block");
clearInterval(timer);
},function(){
$arr.css("display","none");
autoPlay();
})
//自动轮播
autoPlay();
function autoPlay(){
timer=setInterval(function(){
toRight();
},)
}
//封装左箭头
function toLeft(){
n--;
if(n<){ $ul.css("left",-size*imgWidth+"px");
n=size-;
}
tab();
};
//封装右箭头
function toRight(){
n++;
if(n>size){
n=;
$ul.css("left",);
}
if(n==size){
$oli.eq().addClass("current").siblings().removeClass("current");
}
tab();
}
//封装移动动画
function tab(){
$ul.stop().animate({left:-imgWidth*n+"px"},);
$oli.eq(n).addClass("current").siblings().removeClass("current");
}
})
</script>
</body>
</html>
