基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="examples_body">

    <div class="examples_bg">

        <div class="examples_image">
<img src="data:images/sample_banner1.jpg" alt="" />
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h4>爱编程一号图片</h4>
<small>爱编程发布时间</small>
<p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
</div>
</div>
</div> <div class="mune_thumb">
<ul>
<li>
<a href="images/sample_banner1.jpg"><img src="data:images/sample_banner1_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h4>爱编程二号图片</h4>
<small>爱编程发布时间</small>
<p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
</div>
</li>
<li>
<a href="images/sample_banner2.jpg"><img src="data:images/sample_banner2_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h4 class="title02">爱编程三号图片</h4>
<small>爱编程发布时间</small>
<p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
</div>
</li>
<li>
<a href="images/sample_banner3.jpg"><img src="data:images/sample_banner3_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h4 class="title03">爱编程四号图片</h4>
<small>爱编程发布时间</small>
<p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
</div>
</li>
<li>
<a href="images/sample_banner4.jpg"><img src="data:images/sample_banner4_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h4 class="title04">爱编程五号图片</h4>
<small>爱编程发布时间</small>
<p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
</div>
</li>
</ul>
</div> </div> </div>

via:http://www.w2bc.com/Article/43287

基于jQuery左侧大图右侧小图切换代码的更多相关文章

  1. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  2. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  3. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  4. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  5. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  7. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

  8. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  9. 基于jquery地图特效全国网点查看代码

    基于jquery地图特效全国网点查看代码.这是一款简单实用的jQuery地图特效,主要知识点是jquery和css实现了中图地图,提示层效果.效果图如下: 在线预览   源码下载 实现的代码. htm ...

随机推荐

  1. 【Linux】字符转换命令tr

    tr (traslate的缩写)可以用来删除一段信息当中的文字,或者是进行文字信息的替换! [root@www ~]# tr [-ds] SET1 ... 选项与参数: -d :删除信息当中的 SET ...

  2. Android ListView滚动条配置完全解析

    滚动条的相关显示效果 先来看下ListView的滚动条有哪些显示效果. 滚动条自身的外观 这点不用说,就是滚动条自身的颜色,形状等. Track的外观 默认的ListView是没有设置Track的.为 ...

  3. struts系列:返回json格式的响应

    一.增加依赖库 // https://mvnrepository.com/artifact/org.apache.struts/struts2-json-plugin compile group: ' ...

  4. SqlExcel使用文档及源码

    昨天帮朋友做了个小工具,以完成多表连接处理一些数据.今天下班后又做了份使用文档,不知友能看懂否?现将使用文档及源码发布如下,以供有同样需求的朋友下载. 使用文档 一.增.改.查.删 1.增(向shee ...

  5. easyui中combobox的值改变onchang事件

    今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会犯错了! 首先,肯定少不了,引入jquery的js文件!请大家注意了! 下面是代码 ...

  6. U811.1接口EAI系列之五--材料出库--VB语言

    主要业务有:09其他出库单 11:材料出库单 32:销售出库单 主要业务代码: '材料出库生成XML Public Function xml_storeout(ds_head As MSHFlexGr ...

  7. yml配置文件

    1 yaml配置文件中是以空格来区分是否是同一层级.在键值对的冒号之后要有空格. 2 属性值:数值.字符串.bool 值,直接写即可.双引号会将特殊字符进行转义,例如:"nice \n go ...

  8. MySql(十五):MySql架构设计——可扩展性设计之 Cache 与 Search 的利用

    前言 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为宽广的发散开来.这一章,我们就将跳出完全依靠数据库自身来改善扩 ...

  9. 使用maven-shade-plugin插件解决spark依赖冲突问题

    依赖冲突:NoSuchMethodError,ClassNotFoundException   当用户应用于Spark本身依赖同一个库时可能会发生依赖冲突,导致程序奔溃.依赖冲突表现为在运行中出现No ...

  10. ubuntu18.04分辨率

    一.使用xrandr命令可以查询当前的显示状态.找出被连接的显示器名称:VGA-1 jack@noi:~$ xrandr Screen : minimum x , current x , maximu ...