编程 Javascript

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图片切换特效代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网页中实现浏览器的最大，最小化和关闭按钮

Mar 12 Javascript

给jqGrid数据行添加修改和删除操作链接（之一）

Nov 04 Javascript

js数组的基本用法及数组根据下标(数值或字符)移除元素

Oct 20 Javascript

JavaScript中Date.toSource()方法的使用教程

Jun 12 Javascript

jQuery垂直多级导航菜单代码分享

Aug 18 Javascript

基于jQuery实现的双11天猫拆红包抽奖效果

Dec 01 Javascript

jQuery基于cookie实现的购物车实例分析

Dec 24 Javascript

angularjs 源码解析之injector

Aug 22 Javascript

JavaScript严格模式详解

Jan 16 Javascript

vue2.X组件学习心得(新手必看篇)

Jul 05 Javascript

详解Vue用cmd创建项目

Feb 12 Javascript

WebGL three.js学习笔记之阴影与实现物体的动画效果

Apr 25 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

sphinx增量索引的一个问题

2011/06/14 PHP

PHP求最大子序列和的算法实现

2011/06/24 PHP

php读取3389的脚本

2014/05/06 PHP

PHP中使用数组指针函数操作数组示例

2014/11/19 PHP

php+xml实现在线英文词典之添加词条的方法

2015/01/23 PHP

PHP人民币金额转大写实例代码

2015/10/02 PHP

php中二分法查找算法实例分析

2016/09/22 PHP

PHP 与 UTF-8 的最佳实践详细介绍

2017/01/04 PHP

PHP批量删除jQuery操作

2017/07/23 PHP

PHP实现的数据对象映射模式详解

2019/03/20 PHP

javascript学习笔记(十三) js闭包介绍(转)

2012/06/20 Javascript

jQuery之折叠面板的深入解析

2013/06/19 Javascript

jQuery动画效果-slideUp slideDown上下滑动示例代码

2013/08/28 Javascript

简单的js表单验证函数

2013/10/28 Javascript

三种方式获取XMLHttpRequest对象

2014/04/21 Javascript

angularjs的一些优化小技巧

2014/12/06 Javascript

jQuery获取DOM节点实例分析(2种方式)

2015/12/15 Javascript

JS实现的适合做faq或menu滑动效果示例

2016/11/17 Javascript

微信小程序获取用户openid的实现

2018/12/24 Javascript

详解基于React.js和Node.js的SSR实现方案

2019/03/21 Javascript

[01:19]DOTA2城市挑战赛报名开始开启你的城市传奇

2018/03/23 DOTA

深入理解python对json的操作总结

2017/01/05 Python

python中Apriori算法实现讲解

2017/12/10 Python

python list转矩阵的实例讲解

2018/08/04 Python

python flask安装和命令详解

2019/04/02 Python

Django如何将URL映射到视图

2019/07/29 Python

python 实现 hive中类似 lateral view explode的功能示例

2020/05/18 Python

python用分数表示矩阵的方法实例

2021/01/11 Python

在IE6系列等老式浏览器中使用HTML5的新标签实现方案

2012/12/25 HTML / CSS

美国时尚在线：Showpo

2017/09/08 全球购物

高三学生评语大全

2014/04/25 职场文书

新党章的学习心得体会

2014/11/07 职场文书

HTML中的表单Form实现居中效果

2021/05/25 HTML / CSS

JavaScript实现栈结构详细过程

2021/12/06 Javascript

MySQL RC事务隔离的实现

2022/03/31 MySQL

CentOS7设置ssh服务以及端口修改方式

2022/12/24 Servers