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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 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
Zerg剧情介绍
2020/03/14 星际争霸
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python处理html转义字符的方法详解
2016/07/01 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
教学改革问题查摆整改措施
2014/09/27 职场文书
北大自主招生自荐信
2015/03/04 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
奖励申请报告范文
2015/05/15 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
政审证明范文
2015/06/19 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
PHP中->和=>的意思
2021/03/31 PHP
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python