还是之前写的 做了点修改<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head><title>gliding and Tween</title> <style type="text/css"> #container1,#container2{ height:180px;490px;position:relative;overflow:hidden; } #container1 div,#container2 div{ height:16px; 16px;font-size:14px; position:absolute; cursor: pointer;margin: 1px;border: 1px solid #FF7300;background-color:#FFFFFF; color: #FF7300;text-align: center;line-height: 16px;vertical-align:middle; } #container1 .on,#container2 .on{ height:17px;17px;line-height: 17px; border: 1px solid #FF7300;background-color:#FF7300; font-weight: bold;color: #FFFFFF; } /*============================================================= 第3个效果的样式============================*/ .example{ 525px; height:245px; border:1px solid #DEDEDE; background:#F8F8F8; } .example #container3{ height:210px; 400px;position:relative; overflow:hidden; margin:16px;float:left; z-index:10; background-color:#FFFF33; display: inline; margin-right:0px; } .example img{height:210px; 400px} .example #container3 #block3{ height:840px; 400px; position:absolute; } .example #btn3{ height:208px; 91px; float:right; margin-top:16px; margin-right:4px; position:relative } .example #btn3 img{ 75px; height:45px; cursor: pointer; } </style> <script type="text/javascript"> var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); var $ = function(id){ return document.getElementById(id); }; var $$ = function(o,e){ return o.getElementsByTagName(e); }; function Class(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); } }; var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; } }; var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); }; function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); } }; var TweenMove = new Class({ options : { t : 0, //t,b,c,d,都是缓动的参数 b : 0, c : 0, d : 0, timer : null, Tween : function(t,b,c,d){return -c * ((t=t/d-1)*t*t*t - 1) + b;}, //缓动公式 howgo : function(){this._obj.style.left = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px"}, //哪些属性来执行缓动公式 Onstart : function(){}, Onmove : function(){}, Onend : function(){} }, initialize : function(obj,options){ this._obj = obj; var o ={}; Extend(o,this.options); Extend(o,options||{}); Extend(this,o); }, Start : function(){ this.Onstart(); this.Move(); }, Move : function(){ this.howgo(); this.Onmove(); if(this.t<this.d) {this.t++;this.timer=setTimeout(Bind(this,this.Move),1)} else {this.t=0;this.Onend();} }, Clear : function(){ clearTimeout(this.timer); } }); var gliding = new Class({ options : { type : 1, //1表示是横着的 0表示是束者着的 direction : -1, //-1表示象上或者向左 num : 3, //多少个变化的元素 step : 0, //叫做步长吧 就是图片的宽度或者是高度 Time : 3000, //间隔 Onstart : function(){} }, initialize : function(container,block,config,options){ this.container = container; //最外层容器 this.count = 1; //记录在第几个变化的图片上 this.timer = null; //是停顿多长时间换下张图片的定时器 var o ={}; Extend(o,this.options); Extend(o,options||{}); Extend(this,o); var _self = this; Extend(config,{howgo:function(){ this._obj.style[_self.type?"left":"top"] = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px"; },Onend:function(){ _self.count++; if(_self.count == _self.num) _self.count = 0; _self.Set(); },Onstart: function(){ _self.Onstart(); }}); this.Tweenmove = new TweenMove(block,config); this.Tweenmove.Start(); }, Set : function(arg){ this.Tweenmove.Clear(); clearTimeout(this.timer); //清除2个定时器 一个是记录图片运动的(上面那个) 一个是控制多长时间后进行下次运动 this.Tweenmove.t = 0; this.Tweenmove.b = parseInt(CurrentStyle(this.Tweenmove._obj)[this.type ? 'left' : 'top'])||0; this.Tweenmove.c = this.count*this.step*this.direction - this.Tweenmove.b; var _self = this; arg = arg?0:this.Time; //如果是事件触发就直接执行; this.timer = setTimeout(Bind(this.Tweenmove,this.Tweenmove.Start),arg); } }); </script> </head> <body style="margin:0px; padding:20px;"> <table width="1200" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="600"> <div id='container1'> <table id='block1' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'> <tr> <td><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></td> </tr> <tr> <td><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></td> </tr> <tr> <td><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></td> </tr> <tr> <td><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></td> </tr> <tr> <td><img src="http://pics0.paipaiimg.com/update/20100315/index_c2c_201035_490_180_3.jpg"></td> </tr> </table> <div class="on" style="left:360px;bottom:8px;">1</div> <div style="left:385px;bottom:8px;">2</div> <div style="left:410px;bottom:8px;">3</div> <div style="left:435px;bottom:8px;">4</div> <div style="left:460px;bottom:8px;">5</div> </div> <br> <div id='container2'> <table id='block2' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'> <tr> <td><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></td> <td><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></td> <td><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></td> <td><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></td> <td><img src="http://pics0.paipaiimg.com/update/20100315/index_c2c_201035_490_180_3.jpg"></td> </tr> </table> <div class="on" style="left:360px;bottom:8px;">1</div> <div style="left:385px;bottom:8px;">2</div> <div style="left:410px;bottom:8px;">3</div> <div style="left:435px;bottom:8px;">4</div> <div style="left:460px;bottom:8px;">5</div> </div> </td> <td valign="top"> <div class="example"> <div id="container3"> <div id="block3"> <div><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></div> <div><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></div> <div><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></div> <div><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></div> </div> </div> <div id="btn3" > <div style="height:52px;91px;"><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div style="height:52px;91px;"><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div style="height:52px;91px;"><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div style="height:52px;91px;"><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div id="btn_block3" style="height:52px; 91px; position:absolute; z-index:5; top:0px;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/o_cc.gif" style="height:52px; 91px"></div> </div> </div> </td> </tr> </table> <script type="text/javascript"> window.onload = function(){ var divs = $$($("container1"),"div"); var div1s = $$($("container2"),"div"); var div2s = $$($("btn3"),"div");//===================================doem1======================================================================================== var doem1 = new gliding($("container1"),$("block1"),{b:0,c:-180,d:40},{num:5,type:0,step:180,Onstart:function(){ var count = this.count; Each(divs,function(obj,i){obj.className = "";divs[count].className = "on";}); }}); Each(divs,function(obj,i){ obj.onmouseover = function(){doem1.count=i;doem1.Set(1);}; }); //===================================doem2======================================================================================== var doem2 = new gliding($("container2"),$("block2"),{b:0,c:-490,d:40},{num:5,step:490,Onstart:function(){ var count = this.count; Each(div1s,function(obj,i){obj.className = "";div1s[count].className = "on";}); }}); Each(div1s,function(obj,i){ obj.onmouseover = function(){doem2.count=i;doem2.Set(1);}; }); //===================================doem3======================================================================================== var doem3_1 = new gliding($("container3"),$("block3"),{b:0,c:-210,d:40},{num:4,type:0,step:210,Onstart:function(){}}); var doem3_2 = new gliding($("btn3",1),$("btn_block3"),{b:0,c:52,d:40,Tween:function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); }},{direction:1,num:4,type:0,step:52}); Each(div2s,function(obj,i){ if(i==4)return; obj.onmouseover = function(){doem3_1.count=i;doem3_1.Set(1);doem3_2.count=i;doem3_2.Set(1);}; }); } </script> </body> </html>
用jquery写的一个 要简单些 嘿嘿
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slider</title> <style type="text/css"> *{margin:0;padding:0;} img{ border:0;} .c{ margin:50px 0; border:1px dashed #CCC; padding:0 15px 20px;} .warp{ 660px; margin:0 auto; } h1{font : bold 18px/4 tahoma; color:#333; } .code{background: none repeat scroll 0 0 #E3F4F9;border: 1px solid #BAE2F0; padding:10px 10px 40px;margin-top:30px;font: 12px "Courier New",Courier,monospace;} .how{ padding:15px 0 8px; font-weight:bold;} .info{ padding:5px 0;} </style> </head> <body> <div class="warp"> <style type="text/css"> #slider{position:relative;height: 222px;overflow: hidden; 620px; border:1px solid #666; margin:0 auto;} #slider ul{ list-style:none; overflow:hidden; zoom:1; } #slider li{ 620px; height:222px; overflow:hidden; float:left; } </style> <div class="c"> <h1>demo1</h1> <div id="slider"> <ul> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_01.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_03.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_04.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_05.jpg" alt="you sister" /></a></li> </ul> </div> <div class="code"> <div class="info">说明:1.自动播放 2.横着</div> <div class="how">使用方法</div> $("#slider").slider(); </div> </div> <style type="text/css"> #slider1{position:relative;height: 222px;overflow: hidden; 620px; border:1px solid #666; margin:0 auto;} #slider1 ul{ list-style:none; overflow:hidden; zoom:1; } #slider1 li{ 620px; height:222px; overflow:hidden; } </style> <div class="c"> <h1>demo2</h1> <div id="slider1"> <ul> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_01.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_03.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_04.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_05.jpg" alt="you sister" /></a></li> </ul> </div> <div class="code"> <div class="info">说明:1.自动播放 2.竖着</div> <div class="how">使用方法</div> $("#slider2").slider({type:1}); </div> </div> <style type="text/css"> #slider2{position:relative;height: 222px;overflow: hidden; 620px; border:1px solid #666;} #slider2 ul{ list-style:none; overflow:hidden; zoom:1; } #slider2 .s_bar{ bottom: 10px; position: absolute; right: 10px; } #slider2 .s_bar a{ background: none repeat scroll 0 0 red; color: #FFFFFF; display: inline-block; height: 20px; line-height: 20px; margin-right: 3px; text-align: center; 20px; text-decoration:none; } #slider2 .s_bar a.on{ background: #06F; } #slider2 li{ 620px; height:222px; overflow:hidden; float:left; } </style> <div class="c"> <h1>demo3</h1> <div id="slider2"> <ul> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_01.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_03.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_04.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_05.jpg" alt="you sister" /></a></li> </ul> </div> <div class="code"> <div class="info">说明:1.自动播放 2.横着 3.带数字按钮</div> <div class="how">使用方法</div> $("#slider2").slider({bar:true}); </div> </div> <style type="text/css"> #slider3{position:relative;height: 222px;overflow: hidden; 620px; border:1px solid #666;} #slider3 ul{ list-style:none; overflow:hidden; zoom:1; } #slider3 li{ 620px; height:222px; overflow:hidden; } #slider3 .s_bar{ bottom: 10px; position: absolute; right: 10px; } #slider3 .s_bar a{ background: none repeat scroll 0 0 red; color: #FFFFFF; display: inline-block; height: 20px; line-height: 20px; margin-right: 3px; text-align: center; 20px; text-decoration:none; } #slider3 .s_bar a.on{ background: #06F; } </style> <div class="c"> <h1>demo4</h1> <div id="slider3"> <ul> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_01.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_03.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_04.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_05.jpg" alt="you sister" /></a></li> </ul> </div> <div class="code"> <div class="info">说明:1.自动播放 2.竖着 3.带数字按钮</div> <div class="how">使用方法</div> $("#slider3").slider({type:1,bar:true}); </div> </div> <style type="text/css"> #slider4{position:relative;height: 222px;overflow: hidden; 620px; border:1px solid #666; } #slider4 ul{ list-style:none; overflow:hidden; zoom:1; } #slider4 li{ 620px; height:222px; overflow:hidden; float:left; } </style> <div class="c"> <h1>demo5</h1> <div id="slider4"> <ul> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_01.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_02.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_03.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_04.jpg" alt="you sister" /></a></li> <li><a href="javascript:;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_05.jpg" alt="you sister" /></a></li> </ul> </div> <br><br> <input type="button" value="上一张" id="preBtn"> <input id="nextBtn" type="button" value="下一张"> <div class="code"> <div class="info">说明:1.只有点了按钮才会移动</div> <div class="how">使用方法</div> $("#slider4").slider({autoRun:false,preBtn:$("#preBtn")[0],nextBtn:$("#nextBtn")[0]}); </div> </div> </div> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> var slider = function(options){ this.init.call(this,options) } slider.prototype = { options :{ type : "cross", //cross表示横着 默认横着 autoRun : true }, init : function(options){ $.extend(this,this.options,options); this.lis = $("li",this.container); this.cur = 0; this.timer = null; var len = this.len = this.lis.length; if(this.type === "cross"){ this.step = this.lis.eq(0).width(); this.ul = $("ul",this.container).css("width",this.step*len); }else{ this.step = this.lis.eq(0).height(); this.ul = $("ul",this.container).css("height",this.step*len); } var self = this; if(this.bar){ var j=1, aHtml = new Array(len+1).join('<a href="javascript:;" class="">{n}</a>').replace(/{n}/g,function(){return j++;}); this.bar = $('<span class="s_bar">'+aHtml+'</span>') .bind('mouseover',function(e){ if(e.target.nodeName!=="A"){ return; } clearTimeout(self.timer); self.ul.stop(); self.moveTo(parseInt(e.target.innerHTML)-1); }) .appendTo(this.container); this.as = $("a",this.bar[0]); this.curA = this.as.eq(0).addClass("on"); } this.autoRun &&this.start(); if(this.preBtn&&this.nextBtn){ $(this.nextBtn).bind("click",function(){ if(self.cur===(self.len-1)) return; self.moveTo(self.cur+1); }); $(this.preBtn).bind("click",function(){ if(self.cur===0) return; self.moveTo(self.cur-1); }); } }, start : function(){ this.cur++; this.cur == this.len &&(this.cur = 0); this.moveTo(this.cur); }, moveTo : function(cur){ this.cur = cur; var self = this, val = this.step*-1*cur, css = this.type === "cross"?{marginLeft:val}:{marginTop:val}; if(this.bar){ this.curA.removeClass("on") this.curA = this.as.eq(cur).addClass("on"); } this.preBtn ? this.ul.animate(css) : this.ul.animate(css,function(){ self.timer = setTimeout(function(){ self.start(); },3000); }); } }; (function($) { $.fn.slider = function(options){ var obj = $.extend({container:this},options||{}) new slider(obj); }; })(jQuery); window.onload = function(){ $("#slider").slider(); $("#slider1").slider({type:1}); $("#slider2").slider({bar:true}); $("#slider3").slider({type:1,bar:true}); $("#slider4").slider({autoRun:false,preBtn:$("#preBtn")[0],nextBtn:$("#nextBtn")[0]}); } </script> </body> </html>