今天给大家分享一款 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左侧小图滚动右侧大图显示代码的更多相关文章

  1. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

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

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

  3. 基于jquery打造的网页右侧自动收缩浮动在线客服代码

    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...

  4. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  5. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  6. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  7. 基于jQuery会员中心安全修改表单代码

    基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  8. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  9. 基于jQuery滑动分步式进度导航条代码

    分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=& ...

随机推荐

  1. SQL Server基础知识三十三问 (1-7)

    1. SQL Server运行在什么端口上? 可以被修改么? 答: 1433端口. 可以修改的, 在SQL Server Configuration Manager的SQL Server Networ ...

  2. javascript实现浏览器窗口传递参数

    a.html <html> <head> <title>主页面</title> <script language="javascript ...

  3. jQuery过滤选择器:not()方法介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not ...

  4. git/github运用

    了解git和svn很久了,但是一直没有拿来做过版本控制管理,虽然svn有用到过,但是觉得还是运用git的比较多吧,尤其github. Git术语                             ...

  5. SQL语法 之 操作语句

    一.插入语句 1.插入单行记录 INSERT INTO table_name|view_name［(column1_name [,column2_name, ... ])］ VALUES( value ...

  6. iOS kvo 结合 FBKVOController 的使用

    iOS kvo 结合 FBKVOController 的使用 一:FBKVOControlloer是FaceBook开源的一个 在 iOS,maxOS上使用 kvo的 开源库: 提供了block和@s ...

  7. HTML charset 网页编码设定

    一:HTML4 <metahttp-equiv="content-type"content="text/html; charset=UTF-8" /> ...

  8. HTTP浏览器缓存机制

    来自:http://kb.cnblogs.com/page/165307/ 浏览器缓存机制 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires: Cache-control等 ...

  9. taro 打包微信小程序运行失败（一）

    1.报错信息 thirdScriptError sdk uncaught third Error Cannot read property 'createTextNode' of undefined ...

  10. 去除Odoo主页中的提示: Your Odoo is not supported.

    来自 有两种方法可Odoo主页中的提示: Your Odoo is not supported. 方法1 - 修改源码 打开\addons\mail\static\src\js目录下的mail.js, ...