基于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 ...
随机推荐
- mysql 的 GROUP_CONCAT
GROUP_CONCAT 通常跟 group by 一起用,但也可以不用.例:select GROUP_CONCAT(pct_id) as pct_ids from (select max(pct_i ...
- Compiling Xen-4.4 From Source And Installing It On Ubuntu Server (Amd-64)
First of all, you should install a clean Ubuntu Server (Amd-64) on your server. (Version 14.04 is st ...
- dom 封装表单控件
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Android Studio 中SDK Manager的设置
android studio 代码块左边的缩进对齐线的颜色修改: Settings -> Editor -> Colors & Fonts -> General -> ...
- 非官方的iOS设计指南
非官方的iOS设计指南 有时候为iOS设计app并不是一件简单的事,但是如果你能找到正确的最新的苹果设备信息,并按照正确的方向,那么为iOS设计app或许会变得简单容易些. 关于这些指南 这些指南描述 ...
- Could not find a transformer to transform "SimpleDataType{type=org.mule.transport.NullPayload
mule esb报错 com.isoftstone.esb.transformer.Json2RequestBusinessObject.transformMessage(Json2RequestBu ...
- ASA与PIX的区别
很多年来,Cisco PIX一直都是Cisco确定的防火墙.但是在2005年5月,Cisco推出了一个新的产品——适应性安全产品(ASA,Adaptive Security Appliance).不过 ...
- 进入GRUB改root用户密码
开机读取倒计时时按任意键----e---->选择第二行 kernel ---->按e, 再按空格 >输入1----回车--->选择kernel输入b----> passw ...
- Android_UI_点击按钮切换背景效果实现
实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...
- 解决远程连接mysql错误1130
Mysql远程连接Mysql服务器的数据库,错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx is not allowed to connect to this ...