html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h3>jQuery实现轮播图</h3>
<div class="main">
<div class="box" id="box">
<!-- 图片区域 bagin -->
<a href="#">
<div class="img img1"></div>
</a>
<a href="#">
<div class="img img2"></div>
</a>
<a href="#">
<div class="img img3"></div>
</a>
<a href="#">
<div class="img img4"></div>
</a>
<a href="#">
<div class="img img5"></div>
</a>
<!-- end -->
<!--上一张-->
<span class="pre" id="prev">
<a href="#"><img src="img/pre2.png"/></a>
</span>
<!--下一张-->
<span class="pre" id="next" style="right: 0;">
<a href="#"><img src="img/pre.png"/></a>
</span>
<!--小圆点-->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</body>
</html>
css部分:
/*样式重置*/
* {
margin: 0;
padding: 0;
}
body {
font-family: Microsoft YaHei;
}
li {
list-style: none;
}
/*main bagin*/
h3{
text-align: center;
margin-top: 20px;
}
.main {
width: 1224px;
height: 480px;
margin: 20px auto;
}
/*end*/
/*box bagin*/
.box {
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
padding-top: 10px;
padding-left: 12px;
}
/*end*/
/*图片共同样式 bagin*/
.img {
width: 1200px;
height: 460px;
background: no-repeat;
}
/*end*/
.img1 {
background-image: url(../img/1.jpg);
}
.img2 {
background-image: url(../img/2.jpg);
}
.img3 {
background-image: url(../img/3.jpg);
}
.img4 {
background-image: url(../img/4.jpg);
}
.img5 {
background-image: url(../img/5.jpg);
}
/*箭头共同样式 bagin*/
.pre{
display: inline-block;
width:40px;
height:60px;
position: absolute;
top: 50%;
text-align: center;
line-height: 76px;
}
/*end*/
/*移入箭头的样式*/
span.active{
background: rgba(0,0,0,0.5);
}
ul {
position: absolute;
top:93%;
right: 20px;
}
li{
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 10px;
margin-left: 8px;
cursor: pointer;
}
/*点击小圆点时的样式*/
li.active{
}
js部分：
$(function() {
var timer = null,
index = 0,
len=$("#box div").length;
//console.log(len)
//移出函数，图片自动轮播
$("#box").mouseout(function(){
clearInterval(timer)
autoimg()
})
//移入函数，图片停止轮播
$("#box").mouseover(function(){
clearInterval(timer)
})
//页面打开自执行
$("#box").mouseout()
//下一张点击事件
$("#next").click(function(){
index++
if (index>len-1) {
index=0
}
tab()
})
//上一张点击事件
$("#prev").click(function(){
index--
if (index<0) {
index=len-1
}
tab()
})
//上下张移入移出事件 bagin
$("#next").mouseover(function(){
$(this).addClass("active")
})
$("#next").mouseout(function(){
$(this).removeClass("active")
})
$("#prev").mouseover(function(){
$(this).addClass("active")
})
$("#prev").mouseout(function(){
$(this).removeClass("active")
})
//end
//小圆点点击事件
$("ul li").click(function(){
index=$(this).index()
tab()
})
function tab(){
$("#box div").hide().eq(index).show()
$("ul li").removeClass().eq(index).addClass("active")
}
//时间函数
function autoimg(){
timer=setInterval(function(){
index++
if (index>len-1) {
index=0
}
tab()
},2000)
}
})