刚买了司徒大大的《Javascript框架设计》，准备开始研读。打算在读之前先随便写个图片轮播插件，到读完这本书再来看看现在的自己有多菜。。。。。。。
顺便做图片轮播的时候用美女照片真影响效率。。。。。
两三个小时写出来的。。代码略粗糙。。见谅。。
上代码！
先是如何使用：
html:
<div id='outer' style='width:591px;height:862px;overflow:hidden;margin-left:100px;'><ul id='try-slide' style='list-style:none;top:0px;'><li><img src="./slide/1.jpg"/></li><li><img src="./slide/3.jpg"/></li><li><img src="./slide/4.jpg"/></li><li><img src="./slide/5.jpg"/></li></ul><button id='left_btn' style='position:absolute;'>left</button><button id='right_btn' style='position:absolute;left:100px;'>right</button><ul id='list' unsel='url(./slide/dot.jpg) -71 0' sel='url(./slide/dot.jpg) 0 0' style='position:absolute;bottom:120px;'></ul> </div>
js:
$(function(){$('#try-slide').cy_slide({is_control: true,delay:5000,is_list:true,is_mouse:true}); });
至于具体参数的话，如果你们真的不介意这么简陋的代码，可以看源码里的default_opt里面的设置，想要改的话都可以在cy_slide()里面传入
下面是轮播源码：
(function($,w,undefined){// 初始化设置var default_opt = {direct: 'left',speed: '50',delay: '1000',content: 'li',is_list: false,is_control: false,left_btn: '#left_btn',right_btn: '#right_btn',list: '#list',time: false,step: 1,is_mouse: false},opt;// slide入口函数function slide_init(options){var elements;opt = $.extend(default_opt,options);opt.target = $(this);opt.width = opt.target.parent().width();opt.count = $(opt.content,opt.target).length;opt.contentWidth = $(opt.content+':eq(0)',opt.target).outerWidth();opt.target.css({'position':'absolute','left':'0px','font-size': '0px','width':(opt.contentWidth)*(opt.count+1)+'px'});opt.target.parent().css('position','relative');$(opt.content+':eq(0)',opt.target).clone().appendTo(opt.target);opt.target.width();control();opt.time = setTimeout(play,opt.delay);}function control(){if (opt.is_control) {$(opt.left_btn).bind('click',function(){step('left');});$(opt.right_btn).bind('click',function(){step('right')});function step(direct){if(opt.time){clearTimeout(opt.time);opt.time = false;}play(direct);}};if (opt.is_list) {var list = $(opt.list),html;opt.sel = list.attr('sel');opt.unsel = list.attr('unsel');html = '<li style="background:'+opt.sel+'" class="sel"></li>';for (var i = opt.count - 2; i >= 0; i--) {html += '<li style="background:'+opt.unsel+'"></li>';};list.html(html);$('li',list).each(function(){$(this).bind('click',jump);});};if (opt.is_mouse) {opt.target.parent().bind('mouseenter',function(){if(opt.time){clearTimeout(opt.time);opt.time = false;opt.mousein = true;}}).bind('mouseleave',function(){if(!opt.time){opt.time = setTimeout(play,opt.delay);opt.mousein = false;}})};}// 多步step跳转，有list上点击触发function jump(event){event = event? event : w.event;var tar = $(event.target? event.target : event.srcElement) ,ind = tar.index();if(ind != $('li.sel',list).index()){if(opt.time){clearTimeout(opt.time);opt.time = false;}var steps = ind - ($('li.sel',list).index()),direct = steps > 0 ? 'left' : 'right';pos_adjust(direct);opt.target.animate({'left':'-='+(opt.width)*steps+'px'},opt.speed,'linear',show_list);};}//主函数function play(direct){direct = direct? direct : opt.direct;opt.time = false;pos_adjust(direct);animation(direct);}// 动画轮播前图片位置调整function pos_adjust(direct){var left = opt.target.css('left')? opt.target.css('left').slice(0,-2):0;if(direct == 'left' && (opt.contentWidth)*opt.count <= (-left)){opt.target.css('left','0px');}if(direct == 'right' && left >= 0){opt.target.css('left','-'+(opt.contentWidth)*(opt.count)+'px');}}//animationfunction animation(direct){if(direct == 'right')opt.target.animate({'left':'+='+(opt.width)*(opt.step)+'px'},opt.speed,'linear',show_list);elseopt.target.animate({'left':'-='+(opt.width)*(opt.step)+'px'},opt.speed,'linear',show_list);}// 图片轮播动画后，list调整function show_list(){if (opt.is_list) {var left = opt.target.css('left')? opt.target.css('left').slice(0,-2):0,index = parseInt(-left/(opt.contentWidth)),list = $(opt.list);index = index >= opt.count ? 0 : index;$('li.sel',list).removeAttr('class').css('background',opt.unsel);$('li:eq('+index+')',list).attr('class','sel').css('background',opt.sel);};if(!(opt.is_mouse && opt.mousein))opt.time = setTimeout(play,opt.delay);}$.fn.extend({cy_slide: slide_init});})(jQuery,window);
上完代码，回去继续一边搞毕设一边看代码，匿了~