基于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=& ...
随机推荐
- SQL 服务没有及时响应启动或控制请求”的解决方法
解决方法很简单:卸载删除跟IIS相关的几个漏洞安全更新补丁即可,包括KB939373.KB2290570和KB2124261.卸载微软安全更新补丁的方法:打开控制面板的“添加删除程序”面板,勾 ...
- leetCode 45.Jump Game II (跳跃游戏) 解题思路和方法
Jump Game II Given an array of non-negative integers, you are initially positioned at the first inde ...
- 讯飞语音唤醒SDK集成流程
唤醒功能,顾名思义,通过语音,唤醒服务,做我们想做的事情. 效果图(开启应用后说讯飞语音或者讯飞语点唤醒) 源码下载 地址:http://download.csdn.net/detail/q48788 ...
- 算法笔记_152:算法提高 扶老奶奶过街(Java)
目录 1 问题描述 2 解决方案 1 问题描述 一共有5个红领巾,编号分别为A.B.C.D.E,老奶奶被他们其中一个扶过了马路. 五个红领巾各自说话: A :我和E都没有扶老奶奶 B :老奶奶是被 ...
- MyEclipse中出现Address already in use:JVM_Bind:8080
今天在搭建环境,跑以前的一个项目时,出现了Address already in use 的错误,这显然是tomcat的端口号被占用了,我的机子上安装了appache和appache Tomcat: 我 ...
- MVC4 WebApi开发中如果想支持Session请做好如下几个方面的问题
1.在WebApiConfig中建立建立HttpControllerHandler和HttpControllerRouteHandler 并覆写它 public class SessionRouteH ...
- windows vbs显示桌面命令
windows vbs显示桌面命令 CreationTime--2018年7月26日11点32分 Author:Marydon Dim shell Set shell = CreateObject ...
- 〖Linux〗（2013.08.02）VIM74b+YouCompleteMe，VIM代码编辑器补全能手
1. 编译和安装vim74b(参考:http://t.cn/zQa8R7h ) sudo apt-get install -y hgsvn libncurses5-dev libgnome2-dev ...
- 关于为什么要在项目中使用FTP文件服务器
传统的上传一般做法是http上传,后台接收文件流,然后写入到服务器本地硬盘的某个位置. 如果我们想把文件单独存放在别的服务器上,那就可以借助ftp服务器了. 上传的流程则变为,http上传,后台接收文 ...
- HttpSession 和URLRewriting
在上面使用Cookie技术存储会话信息的时候发现Cookie存储的数据有限,而且每次需要客户端浏览器携带数据,导致网络的负载过大.因此如果需要存储相对大量的数据,那么可以直接将数据存储在服务器端,这样 ...