倪浩

前些天寫的一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>

完整實例下載

posted on 2011-08-02 16:27 倪浩閱讀(1787) 評論(6) 收藏舉報

刷新頁面返回頂部

倪浩

前些天寫的一jquery首頁圖片切換插件（額，不知道這種效果叫什么名字）

公告

導航

倪浩

前些天寫的一jquery首頁圖片切換插件（額，不知道這種效果叫什么名字）

公告

導航

前些天寫的一jquery首頁圖片切換插件（額，不知道這種效果叫什么名字）