标签:style blog class code java c
刚买了司徒大大的《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‘); } } //animation function animation(direct){ if(direct == ‘right‘) opt.target.animate({‘left‘:‘+=‘+(opt.width)*(opt.step)+‘px‘},opt.speed,‘linear‘,show_list); else opt.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);
上完代码,回去继续一边搞毕设一边看代码,匿了~
标签:style blog class code java c
原文地址:http://www.cnblogs.com/cyITtech/p/3726661.html