html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>轮播图</title>
<link href="css/demo2.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo2.js"></script>
</head>
<body>
<div id="dlunbo"><!--整体的div-->
<div id="igs"><!--存放图片-->
<div class="ig"><img src="img/1.jpg" /></div>
<div class="ig"><img src="img/2.jpg" /></div>
<div class="ig"><img src="img/3.jpg" /></div>
<div class="ig"><img src="img/4.jpg" /></div>
<div class="ig"><img src="img/5.jpg" /></div>
</div>
<ul id="tabs"><!--圆圈-->
<li class="bg"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--左右按键-->
<div class="btn btn1"><</div>
<div class="btn btn2">></div>
</div>
</body>
</html>
css:
* {
padding:0px;
margin:0px;
font-family:"微软雅黑";
list-style-type:none;
}
#dlunbo{/*整体居中*/
520px;
height:280px;
position:absolute;
left:50%;
margin-left:-260px;
top:50%;
margin-top:-140px;
}
.ig{/*图片脱离文档流*/
position:absolute;
}
#tabs{/*圆圈*/
position:absolute;
bottom:10px;
left:200px;
}
#tabs li{
20px;
height:20px;
border:solid 2px #fff;
float:left;
margin-left:5px;
border-radius:100%;
}
.btn{/*按钮*/
position:absolute;
30px;
height:50px;
background-color:rgba(0,0,0,0.5);
color:#fff;
text-align:center;
font-size:30px;
top:50%;
margin-top:-25px;
cursor:pointer;
}
/*一个左边 一个 右边*/
.btn1{
left:0px;
}
.btn2{
right:0px;
}
/*圆圈加上背景红色*/
#tabs .bg{
background-color:red;
}
js:
/// <reference path="jquery-1.10.2.min.js" />
var i = 0;
var timer;
$(function () {
$(".ig").eq(0).show().siblings().hide();//第一张图片显示 其余的图片隐藏
StarLunbo();
$("#tabs li").hover(function () {//鼠标放上去的时候 计时器停止 显示当前的图片 以及所对应的红色圆圈
clearInterval(timer);
i = $(this).index();//当前的索引
ShowPicTab();
}, function () {//鼠标离开的时候 继续间隔4秒钟 显示下一张
StarLunbo();
});
$(".btn1").click(function () {//点击左箭头的时候 停止计时器 每点击一次 就显示前一张图片
clearInterval(timer);
i--;
if (i == -1) {//当i小于-1的时候 显示 第5张图片
i = 4;
}
ShowPicTab();
StarLunbo();
});
$(".btn2").click(function () {//点击右箭头的时候 停止计时器 每点击一次 就显示下一张图片
clearInterval(timer);
i++;
if (i == 5) {//当显示到最后一张的时候
i = 0;//显示第一张图片
}
ShowPicTab();
StarLunbo();
});
});
function ShowPicTab() {
$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);//根据i的值 显示图片 其余的隐藏
$("#tabs li").eq(i).addClass("bg").siblings().removeClass("bg");//根据i的值 显示图片的图片加上相对应的背景 其余的移除红色的背景（圆圈）
}
function StarLunbo() {
timer = setInterval(function () {
i++;//间隔4秒 i加1
if (i == 5) {//显示到第6张图片的时候
i = 0;//显示第一张图片
}
$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
$("#tabs li").eq(i).addClass("bg").siblings().removeClass("bg");
}, 4000);
}