您当前的位置: 首页 > jQuery

基于jQuery右面带缩略图导航的焦点图

发布时间：2010-05-20 14:01:29 文章来源：www.iduyao.cn 采编人员：星星草

基于jQuery右侧带缩略图导航的焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件，这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表，并且可以定义任意数量的图片，你可以拖动列表来查看所有的图片，点击缩略图后，即可实现图片的上下切换动画。

实现的代码。

html代码：

 <div id="example5" class="slider-pro">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg"
                    data-retina="images/image1_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg"
                    data-retina="images/image2_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg"
                    data-retina="images/image3_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg"
                    data-retina="images/image4_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg"
                    data-retina="images/image5_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg"
                    data-retina="images/image1_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg"
                    data-retina="images/image2_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg"
                    data-retina="images/image3_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg"
                    data-retina="images/image4_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg"
                    data-retina="images/image5_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
        </div>
        <div class="sp-thumbnails">
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image1_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image2_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image3_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image4_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image5_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image6_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image7_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image8_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image9_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image10_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
        </div>
    </div>

js代码：

 $(document).ready(function ($) {
            $('#example5').sliderPro({
                width: 670,
                height: 500,
                orientation: 'vertical',
                loop: false,
                arrows: true,
                buttons: false,
                thumbnailsPosition: 'right',
                thumbnailPointer: true,
                thumbnailWidth: 290,
                breakpoints: {
                    800: {
                        thumbnailsPosition: 'bottom',
                        thumbnailWidth: 270,
                        thumbnailHeight: 100
                    },
                    500: {
                        thumbnailsPosition: 'bottom',
                        thumbnailWidth: 120,
                        thumbnailHeight: 50
                    }
                }
            });
        });

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

上一篇：JQuery统制div外点击隐藏，div内点击不会隐藏
下一篇：jQuery当用之（二）使用jQuery管理选择结果（荐）

友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

其他相似内容：

jQuery搜索框输入文字下拉揭示菜单

jQuery搜索框输入文字下拉提示菜单 jQuery搜索框输入文字下拉提示菜单原文地址： http://www.jq22.com/jquery-info6193 ...
7个替开发者准备的有用的jQuery技巧

7个为开发者准备的有用的jQuery技巧一、在新窗口打开链接用下面的代码，你点击链接即可在新窗口打开： $(document).ready(fu...
jQuery获取呼应Input例子

jQuery获取相应Input例子页面上有许多input框，使用的是EasyUI样式，中间还参杂着各种其他无id的Input框，如下： <input class=...
webpack 引出jquery和第三方jquery插件

webpack 引入jquery和第三方jquery插件 1、引入jquery jQuery 直接在 html 中引入，然后在 webpack 中把它配置为全局即可。 index....
JQuery的开发与使用经验

JQuery的开发与使用心得关于jQuery的入门使用jQuery可以很容易或具有挑战性的，这取决于你如何使用JavaScript，HTML，CSS进行开发和...
深入学习jQuery卡通片控制

深入学习jQuery动画控制 × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制前面的话　　jQuery动画可以使用fade、...
jquery操作table报表

jquery操作table表格一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...
html + css + jquery实现简略的进度条实例

html + css + jquery实现简单的进度条实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq...
jquery中ajax方法的datatype的功用

jquery中ajax方法的datatype的作用今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...
jQuery菜单示范（全选，反选，取消）

jQuery菜单示例（全选，反选，取消） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

基于jQuery右面带缩略图导航的焦点图

其他相似内容：

热门推荐：