Code

多种效果图片切换-带数字导航。
这个jQuery插件能够以奇特的切换效果幻灯展示图片。它支持三种切换效果包括:波浪、拉链和卷帘。可以为图片设置标题,切换速度等。
效果预览-点击图片左边导航,预览不同效果。
效果预览-图片带链接,点击图片跳转到相应页面。
美式柔软巧克力布朗尼蛋糕,散发香醇巧克力风味。 甘醇巧克力制造,完全体验巧克力的甘、醇、香。 外酥内软口感,尽是甘醇巧克力与奶香 。 香草蛋糕与巧克力蛋糕的完美结合,配合奶油巧克力淋浇,香香甜甜你最爱 。
代码
1.在body里加入如下HTML代码:

<!--图片无链接格式。图片底部的标题即是img标签alt属性里的文字,alt属性为空则不显示图片标题。-->
<div class="showbox_container">
    <div id="ft_showbox">
        <img src="images/img_1.jpg" alt="美式柔软巧克力布朗尼蛋糕,散发香醇巧克力风味。" />
        <img src="images/img_2.jpg" alt="甘醇巧克力制造,完全体验巧克力的甘、醇、香。" />
        <img src="images/img_3.jpg" alt="外酥内软口感,尽是甘醇巧克力与奶香 。" />
        <img src="images/img_4.jpg" alt="香草蛋糕与巧克力蛋糕的完美结合,配合奶油巧克力淋浇,香香甜甜你最爱 。" />
    </div>
</div>


<!--图片有链接格式。链接地址跟在图片后面。需给每张图片后面都加上链接,并且设置js参数links: true。-->
<div class="showbox_container">
    <div id="ft_showbox">
        <img src="images/img_1.jpg" alt="美式柔软巧克力布朗尼蛋糕,散发香醇巧克力风味。" />
        <a href="#1"></a>
        <img src="images/img_2.jpg" alt="甘醇巧克力制造,完全体验巧克力的甘、醇、香。" />
        <a href="#2"></a>
        <img src="images/img_3.jpg" alt="外酥内软口感,尽是甘醇巧克力与奶香 。" />
        <a href="#3"></a>
        <img src="images/img_4.jpg" alt="香草蛋糕与巧克力蛋糕的完美结合,配合奶油巧克力淋浇,香香甜甜你最爱 。" />
        <a href="#4"></a>
    </div>
</div>

2.在head标签内加入css:

<style type="text/css">
    .showbox_container
    {
        border: 2px solid #dddddd;
        padding: 2px;
        width: 560px;
        position:relative;
    }
    #ft_showbox
    {
        width: 560px;
        height: 200px;
        overflow: hidden;
    }
    .ft-title /* 标题样式 */
    {
        padding-left:10px;
        height:26px;
        line-height:26px;
        font-size: 12px;
        width: 550px;
    }
    .ft-button-div
    {
        height: 20px;
        position:absolute;
        right:8px;
        bottom:4px;
        z-index:1001;
    }
    .ft-buttons-a /* 按钮样式 */
    {
        background-color: #FCF2CF;
        border: 1px solid #F47500;
        color: #D94B01;
        cursor: pointer;
        float: left;
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        margin-left: 3px;
        text-align: center;
        width: 16px;
    }
    .ft-button-active
    {
        background-color: #ffb442;
        color:#ffffff;
        font-weight:bold;
    }
</style>

3.在body底部引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jqFancyTransitions.js" type="text/javascript"></script>

4.继续在body底部加入js代码:

<!--wave效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ effect: 'wave' });
    })
</script>


<!--zipper效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ effect: 'zipper' });
    })
</script>


<!--curtain效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ effect: 'curtain' });
    })
</script>


<!--fountain top效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ position: 'top', direction: 'fountain' });
    })
</script>


<!--random top效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ position: 'top', direction: 'random' });
    })
</script>


<!--curtain alternate效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ position: 'curtain', direction: 'alternate' });
    })
</script>


<!--left top效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ position: 'top', direction: 'left' });
    })
</script>


<!--right bottom效果js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ position: 'bottom', direction: 'right' });
    })
</script>


<!--图片带链接js-->
<script type="text/javascript">
    $(function() {
        $("#ft_showbox").jqFancyTransitions({ links: true });
    })
</script>

5.参数列表:
参数名 默认值 说明
effect "zipper" 图片切换效果,支持:"wave:", "zipper", "curtain"
strips 10 切片个数,建议不要设的太大,否则会影响网页性能。
delay 5000 图片切换延迟时间。以毫秒为单位。
stripDelay 50 切片的切换速度。以毫秒为单位。
titleSpeed 1000 图片标题出现的速度。以毫秒为单位。
position "alternate" 起始切换位置,支持:"top", "bottom", "alternate", "curtain"。
direction "fountainAlternate" 切换方向,支持:"left", "right", "alternate", "random", "fountain", "fountainAlternate"。
navigation true 是否显示按钮。
links false 是否开启图片超链接。