首页手记 jQuery实现轮播图！！

jQuery实现轮播图！！

标签：

Html/CSS JQuery JavaScript

<html>
<head>
<meta charset="utf-8"/>
<title>jQuery实现轮播图</title>
<style type="text/css">
body,div,ul,li{margin:0;padding:0;}
ul,li,ol{list-style:none;}
li{float:left;}
.scroll{position:relative;}
.scroll-ul{positon:absolute;left:0px;width:1100px;height:390px;overflow:hidden;}
.spot-ul{position:absolute;left:50%;bottom:10px;overflow:hidden;}
.spot-ul li{width:4px;height:4px;border-radius:50px;background:#eee;}
.spot-ul li.on{background:red;}

</style>
</head>
<body>
<div class="scroll">
<ul class="scroll-ul">
<li class="scroll-li"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" /></li>
<li class="scroll-li"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" /></li>
<li class="scroll-li"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg" /></li>
<li class="scroll-li"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/4.jpg" /></li>
</ul>
//图片对应小圆点
<ol class="spot-ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.8.3.min.js"></script>
<script >
$(document).ready(function(){
var length,
currentIndex = 0,
interval,
hasStarted = false,//轮播图是否开始
t = 3000;//轮播时间
length = $('.scroll-li').length;
//将除了第一个其他li隐藏
$('.scroll-li:not(:first)').hide();
//给第一个圆点赋值激活
$('.spot-ul li:first').addClass('on');
// 小圆点hover效果
$('.spot-ul li').hover(function(e){
stop();
var preIndex = $(".spot-ul li").filter(".on").index(); //
currentIndex = $(this).index(); //
play(preIndex, currentIndex);
},function(){
start();
});
/从preIndex页翻到currentIndex页
preIndex翻页的起始页
currentIndex整数，翻到的那页
/
function play(preIndex, currentIndex) {
$('.scroll-li').eq(preIndex).fadeOut(500).parent().children().eq(currentIndex).fadeIn(500);
$('.spot-ul li').removeClass('on');
$('.spot-ul li').eq(currentIndex).addClass('on');
}
// 自动向后翻页
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
// 开始轮播
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
//停止轮播
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
</script>
</body>