jquery選項卡插件卷簾門滑動選項支持自動播放選項卡



104 412 138



特效描述:選項卡插件 卷簾門滑動 滑動選項 自動播放選項卡,TN34自動播放選項卡 - ?jQuery插件

代碼結構

1. 引入CSS

<link href="css/timetabs.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.timetabs.min.js" type="text/javascript"></script>

3. HTML代碼

    <div id="container">
        <div class="itemdiv left">
            <h2>Animation: <span>fade</span></h2>
            <dl class="tabs" id="tabs4">
                <dt>Tab 1</dt>
                <dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
                <dt>Tab 2</dt>
                <dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
                <dt>Tab 3</dt>
                <dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
                <dt>Tab 4</dt>
                <dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
            </dl>
            <div class="pre">
$(document).ready(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;$('dl').akkordion({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animated: 'fade'<br />
&nbsp;&nbsp;&nbsp;&nbsp;});<br />
});
            </div>
        </div>
        <div class="itemdiv right">
            <h2>Animation: <span>curtain</span></h2>
            <dl class="tabs" id="tabs3">
                <dt>Tab 1</dt>
                <dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
                <dt>Tab 2</dt>
                <dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
                <dt>Tab 3</dt>
                <dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
                <dt>Tab 4</dt>
                <dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
            </dl>
            <div class="pre">
$(document).ready(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;$('dl').akkordion({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animated: 'curtain'<br />
&nbsp;&nbsp;&nbsp;&nbsp;});<br />
});
            </div>
        </div>
        <div class="itemdiv left">
            <h2>Animation: <span>slide</span></h2>
            <dl class="tabs" id="tabs2">
                <dt>Tab 1</dt>
                <dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
                <dt>Tab 2</dt>
                <dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
                <dt>Tab 3</dt>
                <dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
                <dt>Tab 4</dt>
                <dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
            </dl>
            <div class="pre">
$(document).ready(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;$('dl').akkordion({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animated: 'slide'<br />
&nbsp;&nbsp;&nbsp;&nbsp;});<br />
});
            </div>
        </div>
        <div class="itemdiv right">
            <h2>Animation: <span>off</span></h2>
            <dl class="tabs" id="tabs1">
                <dt>Tab 1</dt>
                <dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
                <dt>Tab 2</dt>
                <dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
                <dt>Tab 3</dt>
                <dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
                <dt>Tab 4</dt>
                <dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
            </dl>
            <div class="pre">
$(document).ready(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;$('dl').akkordion({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animated: false<br />
&nbsp;&nbsp;&nbsp;&nbsp;});<br />
});
            </div>
        </div>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片滑動 圖片滑塊 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子