前些天写的一jquery首页图片切换插件（额，不知道这种效果叫什么名字）

前些时间修改网站首页，首页上有很多地方用到这种方式来展现内容（不一定非得是图片）。 虽然显示效果不同，但还是有相同的地方的。于是就自己写了一个插件（别问我为么不在网上搜个插件） 下面是效果图，一共有3张切换效果，普通，淡入淡出，滑动
源码
网页代码

View Code 1 jQuery.extend({ 2 st: function(s1,s2,op) { 3 var current=0; 4 5 var set={current:0,//当前显示元素的索引 6 time:3,//切换时间间隔 7 _disibledevent=>'on',//控制层， 8 auto:1,//是否自动切换 9 mode:'normal',//切换模式 normal:普通;fade:淡入淡出;slide:滑动; 10 switchMode:'mouseover'//鼠标切换方式，mouseover鼠标经过时切换，click单击切换 11 }; 12 13 //切换模式 normal:普通;fade:淡入淡出;slide:滑动; 14 $.extend(set,op); 15 16 var e1=$(s1);//控制端 17 var e2=$(s2);//内容 18 var len=e1.length;//元素个数 19 var height=e2.find('li').height();//展现元素的高度，zai切换模式为滑动时要用到 20 var timer; 21 var start=function(){ 22 timer=setInterval(function(){ toggle();},set.time*1000); 23 }; 24 var toggle=function(to){ 25 if(to==null){ 26 current++; 27 }else{//如果to不为空，则切换到指定位置 28 current=to; 29 } 30 if( current>= len){//如果current越界了，则重置为0 31 current=0; 32 } 33 34 e1.filter('.on').removeClass('on'); 35 e1.eq(current).addClass('on'); 36 switch(set.mode){ 37 case 'fade': 38 e2.fadeOut(2000); 39 e2.eq(current).fadeIn(2000); 40 break; 41 case 'slide': 42 e2.stop(); 43 //在图片未加载之前，chrome浏览器下图片的高宽为0，若给img外面的li设上了高，则可以删去下面一行 44 height=!height?e2.find('li').height():height; 45 e2.animate({ top:-current*(height) }, { duration: "slow" }); 46 break; 47 default: 48 e2.hide(); 49 e2.eq(current).show(); 50 } 51 }; 52 var clear=function(){ 53 clearInterval(timer); 54 }; 55 e1.bind(set.switchMode,function(){ 56 clear(); 57 current=e1.index(this); 58 toggle(current); 59 }); 60 if(set.auto){//如果自动切换 61 e1.mouseout(function(){ clear(); start()}); 62 start(); 63 } 64 }//function end 65 66 });

一共需要3个参数，前两个是必填的， 这两个分别是控制端和内容端的选择器
$.st(selecter1,selecter2,setting);
代码很短，主要是不涉及样式和基本结构 好处是灵活，样式可以自由定义；用li 还是div都行只要选择器写对就行 缺点是繁琐，样式必须自己定义； 其实如果你觉得麻烦可以在此基础上进行修改，把结构固定下来，（比如：控制端用 ul li 内容端用, ol li 。） 将对应的地方修改下
st: function(selecter,op) { var e1=$(selecter).find('ul>li'); var e2=$(selecter).find('ol>li');

这样只需传递最外层元素的id
$.st('#demo_1');
最后希望同学们有空的话自己动手写写，不要觉得别人已经做好了，有现成的插件，我直接拿来用就是了，干嘛还要那么麻烦啊； 还是那句话，一些东西自己亲自做做，往往会有意外的收获。 O(∩_∩)O 收获：1.在chrome浏览器下，图片尚未加载完时，$('#img_id').height();获取到的高和宽均为0； $(window).load(function(){ //注意用$(document).ready();不行 $('#img_id').height();//这时能获得 }); 2. 由于tab

下的li添加了float导致tab高度不能自适应。 给tab 加上overflow:hide; //两天前我只知道下面那种方法，惭愧啊T_T 或在里面 加上
完整实例下载

Tags: 

延伸阅读