基于jQuery仿Flash横向切换焦点图

给各网友分享一款基于jQuery仿Flash横向切换焦点图。利用Flash可以制作很多漂亮的图片相册应用，今天我们要用jQuery来实现这样的效果。它是一款仿Flash的横向图片切换焦点图插件，可以自动切换图片，也可以点击导航按钮来切换至指定的图片。该jQuery焦点图使用非常简单，而且切换效果也相当流畅。效果图如下：

在线预览源码下载

实现的代码。

html代码：

    <div id="slide-holder">

                <div id="slide-runner">

                    <a href="">

                        <img id="slide-img-1" src="data:images/nature-photo.jpg" class="slide" alt="" /></a>

                    <a href="">

                        <img id="slide-img-2" src="data:images/nature-photo1.jpg" class="slide" alt="" /></a>

                    <a href="">

                        <img id="slide-img-3" src="data:images/nature-photo2.jpg" class="slide" alt="" /></a>

                    <a href="">

                        <img id="slide-img-4" src="data:images/nature-photo3.jpg" class="slide" alt="" /></a>

                    <a href="">

                        <img id="slide-img-5" src="data:images/nature-photo4.jpg" class="slide" alt="" /></a>

                    <a href="">

                        <img id="slide-img-6" src="data:images/nature-photo4.jpg" class="slide" alt="" /></a>

                    <a href="">

                        <img id="slide-img-7" src="data:images/nature-photo6.jpg" class="slide" alt="" /></a>

                    <div id="slide-controls">

                        <p id="slide-client" class="text">

                            <strong>post: </strong><span></span>

                        </p>

                        <p id="slide-desc" class="text">

                        </p>

                        <p id="slide-nav">

                        </p>

                    </div>

                </div>

                <!--content featured gallery here -->

            </div>

js代码：

if (!window.slider) var slider = {}; slider.data = [{ "id": "slide-img-1", "client": "nature beauty", "desc": "nature beauty photography" }, { "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-6", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-7", "client": "nature beauty", "desc": "add your description here"}];

via：http://www.w2bc.com/Article/23906

巴特西

基于jQuery仿Flash横向切换焦点图

最新文章

热门文章