<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>支付托</title>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{ overflow: hidden;}
.pages{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transform: translateY(0%);
transition: all 0.5s;
}
.pages > li{ width: 100%; height: 100%;}
.pages > li > .page { width: 100%; height: 100%;}
.buttons{ position: fixed; right: 0; top: 50%; margin-top: -60px; list-style: none;}
.buttons > li{ width: 10px; height: 10px; margin: 8px; border: 1px solid #cccccc; border-radius: 50%; background-color: #fff; cursor: pointer;}
.buttons > li.active{ background-color: blue;}
</style>
</head>
<body>
<div id="page1" style="background-color:#000000"></div>
<div id="page2" style="background-color:#444444"></div>
<div id="page3" style="background-color:#666666"></div>
<div id="page4" style="background-color:#999999"></div>
<div id="page5" style="background-color:#00ff00"></div>
<div id="page6" style="background-color:green"></div>
<script type="text/javascript">
var _defaults={
"effect":500,
"pages":[],
cur:0,
_lock: false
}
var methods = {
init : function() {
var _this = this;
this.addClass("dn-scroller");
this.$pages = $("<ul class='pages'></ul>");
this.$buttons = $("<ul class='buttons'></ul>");
$.each(this.pages,function(i,data){
var $li = $("<li></li>");
$li.append($(data).addClass("page"));
_this.$pages.append($li);
_this.$buttons.append("<li class='"+(i==0?'active':'')+"'></li>");
})
this.append(this.$pages);
this.append(this.$buttons);
},
_scroll : function(){
var _this = this;
this.$pages.css({transform:"translateY(-" +this.cur+ "00%)"});
this._lock = true;
window.setTimeout(function(){
_this._lock = false;
_this.$buttons.find(":eq("+_this.cur+")").addClass("active").siblings().removeClass("active")
},this.effect);
},
_handle : function(){
var _this = this;
this.on("mousewheel",function(e){
if(_this._lock) return;
if(e.originalEvent.wheelDelta < 0){
if(_this.cur == _this.pages.length-1){
return;
}
_this.cur++;
}else{
if(_this.cur == 0){
return;
}
_this.cur--;
}
_this._scroll();
});
this.$buttons.find("li").on("click",function(){
_this.cur = $(this).index();
_this._scroll();
})
}
}
$.fn.dn_scroll=function(options){
this.extend(methods); //集成 method是方法
this.extend(_defaults);
this.extend(options);
this.init();
this._handle();
};
$(function(){
$("body").dn_scroll({
"effect":800,
"pages":["#page1","#page2","#page3","#page4","#page5","#page6"]
});
})
</script>
</body>
</html>
