前些天写的一jquery首页图片切换插件（额，不知道这种效果叫什么名字）
前些时间修改网站首页，首页上有很多地方用到这种方式来展现内容（不一定非得是图片）。
虽然显示效果不同，但还是有相同的地方的。于是就自己写了一个插件（别问我为么不在网上搜个插件）
下面是效果图，一共有3张切换效果，普通，淡入淡出，滑动
源码
网页代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换效果</title>
</head>
<script src="js/jquery-1.6.2.js" ></script>
<script src="js/jquery.toggle.js" ></script>
<body>
<style>
ul,ol,li,h2{ margin:0px; padding:0px;}
.show { display:block;} .none{ display:none;}
.clear { clear:both;}
.tab{ list-style:none; overflow:hidden;}
.tab li{ cursor: pointer;}
.blank{ width:100%; padding:20px;0}
/*demo 1 */
#demo_1 .tab { width:510px;}
#demo_1 .tab li{ float:left; border:#0CF 1px solid; padding:2px 15px;}
#demo_1 .tab li.on{ background:#0CF; color:#FFF;}
#demo_1 .content{ width:510px; height:200px; display:none;}
/*demo 2 */
#demo_2 { width:510px; height:200px; position:relative;}
#demo_2 .tab { position:absolute; bottom:5px; right:10px; height:30px; z-index:10;}
#demo_2 .tab li {background:url(images/num.png) no-repeat;color:#0788D4;float: left;
height: 17px;line-height:17px;width: 17px;
padding-left:6px; font-size:12px;
vertical-align:middle;}
#demo_2 .tab li.on{ background-position:0 -20px; color:#FFF; }
#demo_2 .content { position:absolute; left:0px; top:0px;}
/*demo 3 */
#demo_3 { width:510px; height:200px; position:relative; overflow:hidden;}
#demo_3 .tab { position:absolute; bottom:5px; right:10px; height:20px; z-index:10;}
#demo_3 .tab li { position: relative; background-color: #FFFFFF;
border-radius: 20px 20px 20px 20px;
color: #DE7D4B; cursor: pointer;
float: left;
font-size: 13px;
height: 20px; width: 20px;
line-height: 20px;
margin-left: 3px;
opacity: 0.7;
overflow: visible;
text-align: center;
}
#demo_3 .tab li.on{ background-color: #FF6600; color: #FFF; filter: none; font-weight: bold; opacity: 1;}
#demo_3 .content { position:absolute; left:0px; top:0px; list-style:none;}
#demo_3 .content li{ position:relative;}
#demo_3 .content li span { position:absolute; right:10px; top:5px; background:#FFF; font-size:12px; opacity:0.9; color:#666; padding:2px 8px; }
</style>
<div style="margin:200px;" >
<div id="demo_1" >
<ul class="tab" >
<li class="on">昨天</li>
<li>今天</li>
<li>明天</li>
<li>后天</li>
<li>大后天</li>
</ul>
<div class="content" style="display:block;" > <img src="images/t1.jpg" /> </div>
<div class="content" > <img src="images/t2.jpg" /> </div>
<div class="content" > <img src="images/t3.jpg" /> </div>
<div class="content" > <img src="images/t4.jpg" /> </div>
<div class="content" > <img src="images/t5.jpg" /> </div>
</div>
<div class="blank" ></div>
<div id="demo_2" >
<ul class="tab" >
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="content" style="display:block;" > <img src="images/t1.jpg" /> </div>
<div class="content" > <img src="images/t2.jpg" /> </div>
<div class="content" > <img src="images/t3.jpg" /> </div>
<div class="content" > <img src="images/t4.jpg" /> </div>
<div class="content" > <img src="images/t5.jpg" /> </div>
</div>
<div class="blank" ></div>
<div id="demo_3" >
<ul class="tab" >
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol class="content" >
<li > <span>新品新生活</span> <img src="images/t1.jpg" /> </li>
<li > <span>美食，美酒</span> <img src="images/t2.jpg" /> </li>
<li > <span>母婴，玩具</span><img src="images/t3.jpg" /> </li>
<li > <span>销售年中榜</span><img src="images/t4.jpg" /> </li>
<li > <span>家电万元放</span><img src="images/t5.jpg" /> </li>
</ol>
</div>
</div>
<script >
//demo 1 普通
$.st('#demo_1 li','#demo_1 .content',{'switchMode':'click'});
//demo 2 淡入淡出
$.st('#demo_2 li','#demo_2 .content',{'mode':'fade','time':3});
//demo 3 滑动方式
$.st('#demo_3 > ul > li','#demo_3 >ol',{'mode':'slide','time':3});
</script>
</body>
</html>
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 on:'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 <div id=”demo_1”
></div>
$.st('#demo_1');
最后希望同学们有空的话自己动手写写，不要觉得别人已经做好了，有现成的插件，我直接拿来用就是了，干嘛还要那么麻烦啊；
还是那句话，一些东西自己亲自做做，往往会有意外的收获。
O(∩_∩)O
收获：1.在chrome浏览器下，图片尚未加载完时，$('#img_id').height();获取到的高和宽均为0；
$(window).load(function(){ //注意用$(document).ready();不行
$('#img_id').height();//这时能获得
});
2. 由于tab <ul
class="tab" > 下的li添加了float导致tab高度不能自适应。
给tab 加上overflow:hide;
//两天前我只知道下面那种方法，惭愧啊T_T
或在里面 加上 <div style="clear:both;"
></div>
