搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 標籤式(Tab)圖文內容跑馬燈輪播效果
byadmin 發表於 2015-3-30 14:24:02 , 4855人已閱讀 , 0人回應
TAB標籤式輪播效果.jpg

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.         $big.carouFredSel({
  5.                 auto: false,
  6.                 direction: 'up',
  7.                 scroll: {
  8.                         items: 1,
  9.                         duration: 300
  10.                 },
  11.                 prev: {
  12.                         duration: 'auto'
  13.                 },
  14.                 next: {
  15.                         duration: 'auto'
  16.                 }
  17.         });
  18.        
  19.         $small.carouFredSel({
  20.                 align: 'left',
  21.                 width: 'variable',
  22.                 auto: false,
  23.                 items:  4,
  24.                 scroll: {
  25.                         items: 'variable',
  26.                         duration: 300,
  27.                         onBefore: function( data ) {
  28.                                 var src = data.items.visible.first().attr( 'src' ).split( '/small/' )[ 1 ];
  29.                                 $big.trigger( 'slideTo', [ '[src$="' + src + '"]', {
  30.                                         fx: 'directscroll',
  31.                                         duration: 300
  32.                                 } ] );
  33.                         }
  34.                 }
  35.         });

  36.         $('#small img')
  37.                 .css( 'cursor', 'pointer' )
  38.                 .click(function() {
  39.                         if ( $big.triggerHandler( 'isScrolling' ) ) {
  40.                                 return false;
  41.                         }
  42.                         var src = $(this).attr( 'src' ).split( '/small/' )[ 1 ];
  43.                         $big.trigger( 'slideTo', [ '[src$="' + src + '"]' ] );

  44.                         return false;
  45.                 });

  46.         $('#next').click(function() {

  47.                 if ( $small.triggerHandler( 'isScrolling' ) ) {
  48.                         return false;
  49.                 }
  50.                 var $visible = $small.triggerHandler( 'currentVisible' ),
  51.                         $next = $visible.last().next(),
  52.                         $new = $small.find( '[src^="' + $next.attr( 'src' ).split( '-' )[ 0 ] + '"]' );

  53.                 $small.trigger( 'configuration', [{
  54.                         items: {
  55.                                 visible: $new.length
  56.                         }
  57.                 }, false] );
  58.                 $small.trigger( 'next', [ $visible.length ] );

  59.                 return false;
  60.         });
  61. });
複製代碼



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

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.228383 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-29 21:23

回頂部