標籤式(Tab)圖文內容跑馬燈輪播效果

TAB標籤式切換效果 , 算是網頁設計中非常常見的前端效果 , 這次分享這款標籤式圖文跑馬燈效果 , 算是一款輕量級套件 , 並且程式結構非常單純(可參考下方HTML以及JS結構)  , 應用於靜態化頁面使用容易管理內容 , 設計於動態型網站中 , 程式撰寫也不會太複雜 , 算是非常好用的套件 !

HTML結構

1. <div id="wrapper">
   
2.         <div id="pager"></div>
   
3.         <div id="tabs">
   
4.                 <div id="blue"> <!--ID可自由命名-->
   
5.                         <img src="img/blue_muffin.png" alt="blue_muffin" width="148" height="185" />
   
6.                         <h3>TAB標籤TITLE1</h3>
   
7.                         <p>內文1</p>
   
8.                 </div>
   
9.                 <div id="pink">
   
10.                         <img src="img/light_pink_muffin.png" alt="light_pink_muffin" width="151" height="245"/>
    
11.                         <h3>TAB標籤TITLE2</h3>
    
12.                         <p>內文2</p>
    
13.                 </div>
    
14.                 <div id="white">
    
15.                         <img src="img/white_muffin.png" alt="white_muffin" width="144" height="153"/>
    
16.                         <h3>TAB標籤TITLE3</h3>
    
17.                         <p>內存3</p>
    
18.                 </div>
    
19.         </div>
    
20. </div>
    
21. <p id="source">Source: <a href="http://cupcakeipsum.com" target="_blank">cupcakeipsum.com</a></p>

複製代碼

JS部分

1. $(function() {
   
2.         var $big = $('#big .carousel'),
   
3.                 $small = $('#small .carousel');
   
4. 
   
5.         $big.carouFredSel({
   
6.                 auto: false,
   
7.                 direction: 'up',
   
8.                 scroll: {
   
9.                         items: 1,
   
10.                         duration: 300
    
11.                 },
    
12.                 prev: {
    
13.                         duration: 'auto'
    
14.                 },
    
15.                 next: {
    
16.                         duration: 'auto'
    
17.                 }
    
18.         });
    
19.        
    
20.         $small.carouFredSel({
    
21.                 align: 'left',
    
22.                 width: 'variable',
    
23.                 auto: false,
    
24.                 items:  4,
    
25.                 scroll: {
    
26.                         items: 'variable',
    
27.                         duration: 300,
    
28.                         onBefore: function( data ) {
    
29.                                 var src = data.items.visible.first().attr( 'src' ).split( '/small/' )[ 1 ];
    
30.                                 $big.trigger( 'slideTo', [ '[src$="' + src + '"]', {
    
31.                                         fx: 'directscroll',
    
32.                                         duration: 300
    
33.                                 } ] );
    
34.                         }
    
35.                 }
    
36.         });
    
37. 
    
38.         $('#small img')
    
39.                 .css( 'cursor', 'pointer' )
    
40.                 .click(function() {
    
41.                         if ( $big.triggerHandler( 'isScrolling' ) ) {
    
42.                                 return false;
    
43.                         }
    
44.                         var src = $(this).attr( 'src' ).split( '/small/' )[ 1 ];
    
45.                         $big.trigger( 'slideTo', [ '[src$="' + src + '"]' ] );
    
46. 
    
47.                         return false;
    
48.                 });
    
49. 
    
50.         $('#next').click(function() {
    
51. 
    
52.                 if ( $small.triggerHandler( 'isScrolling' ) ) {
    
53.                         return false;
    
54.                 }
    
55.                 var $visible = $small.triggerHandler( 'currentVisible' ),
    
56.                         $next = $visible.last().next(),
    
57.                         $new = $small.find( '[src^="' + $next.attr( 'src' ).split( '-' )[ 0 ] + '"]' );
    
58. 
    
59.                 $small.trigger( 'configuration', [{
    
60.                         items: {
    
61.                                 visible: $new.length
    
62.                         }
    
63.                 }, false] );
    
64.                 $small.trigger( 'next', [ $visible.length ] );
    
65. 
    
66.                 return false;
    
67.         });
    
68. });

複製代碼

          DEMO

檔案可於範例頁面中直接下載 , 或於本站附件直接下載
coolcarousel.zip (42.04 KB, 下載次數: 11)

2015-3-30 14:23 上傳

點擊文件名下載附件
閱讀權限: 10