写的不是很完善只实现了效果 先码上 我会慢慢整合改进
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>图片的轮播效果 需要改进</title> <style> body,ul,ol{margin:0;padding:0;} li{ list-style:none;} img{ border:none; vertical-align:top; } #box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;} ul{ width:470px; position:absolute;left:0; top:0; z-index:1;} ul li{width:470px;} ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;} ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;} ol .active{ background:#f60; color:#fff;} body{ width: 100%; height: auto; overflow: hidden;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> ;(function($,window,document,undefined){ /** * tab选项卡的切换效果 * @param ele * @param opt * @constructor */ function Slider(ele,opt){ this.wrapContent =ele;//父级容器 this.iconTag = this.wrapContent.find('ol').find('li'); this.picShow = this.wrapContent.find('ul').find('li'); this.now = 0;//图片的起点数 this.now2 = 0;//按钮的起点数 this.timer = null; this.oneHeight = this.picShow.height();//获取一个图片的高度 } Slider.prototype = { 'init':function(){ var _this = this; this.iconTag.on('mouseover',function(){//li 添加mouseover的事件 var index = $(this).index(); _this.now = index ; _this.now2 = index; _this.change(); }); this.autoPlay(); this.stop(); }, 'autoPlay':function(){ var _this = this; this.timer = setInterval(function(){ _this.play(); },2000); }, 'play':function(){ if(this.now==(this.iconTag.size()-1)){ this.now = 0; this.picShow.eq(0).css({'top':this.iconTag.size()*this.oneHeight,'position':'relative'}); }else{ this.now++; } this.now2++; this.change(); }, 'change':function(){ var _this = this; this.iconTag.eq(this.now).addClass('active').siblings().removeClass('active'); this.picShow.parent().stop().animate({'top':-this.now2*this.oneHeight},300,function(){ if(_this.now2==_this.iconTag.size()){ _this.picShow.eq(0).css({'position':'static'}); _this.picShow.parent().css({'top':0}); _this.now2 = 0; } }); }, 'stop':function(){ var _this = this; this.wrapContent.hover(function(){ clearInterval(_this.timer); },function(){ _this.autoPlay(); }); } } $.fn.slider = function(options){ var oSlider = new Slider(this,options); return oSlider.init(); } })(jQuery,window,document); $(function(){ $('#box').slider(); }); </script> </head> <body> <div id="box"> <ul> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> <li><img src="images/5.jpg" alt=""/></li> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
新手写的 希望大神指教下