基于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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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右侧带缩略图导航的焦点图的更多相关文章
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...
- 一款基于jQuery的全屏广告图片焦点图
之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览 源码下载 实现 ...
- 基于jquery右侧悬浮加入购物车代码
分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览 源码下载 实现的代码: <!--左侧产品parabola.js控制 ...
- 基于jquery的侧边栏分享导航
今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 基于jQuery点击缩略图右侧滑出大图特效
基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览 源码下载 部分代码: <div class=&quo ...
- 一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
随机推荐
- Hadoop2.2.0 手动切换HA环境搭建
ssh-copy-id -i hadoop5含义: 节点hadoop4上执行ssh-copy-id -i hadoop5的含义是把hadoop4上的公钥id_rsa.pub的内容追加到hadoop5的 ...
- POJ 3164 Command Network （最小树形图）
[题目链接]http://poj.org/problem?id=3164 [解题思路]百度百科:最小树形图 ]里面有详细的解释,而Notonlysucess有精简的模板,下文有对其模板的一点解释,前提 ...
- openfire 最大连接数调优
https://community.igniterealtime.org/thread/48064#224126 https://community.igniterealtime.org/thread ...
- Controlling GameObjects Using Components
[Accessing Components] The most common case is where a script needs access to other Components attac ...
- Struts – Multiple configuration files example
Many developers like to put all Struts related stuff (action, form) into a single Struts configurati ...
- 应用c#读取带cookie的http数据
@(编程) private static string Login() { string url = string.Format("{0}/login-submit.html?identit ...
- spring mvc为何多注入了个SimpleUrlHandlerMapping？
最近在调试项目时,debug DispatcherServlet时,发现handlerMappings属性包含了RequestMappingHandlerMapping.SimpleUrlHandle ...
- linux下 ls 排序
ls -lS 按大小降序排列 ls -l | sort -n -k5 按大小升序 ls -lrt 按时间降 ...
- oracle不用tsname文件的时候着怎么办
oracle\product\10.2.0\client_2\odp.net\PublisherPolicy\Policy.9.2.Oracle.DataAccess.config 找到newVers ...
- POJ1185状态压缩DP
难得的中文题. POJ1185http://poj.org/problem?id=1185 方法就是用DP[i][r][p]表示第i行状态为r,第i-1行状态是p时的最多个数.而这里p受到r的限制,而 ...