服務信箱：sr.design2011@gmail.com搜尋本網站

SR網頁設計工作室 - 購物網站/企業官網專業開發

搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 › JS程式語法 › 標籤式(Tab)圖文內容跑馬燈輪播效果

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

byadmin 發表於 2015-3-30 14:24:02 , 5178人已閱讀 , 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');

  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.         });

  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 + '"]' ] );

  47.                         return false;
  48.                 });

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

  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 ] + '"]' );

  59.                 $small.trigger( 'configuration', [{
  60.                         items: {
  61.                                 visible: $new.length
  62.                         }
  63.                 }, false] );
  64.                 $small.trigger( 'next', [ $visible.length ] );

  66.                 return false;
  67.         });
  68. });
複製代碼



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

網頁設計

相關帖子

收藏回覆 只看該作者 道具 舉報

返回列表
Traffic Exchange Site
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

admin

文章分類

Contact us

歡迎您使用以下方式聯繫我們 , 本工作室服務時間為每日早上10:00點至晚間7:30點 ,也可點選下方 Contact us 進入留言板留下您的問題與相關聯絡資訊 , 我們將會儘快了解與回覆您。

SR數位設計工作室

  • 服務專線：03-3555-069


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

信箱：sr.design2011@gmail.com

本網站推薦使用以下瀏覽器 (請點擊圖式下載)

, Processed in 0.092436 second(s), 41 queries , Gzip On.

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

Core - DZ2.5　GMT+8, 2024-12-4 16:40

回頂部