<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>手写轮播图效果</title>
<style>
#imgsDiv{position: relative;height: 400px;}
.picDiv{
position: absolute;
top:0;
left:0;
width:100%;
height: 400px;
background-position: center center;
background-repeat: no-repeat;
z-index:0;
}
#dotLists{
position: relative;
margin:-30px auto 0;
text-align:center;
height: 20px;
z-index: 20;
}
.dot{
display: inline-block;
width: 12px;
height: 12px;
margin:0 8px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
background: #ccc;
cursor: pointer;
}
.hover{
background: #FF1515;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="imgsDiv">
<div class="picDiv" style="background-image:url(https://i.alipayobjects.com/i/ecmng/jpg/201407/31kKIcRiQ3.jpg);"></div>
<div class="picDiv" style="background-image:url(https://i.alipayobjects.com/i/ecmng/jpg/201406/2pMuCMfPWf_src.jpg);"></div>
<div class="picDiv" style="background-image:url(https://i.alipayobjects.com/i/ecmng/jpg/201406/2pMuBhXfEr_src.jpg);"></div>
<div class="picDiv" style="background-image:url(https://i.alipayobjects.com/i/ecmng/jpg/201406/2pMuC9bBef_src.jpg);"></div>
</div>
<p id="dotLists">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</p>
<script>
//轮播
var Rotation=function($div1,$div2){
this.$list1=$div1.children();
this.$list2=$div2.children();
this.timeOut=null;
//初始化
this._start();
}
Rotation.prototype={
_init:function(){
this.$list1.hide()
.eq(0).show().css("z-index","1").addClass("show")
this.$list2.eq(0).addClass(‘hover‘);
},
_start:function(){
var _this=this;
_this._init();
_this._startTimeOut();
_this._addClickEvent(_this.$list2);
_this.$list1.hover(function(){
_this._stopTimeOut();
},function(){
_this._startTimeOut();
});
},
_addClickEvent:function($div){
var _this=this;
$div.on("click",function(){
_this._stopTimeOut();
_this.$list1.stop(true,true);
_this._doNext($(this).index());
});
},
_doNext:function(index){
var _this=this;
var num=_this.$list2.siblings(".hover").index();
_this.$list2.eq(index).addClass("hover")
.siblings().removeClass("hover");
if(num!=index){
_this.$list1.eq(index).show().addClass("show").end()
.eq(num).removeClass("show").fadeOut(900,function(){
_this.$list1.eq(index).css("z-index","1").end()
.eq(num).css("z-index","0");
});
}
},
_startTimeOut:function(){
var _this=this;
var indexNum=_this.$list2.siblings(".hover").index();
timeOut=setInterval(function(){
indexNum++;
_this._doNext(indexNum%(_this.$list1.length));
},3000);
},
_stopTimeOut:function(){
clearInterval(timeOut);
}
}
$(function(){
//调用轮播
new Rotation($("#imgsDiv"),$("#dotLists"));
});
</script>
</body>
</html>
模仿轮播图效果