jQuery左侧大图右侧小图焦点图幻灯切换代码分享


Posted in Javascript onAugust 19, 2015

这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行隐藏与显示,是一段超酷的焦点图轮播代码。

 为大家分享的jQuery左侧大图右侧小图焦点图幻灯切换代码如下

---------------------源码下载  效果查看----------------------- 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左侧大图右侧小图切换代码 </title>

<link rel="stylesheet" type="text/css" href="css/index.css" media="all">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</head>

<body>
<br>
<div class="examples_body">

 <div class="examples_bg">
 
 <div class="examples_image">
 <img src="images/sample_banner1.jpg" alt="" />
 <div class="desc">
 <a href="#" class="collapse">Close Me!</a>
 <div class="block">
 <h4>三水点靠木https://3water.com</h4>
 <small>三水点靠木发布时间</small>
 <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。</p>
 </div> 
 </div>
 </div>
 
 <div class="mune_thumb">
 <ul>
 <li>
 <a href="images/sample_banner1.jpg"><img src="images/sample_banner1_thumb.jpg" alt="Image Name" /></a>
 <div class="block">
 <h4>三水点靠木二号图片</h4>
 <small>三水点靠木发布时间</small>
 <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。</p>
 </div>
 </li>
 <li>
 <a href="images/sample_banner2.jpg"><img src="images/sample_banner2_thumb.jpg" alt="Image Name" /></a>
 <div class="block">
 <h4 class="title02">三水点靠木三号图片</h4>
 <small>三水点靠木发布时间</small>
 <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。</p>
 </div>
 </li>
 <li>
 <a href="images/sample_banner3.jpg"><img src="images/sample_banner3_thumb.jpg" alt="Image Name" /></a>
 <div class="block">
 <h4 class="title03">三水点靠木四号图片</h4>
 <small>三水点靠木发布时间</small>
 <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。</p>
 </div>
 </li>
 <li>
 <a href="images/sample_banner4.jpg"><img src="images/sample_banner4_thumb.jpg" alt="Image Name" /></a>
 <div class="block">
 <h4 class="title04">三水点靠木五号图片</h4>
 <small>三水点靠木发布时间</small>
 <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。</p>
 </div>
 </li>
 </ul>
 </div>
 
 </div>

</div>


</body>
</html>

运行效果图: 

jQuery左侧大图右侧小图焦点图幻灯切换代码分享

更多精彩内容大家还可以参考《jQuery焦点图特效汇总》进行学习,希望大家喜欢。

 以上就是为大家分享的一款带右侧缩略图选项卡的jQuery图片切换特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
微信小程序制作表格的方法
2019/02/14 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python统计单词出现的次数
2018/04/04 Python
python3实现磁盘空间监控
2018/06/21 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python批量爬取下载抖音视频
2019/06/17 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python批量处理文件或文件夹
2020/07/28 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
接待员岗位责任制
2014/02/10 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
雨花台导游词
2015/02/06 职场文书
交通安全月活动总结
2015/05/08 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫