<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<!--[if lt IE 9]>
<script src="js/libs/html5shiv.min.js"></script>
<script src="js/libs/respond.min.js"></script>
<![endif]-->
<style type="text/css">
html,
body {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
width: 1125px;
height: 352px;
margin: 0 auto;
}
.swiper-inner {
position: relative;
width: 100%;
height: 352px;
line-height: 352px;
text-align: center;
overflow: hidden;
}
.swiper-inner img {
display: none;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.dots {
position: absolute;
width: 100%;
left: 0;
margin-top: -40px;
text-align: center;
list-style: none;
}
.dots span {
display: inline-block;
width: 40px;
height: 6px;
background: #006fc7;
margin-left: 5px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor: pointer;
}
.dots .active {
opacity: 1;
filter: alpha(opacity=100);
}
.pre,
.next {
position: absolute;
top: 50%;
width: 28px;
height: 48px;
margin-top: -24px;
text-align: center;
cursor: pointer;
}
.pre:hover,
.next:hover {
opacity: 0.75;
filter: alpha(opacity=75);
}
.pre {
left: 30px;
background: url(img/pic_prev.cur);
}
.next {
right: 30px;
background: url(img/pic_next.cur);
}
</style>
</head>
<body>
<div class="container">
<div class="swiper-inner" id="swiper-inner">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
<div class="dots" id="dots">
<span class="active dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="pre" id="pre"></div>
<div class="next" id="next"></div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
var $swiperInner = $('#swiper-inner'),
$img = $swiperInner.find('img'),
$dotSpans = $('#dots span'),
len = $img.length,
c = 0, //当前显示的图片位置
timmer;
function domInit(c) {
$img.eq(c).fadeIn(300).siblings().fadeOut(300);
$dotSpans.eq(c).addClass('active').siblings().removeClass('active');
}
function autoRun() {
timmer = setInterval(function() {
c++;
c = c >= len ? 0 : c;
domInit(c);
}, 3000);
}
//显示第一张图片
$img.eq(0).fadeIn(300);
//自动播放
autoRun();
//鼠标移入到$swiperInner时取消自动播放，离开时继续自动播放
$swiperInner.mouseenter(function() {
clearInterval(timmer);
});
$swiperInner.mouseleave(function() {
autoRun();
});
//鼠标移入到$dotSpans上，取消自动播放，显示对应的图片
$dotSpans.mouseenter(function() {
clearInterval(timmer);
c = $(this).index();
domInit(c);
});
//上一张
$('#pre').click(function() {
clearInterval(timmer);
c--;
c = c < 0 ? len - 1 : c;
domInit(c);
});
//下一张
$('#next').click(function() {
clearInterval(timmer);
c++;
c = c >= len ? 0 : c;
domInit(c);
});
</script>
</body>
</html>
