基于jQuery左侧小图滚动右侧大图显示代码
今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码。该实例适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
实现的代码。
html代码：
<div class="caseImg03 w1002">
<div class="slideCase03">
<div class="bd03">
<ul>
<li class="clearfix">
<div class="smallImg03">
<img src="img/smallImg01.jpg" />
<div class="hidden">
<img src="img/bigImg01.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span> <span>装机容量：100KW</span>
<div class="text03">
项目简介：<p class="p03">
北京奥运“鸟巢”光伏示范发电工程，全部采用了阳光电源逆变器和系统设计服务，为“鸟巢”不断输送绿色电力。</p>
</div>
</div>
</div>
</div>
<div class="smallImg03">
<img src="img/smallImg02.jpg" />
<div class="hidden">
<img src="img/bigImg02.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span>
</div>
</div>
</div>
</li>
<li class="clearfix">
<div class="smallImg03">
<img src="img/smallImg03.jpg" />
<div class="hidden">
<img src="img/bigImg03.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span> <span>装机容量：100KW</span>
<div class="text03">
项目简介：<p class="p03">
北京奥运“鸟巢”光伏示范发电工程，全部采用了阳光电源逆变器和系统设计服务，为“鸟巢”不断输送绿色电力。</p>
</div>
</div>
</div>
</div>
<div class="smallImg03">
<img src="img/smallImg01.jpg" />
<div class="hidden">
<img src="img/bigImg01.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span>
</div>
</div>
</div>
</li>
<li class="clearfix">
<div class="smallImg03">
<img src="img/smallImg02.jpg" />
<div class="hidden">
<img src="img/bigImg02.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span> <span>装机容量：100KW</span>
<div class="text03">
项目简介：<p class="p03">
北京奥运“鸟巢”光伏示范发电工程，全部采用了阳光电源逆变器和系统设计服务，为“鸟巢”不断输送绿色电力。</p>
</div>
</div>
</div>
</div>
<div class="smallImg03">
<img src="img/smallImg03.jpg" />
<div class="hidden">
<img src="img/bigImg03.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span>
</div>
</div>
</div>
</li>
<li class="clearfix">
<div class="smallImg03">
<img src="img/smallImg01.jpg" />
<div class="hidden">
<img src="img/bigImg01.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span> <span>装机容量：100KW</span>
<div class="text03">
项目简介：<p class="p03">
北京奥运“鸟巢”光伏示范发电工程，全部采用了阳光电源逆变器和系统设计服务，为“鸟巢”不断输送绿色电力。</p>
</div>
</div>
</div>
</div>
<div class="smallImg03">
<img src="img/smallImg02.jpg" />
<div class="hidden">
<img src="img/bigImg02.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span>
</div>
</div>
</div>
</li>
<li class="clearfix">
<div class="smallImg03">
<img src="img/smallImg03.jpg" />
<div class="hidden">
<img src="img/bigImg03.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span> <span>装机容量：100KW</span>
<div class="text03">
项目简介：<p class="p03">
北京奥运“鸟巢”光伏示范发电工程，全部采用了阳光电源逆变器和系统设计服务，为“鸟巢”不断输送绿色电力。</p>
</div>
</div>
</div>
</div>
<div class="smallImg03">
<img src="img/smallImg02.jpg" />
<div class="hidden">
<img src="img/bigImg02.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span>
</div>
</div>
</div>
</li>
<li class="clearfix">
<div class="smallImg03">
<img src="img/smallImg01.jpg" />
<div class="hidden">
<img src="img/bigImg01.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span> <span>装机容量：100KW</span>
<div class="text03">
项目简介：<p class="p03">
北京奥运“鸟巢”光伏示范发电工程，全部采用了阳光电源逆变器和系统设计服务，为“鸟巢”不断输送绿色电力。</p>
</div>
</div>
</div>
</div>
<div class="smallImg03">
<img src="img/smallImg03.jpg" />
<div class="hidden">
<img src="img/bigImg03.jpg" />
<div class="hiddBg">
<span>项目名称：奥运鸟巢光伏并网发电项目</span> <span>建设地点：北京</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="hd03">
<a class="next"></a>
<ul>
</ul>
<a class="prev"></a>
</div>
</div>
<div class="caselayBox">
<div class="casehtml">
</div>
</div>
</div>
css代码：
*
{
margin:;
padding:;
list-style-type: none;
}
a, img
{
border:;
}
body
{
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
/*clearfix清除浮动*/
.clearfix:after
{
visibility: hidden;
display: block;
content: " ";
clear: both;
height:;
line-height:;
}
.clearfix
{
zoom:;
}
.w1002
{
width: 1002px;
margin: 0 auto;
}
via：http://www.w2bc.com/Article/24008
基于jQuery左侧小图滚动右侧大图显示代码的更多相关文章
- 基于jQuery左侧大图右侧小图切换代码
基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 基于jquery打造的网页右侧自动收缩浮动在线客服代码
基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
- 基于jQuery弹出层图片动画查看代码
分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&q ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 基于jQuery果冻式按钮焦点图切换代码
基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于jQuery滑动分步式进度导航条代码
分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=& ...
随机推荐
- 《纵向切入ASP.NET 3.5控件和组件开发技术》笔记：高效率事件集合对象
在之前讲的几个例子中,使用的是最普通的定义事件方法,比如KingTextBox中事件是这样定义的:/// <summary>/// 获得本书更多内容,请看:/// http://blog. ...
- C#装饰者模式实例代码
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 装饰者 ...
- c#中this的用法
在C#中,this关键字代表当前实例,我们可以用this.来调用当前实例的成员方法,变量,属性,字段等; 也可以用this来做为参数状当前实例做为参数传入方法. 还可以通过this[]来声明索引器 下 ...
- [C++基础]那些容易被混淆的概念：函数/数组指针-指针函数/数组，类/函数模板-模板类/函数
函数指针-指针函数 函数指针的重点是指针.表示的是一个指针,它指向的是一个函数.eg: int (*pf)(); 指针函数的重点是函数.表示的是一个函数,它的返回值是指针.eg: int* fun() ...
- Java内存溢出的详细解决方案（转http://developer.51cto.com/art/200906/129346.htm）
一.内存溢出类型 1.java.lang.OutOfMemoryError: PermGen space JVM管理两种类型的内存,堆和非堆.堆是给开发人员用的上面说的就是,是在JVM启动时创建:非堆 ...
- ASP.NET MVC中权限控制的简单实现
1.重写AuthorizeAttribute类,用自己的权限控制逻辑重写AuthorizeCore方法 public class MyAuthorizeAttribute : AuthorizeAtt ...
- 零java基础搞定微信Server
自从打通了微信client到BLE设备端的通道.我的工作就转移到了server端了.微信的BlueDemoServer是以java编写,而本尊仅仅懂得嵌入式,对JavaWeb一窍不通. 本尊贵为IOT ...
- Python 遍历dict
遍历dict 由于dict也是一个集合,所以,遍历dict和遍历list类似,都可以通过 for 循环实现. 直接使用for循环可以遍历 dict 的 key: >>> d = { ...
- linux内核——会话、进程组、线程组
会话.进程组.线程组总体关系示意图 待插入 Session(会话)与进程组 Shell 分前后台来控制的不是进程而是作业(Job)或者进程组(Process Group).一个前台作业可以由多个进程组 ...
- 【APP接口开发】php获取body数据
PHP获取接口数据: $postStr = file_get_contents("php://input");//因为很多都设置了register_globals禁止,不能用$GL ...