jQuery实现带数字导航的图片轮转切换

网站制作经常会用到图片轮转特效，过去普遍使用的是flash实现，现在可以使用jQuery很轻松的实现这一功能。

Demo演示页面

这里使用的是jqFancyTransition，首先在html头部加入jQuery和jqFancyTransitions

<script src="jquery-1.7.2.min.js"></script>
<script src="jqFancyTransitions.1.8.js"></script>

按一下结构放置图片和链接

<div style="width: 940px; margin: auto;">
    <div id="slideshow">
        <img src="1.png" alt="img1" />
        <img src="2.png" alt="img2" />
        <img src="3.png" alt="img3" />
        <img src="4.png" alt="img4" />
    </div>
</div>

最后调用jqFancyTransition实现图片轮转功能

$(document).ready( function(){
    $('#slideshow').jqFancyTransitions({
        width: 940,
        height: 300,
        navigation: true,
        effect:'curtain',
        inks: true
    });
});

由于jqFancyTransition自带的数字导航过于简陋，小小的修正了一下css代码，使其稍稍美观了一些。

.ft-button-slideshow { color: #000; background-color: #fff; }
.ft-button-slideshow-active { color: #fff; background-color: #000; }

示例打包下载