<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>5in1</title>
<link href="" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;border:none}
body{background:#CCCCCC;padding:20px}
.com{width:490px;height:170px;overflow:hidden;position:relative;background:black}
.com ul{width:3000px;font-size:0;}
.com ul li{vertical-align:bottom;height:100%;overflow:hidden;float:left;background:white url(http://img01.taobaocdn.com/tps/i1/T1cKm3XkRpXXXXXXXX-48-48.gif) no-repeat center center;vertical-align:bottom;list-style:none;overflow:hidden}
.com ol{position:absolute;right:0;bottom:20px;;z-index:10;list-style:none;height:21px}
.com ol li{width:15px;background:white;border:1px solid #74A8ED;border-radius:10px;color:#74A8ED;cursor:pointer;float:left;font:12px Arial;height:15px;margin:2px 3px;text-align:center;}
.com ol li.on{height:19px;width:19px;background:#74A8ED;border:1px solid #EEEEEE;color:#FFFFFF;font-size:16px;font-weight:bold;line-height:19px;margin:0 3px;}
</style>
</head>
<body>
<div id="ppt" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
</ul>
</div>
<hr/>
<div id="ppt5" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
</ul>
</div>
<hr/>
<div id="ppt4" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
</ul>
</div>
<hr/>
<div id="ppt2" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
</ul>
</div><hr/>
<div id="ppt3" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
</ul>
</div><hr/>
</body>
<script>
(function(e){function t(e,t){this.$ele=t,this.set=e,this.WH=this.set.vertical?t.height():t.width(),this.lis=t.find("ul li"),this.idx=0,this.timer=null}e.fn.myPic=function(n){return e.fn.myPic.defaults={vertical:!1,button:!0,auto:!0,effect:"scroll",onMouse:"mouseover"},this.each(function(){var r=n?e.extend(e.fn.myPic.defaults,n):e.fn.myPic.defaults,i=new t(r,e(this));r.button&&i.generate(e(this)),r.auto&&i.auto()}),this},t.prototype={generate:function(t){var n=e("<ol></ol>").appendTo(t),r=this;e.each(this.lis,function(t,r){e("<li>"+(t+1)+"</li>").appendTo(n)}),this.olis=t.find("ol li"),this.olis.eq(0).attr("class","on");switch(this.set.effect){case"scroll":t.find("ul").css({position:"absolute",left:0,top:0}),this.set.vertical&&this.lis.css({"float":"none"});break;case"flip":case"fade":this.lis.css({position:"absolute",left:0,top:0,"float":"none"}).eq(0).css("zIndex","2");break;case"in":this.lis.css({display:"none"}).eq(0).css("display","block");break;default:}t.delegate("ol li",this.set.onMouse,function(){var $this=e(this);setTimeout(function(){r.start($this.index())},300),r.stop()}).delegate("ol li","mouseout",function(){r.auto()})},start:function(e){this.idx=e,this.idx!=this.from&&(this.effect(this),this.reset())},effect:function(t){var n=t.idx,r={};switch(t.set.effect){case"scroll":r[t.set.vertical?"top":"left"]=-(n*this.WH),this.$ele.find("ul").stop(!0,!0).animate(r),r=null;break;case"flip":this.lis.eq(n).css("zIndex",1),this.lis.eq(this.from||0).stop(!0,!0).css("opacity",.8).animate({left:-100,opacity:0},600,function(){e(this).css({zIndex:0,opacity:1,left:0}),t.lis.eq(n).css("zIndex","2")});break;case"fade":this.lis.eq(n).css("zIndex","1"),this.lis.eq(this.from||0).stop(!0,!0).fadeOut(500,function(){e(this).css({zIndex:0,display:"block"}),t.lis.eq(n).css("zIndex","2")});break;case"in":this.lis.eq(this.from||0).stop(!0,!0).fadeOut(400,function(){t.lis.eq(n).stop(!0,!0).fadeIn(700)});default:}},reset:function(){this.olis.eq(this.from||0).attr("class",""),this.olis.eq(this.idx).attr("class","on"),this.from=this.idx||0},stop:function(){var e=this;clearInterval(e.timer)},auto:function(){var e=this,t=this.lis.length;this.timer=setInterval(function(){e.idx=e.idx>=t-1?0:++e.idx,e.start(e.idx)},3e3)}}})(jQuery);
$('#ppt').myPic({
vertical:true
});
$('#ppt2').myPic({
effect:"in"
});
$('#ppt3').myPic({
effect:"fade"
});
$('#ppt4').myPic({
effect:"flip"
});
$('#ppt5').myPic();
</script>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link href="" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;border:none}
body{background:#CCCCCC;padding:20px}
.com{width:490px;height:170px;overflow:hidden;position:relative;background:black}
.com ul{width:3000px;font-size:0;}
.com ul li{vertical-align:bottom;height:100%;overflow:hidden;float:left;background:white url(http://img01.taobaocdn.com/tps/i1/T1cKm3XkRpXXXXXXXX-48-48.gif) no-repeat center center;vertical-align:bottom;list-style:none;overflow:hidden}
.com ol{position:absolute;right:0;bottom:20px;;z-index:10;list-style:none;height:21px}
.com ol li{width:15px;background:white;border:1px solid #74A8ED;border-radius:10px;color:#74A8ED;cursor:pointer;float:left;font:12px Arial;height:15px;margin:2px 3px;text-align:center;}
.com ol li.on{height:19px;width:19px;background:#74A8ED;border:1px solid #EEEEEE;color:#FFFFFF;font-size:16px;font-weight:bold;line-height:19px;margin:0 3px;}
</style>
</head>
<body>
<div id="ppt" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
</ul>
</div>
<br/><br/><br/><br/>
<div id="ppt5" class="com">
<ul>
<li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1yJedXclgXXXXXXXX-490-170.png"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1vHudXa4mXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T17viXXe8pXXXXXXXX.jpg?noq=y"></a></li>
<li><a href="#"><img src="http://i.mmcdn.cn/simba/img/T1dtKdXXtgXXXXXXXX.gif?noq=y"></a></li>
</ul>
</div>
</body>
<script>
jQuery.fn.log = function (msg) {
window.console&&window.console.log("%s: %o", msg, this);
return this;
};
(function($){
$.fn.myPic = function(args){
$.fn.myPic.defaults={vertical:false,button:true,auto:true,effect:"scroll",onMouse:"mouseover",delay:5000}
this.each(function(){
var set=args ? $.extend($.fn.myPic.defaults,args):$.fn.myPic.defaults;
var Mod=new init(set,$(this));
set.button && Mod.generate($(this));
set.auto&&Mod.auto();
});
return this;
};
function init(set,$E){
this.set=set;
this.idx=0;
this.WH=set.vertical?$E.height():$E.width();
this.$ele=$E;
this.lis=$E.find("ul li");
this.timer=null;
this.effect = this.EFFECT[set.effect]||null;//from 小秦
this.readyCss($E);
};
init.prototype={
generate:function($E){
var ol=$("<ol></ol>").appendTo($E),that=this;
$.each(this.lis,function(i,index){$("<li>"+(i+1)+"</li>").appendTo(ol)});
this.olis=$E.find("ol li");
this.olis.eq(0).attr('class',"on");
$E.delegate("ol li",this.set.onMouse, function() {
if(!that.$ul.is(":animated")){//不好用
that.start($(this).index());
}
that.stop();
}).delegate("ol li","mouseout",function(){
that.auto();
})
},
readyCss:function($E){//动画式样必须的css结构修改
switch(this.set.effect){
case "scroll":
//只有scroll效果才需要这些this.xxx就不写进init里了
this.fly=this.set.vertical?'top':'left';
this.css={};
this.$ul=$E.find("ul");
$E.find("ul").css({position:"absolute",left:0,top:0}).find("li").css({float:this.set.vertical?'none':''});
break;
case "flip":
case "fade":
this.lis.css({position:"absolute",left:0,top:0,float:"none"}).eq(0).css("zIndex","2");
break;
case "in":
this.lis.css({display:"none"}).eq(0).css("display","block");
break;
default:break;
}
},
start:function(now){
this.idx=now;
if(this.idx!=this.from){
this.effect(this)
this.reset();
}
},
EFFECT:{
'scroll':function(e){
e.css[e.fly]=-(e.idx*this.WH);
e.$ul.stop(true,false).animate(e.css);
},
'fade' :function(e){},//为了让你们知道有多方便，我故意不写啊.....里面自己复制粘贴1楼里的代码
'flip' :function(e){},
'in' :function(e){}
},
reset:function(){
this.set.button && this.olis.eq(this.from||0).attr('class',"");// 版主的问题暂时先这么处理下....
this.set.button && this.olis.eq(this.idx).attr('class',"on");
this.from=this.idx||0;
},
stop:function(){
clearInterval(this.timer);
},
auto:function(){
var that=this,len=this.lis.length;
/*this.timer=setInterval(function(){
that.idx=(that.idx >= (len-1)) ? 0 : (++that.idx);
that.start(that.idx);
},3000)*/
this.timer=setInterval($.proxy(function(){
this.idx=(this.idx >= (len-1)) ? 0 : (++this.idx);
this.start(this.idx);
},this),this.set.delay)
}
}
})(jQuery);
//$('.com').myPic();
$('#ppt').myPic({
button:false,
vertical:true,
delay:2000
});
$('#ppt5').myPic();
</script>
</html>
浙公网安备 33010602011771号