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

浏览数：26 / 时间：2015年06月09日

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

技术分享

在线预览源码下载

实现的代码。

html代码：

    <div id="slide-holder">
                <div id="slide-runner">
                    <a href="">
                        <img id="slide-img-1" src="images/nature-photo.jpg" class="slide" alt="" /></a>
                    <a href="">
                        <img id="slide-img-2" src="images/nature-photo1.jpg" class="slide" alt="" /></a>
                    <a href="">
                        <img id="slide-img-3" src="images/nature-photo2.jpg" class="slide" alt="" /></a>
                    <a href="">
                        <img id="slide-img-4" src="images/nature-photo3.jpg" class="slide" alt="" /></a>
                    <a href="">
                        <img id="slide-img-5" src="images/nature-photo4.jpg" class="slide" alt="" /></a>
                    <a href="">
                        <img id="slide-img-6" src="images/nature-photo4.jpg" class="slide" alt="" /></a>
                    <a href="">
                        <img id="slide-img-7" src="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横向切换焦点图