今天给大家分享一款 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. Vue.js前后端同构方案之准备篇——代码优化

    收录待用,修改转载已取得腾讯云授权 导语 目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术.此篇是准备篇,工欲善其事,必先利其器.我们先在代码层面进行优化,对我们完成整个 ...

  2. 性能调优的Windows窗体DataGridView控件

    性能调优的Windows窗体DataGridView控件 . 净框架4.5     在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你 ...

  3. Android编译程序报错：Re-installation failed due to different application signatures.

    如果机子上已经安装非本机编译的android程序,在编译的时候就会报错.方法首选的是删除原程序,然后再进行编译. 但是有一部分程序是烧录在系统程序里面的,无法直接删除,这时候可以使用adb shell ...

  4. eclipse 发布签名APK图文讲解

    eclipse 发布 签名android 程序 1 在项目上右键 export 2 export android application 3 第一次发布 要创建一个新的keystore 4 填写key ...

  5. angularjs中使用$q.defer

    方法method1和方法method2的区别,我还正在研究中...待添加 代码如下: <html ng-app="myApp"> <head> <ti ...

  6. EF增删改查的优化

    在EF的上一篇博客中已经对它的增删改查有了一个简单的了解.当中的改动过程是先要把要改动的内容查出来然后再进行改动.保存.它详细的过程是这种 首先当在运行查询语句的时候"EF数据上下文&quo ...

  7. 小贝_redis高级应用-公布与订阅

    redis高级应用-公布与订阅 一.公布与订阅(pub/sub)功能 二.公布与订阅(pub/sub)机制 三.redis公布与订阅(pub/sub)的实现 一.公布与订阅(pub/sub)功能 Pu ...

  8. AA MME设备内部错误

    adobe audition 找不到所支持的音频设备 这是3.0的错误!     上面是cs6的错误的图   主要原因是以前安装过,没有注册表没有清理干净     解决方案: https://jing ...

  9. js 回调函数 精析

      UpdateTime--2018年9月13日16点51分 1.什么是回调函数? 在JavaScript中,回调函数具体的定义为: 函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行 ...

  10. Appium安装过程

    Appium安装过程 先安装了 Node.js.在node的官网上下载的exe安装文件. 在node的command line中执行 npm install -g appium 来安装appium,报 ...