基于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=& ...
随机推荐
- WebApi-如何实现接口加密
方法一 加一个访问token.例如你的api地址是http://www.example.com/api.php需要接受的参数有a,b,c三个那么可以加一个验证token(通过约定的key加密生成). ...
- 转：mac下安装Sublime Text
转:http://blog.sina.com.cn/s/blog_559d66460101cab0.html 正版的买个license其实并不贵,定价为70美元.如果不买license,也可acces ...
- JS及JQuery对Html内容编码,Html转义
1利用jquery /** JQuery Html Encoding.Decoding * 原理是利用JQuery自带的html()和text()函数可以转义Html字符 * 虚拟一个Div通过赋值和 ...
- iOS子线程操作检测版本更新，有新版本通知用户更新, CheckVersion
iOS子线程操作检测版本更新,有新版本通知用户更新 CheckVersion 一:如何使用: #import "CheckVersion.h" //输入你的app在appStore ...
- python发送邮件实例1
文件形式的邮件 #!/usr/bin/env python3 #coding: utf-8 import smtplib from email.mime.text import MIMEText fr ...
- Vue中使用节流Lodash throttle
在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适 ...
- Jni中图片传递的3种方式（转）
java层的图片如何传递到c/c+层处理,处理完之后如何传回java层,下面总结了一下用到的三种方法. 1.将Bitmap转为int[]数组对象,将数组作为参数传递到C/C++层,处理完之后再以int ...
- 〖Linux〗（2013.08.02）VIM74b+YouCompleteMe，VIM代码编辑器补全能手
1. 编译和安装vim74b(参考:http://t.cn/zQa8R7h ) sudo apt-get install -y hgsvn libncurses5-dev libgnome2-dev ...
- KVM虚拟化学习笔记系列文章列表（转）
Kernel-based Virtual Machine KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之k ...
- 数据库选型之MySQL(普通硬盘)
刘勇 Email:lyssym@sina.com 本博客记录作者在工作与研究中所经历的点滴,一方面给自己的工作与生活留下印记,另一方面若是能对大家有所帮助,则幸甚至哉矣! 简介 鉴于高频中心库ta ...