<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content = " initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="seokeywords"/>
<meta name="description" content="seodescription"/>
<title></title>
<style>
*{margin:0;padding:0;}
@media screen and (min-width:240px) {
html, body{
font-size:9px;
}
}
@media screen and (min-width:320px) {
html, body{
font-size:12px;
}
}
@media screen and (min-width:480px) {
html, body{
font-size:18px;
}
}
@media screen and (min-width:640px) {
html, body{
font-size:24px;
}
}
@media screen and (min-width:960px) {
html, body{
font-size:36px;
}
}
div.imgbox{width:25rem;height:16.5rem;overflow:hidden;}
div.imgbox ul{clear:both;width:75rem;}
div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
div.imgbox ul li img{width:25rem;height:16.5rem;}
#page{color:red;}
</style>
</head>
<body>
<div class="imgbox">
<ul>
<li><a href="javascript:;"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg"></a></li>
<li><a href="javascript:;"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg"></a></li>
<li><a href="javascript:;"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg"></a></li>
</ul>
</div>
<div>这里通过回调显示当前滚动到多少页:<span id="page">0</span></div>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script>
(function($){
function mg(box,config){
this.box=$(box);
this.config= $.extend({},config || {})
this.width=this.config.width || this.box.children().eq(0).width()
this.size=this.config.size || this.box.children().length
this.loop=this.config.loop || false
this.auto=this.config.auto || false
this.auto_wait_time=this.config.auto_wait_time || 3000
this.scroll_time=3000
this.minleft=-this.width*(this.size-1)
this.maxleft=0
this.now_left=0
this.point_x=null
this.point_y=null
this.move_left=false
this.index=0
this.busy=false
this.timer;
this.init()
}
$.extend(mg.prototype,{
init:function(){
// this.bind_event()
this.init_loop()
this.auto_scroll()
},
init_loop:function(){
if(this.box.children().length===this.size && this.loop){
this.now_left=-this.width;
this.minleft=-this.width*this.size
this.maxleft=-this.width
this.box.prepend(this.box.children().eq(this.size-1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2))
this.box.css('width',this.width*(this.size+2))
}else{
this.loop=false
this.box.css('width',this.width*this.size)
}
},
auto_scroll:function(){
var self=this
if(!self.loop || !self.auto){
return false
}
clearTimeout(self.timer)
self.timer=setTimeout(function(){
self.go_index(self.index+1)
},self.auto_wait_time)
},
go_index:function(ind){
var self=this
if(self.busy){
return
}
clearTimeout(self.timer)
self.busy=true;
if(self.loop){
ind=ind<0?-1:ind;
ind=ind>self.size?self.size:ind
console.log(ind);
}else{
ind=ind<0?0:ind;
ind=ind>=self.size?(self.size-1):ind
console.log(ind);
}
if(!self.loop && (self.now_left == -(self.width*ind))){
self.complete(ind)
}else if((self.loop && (self.now_left == -self.width*(ind+1)))){
self.complete(ind)
}else{
if(ind == -1 || ind == self.size){
self.index=ind ==-1?(self.size-1):0
self.now_left=ind==-1?0:-self.width*(self.size+1)
}else{
self.index=ind
self.now_left=-(self.width*(self.index+(self.loop?1:0)))
}
self.box.css(this.get_style(1))
setTimeout(function(){
self.complete(ind)
},self.scroll_time)
}
},
complete:function(ind){
var self=this
self.busy=false
self.config.callback && self.config.callback(self.index)
if(ind==-1){
self.now_left=self.minleft
}else if(ind==self.size){
self.now_left=self.maxleft
}
self.box.css(this.get_style(2))
self.auto_scroll()
},
get_style:function(fig){
var x=this.now_left,
time=fig==1?this.scroll_time:0
return {
'-webkit-transition':'-webkit-transform ' +time+'ms',
'-webkit-transfoem':'translate3d('+x+'px,0,0)',
'-webkit-backface_visibility':'hidden',
'transition':'transform ' +time+' ms',
'transform':'translate3d('+x+'px,0,0)'
}
}
})
$.mg = function(box,config){
var scrollImg = new mg(box,config);
return {//对外提供接口
next : function(){scrollImg.next();},
prev : function(){scrollImg.prev();},
go : function(ind){scrollImg.go_index(parseInt(ind)||0);}
}
}
})(Zepto)
</script>
<script>
(function(){
var scrollImg= $.mg('.imgbox ul',{
loop:true,
auto:true,
callback:function(ind){
$('#page').text(ind)
}
})
})()
</script>
</body>
</html>
