今天给大家分享一款 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. HTML5/CSS3实现添加锁屏效果

     锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作,只能解除锁定后才能继续使用,jQueryUI的dialog有模态对话框,这一点不难做到.那么,首先需要在页面中添加一个div层,用于做模态的层 ...

  2. HTML5 input file控件使用accept过滤限制的文件类型以及在谷歌下打开很慢的问题

    在文件上传控件(input type='file')中,可以通过accept属性实现对文件类型的过滤. 一.相关代码: 下面给出对应的文件上传控件代码: <input type="fi ...

  3. Inside GDALAllRegister之三： 注册指定驱动

    现在来仔细分析如何注册一个驱动的代码,看下面代码: #ifdef FRMT_vrt GDALRegister_VRT(); #endif 编译时指定或者取消FRMT_vrt,可以控制这条语句是否编译到 ...

  4. AVAudioPlayer播放在线音频文件

    AVAudioPlayer播放在线音频文件 一:原里: AVAudioPlayer是不支持播放在线音频的,但是AVAudioPlayer有一个 initWithData的方法:我们可以把在线音频转换为 ...

  5. uva10401Injured Queen Problem（递推）

    题目:uva10401Injured Queen Problem(递推) 题目大意:依然是在棋盘上放皇后的问题,这些皇后是受伤的皇后,攻击范围缩小了.攻击范围在图中用阴影表示(题目).然后给出棋盘的现 ...

  6. 算法笔记_029:约瑟夫斯问题（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 引用自<算法设计与分析基础>第三版: 约瑟夫斯问题,是以弗拉瓦斯.约瑟夫斯(Flavius Josephus)的名字命名的.约瑟夫斯是一 ...

  7. 查看sqlserver 2008中性能低下的语句

    经常使用这个语句来查看性能低下的sql语句: SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical ...

  8. SQL server 2008里面通过sys.dm_exec_procedure_stats得到存储过程的执行信息--转

    --转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/05/13/sql-server-2008-sys-dm-exec-procedure-stats. ...

  9. Linux lvs DR配置

    三台服务器,(1)做路由.(2)(3)做realserver IP为:192.168.196.121  (1) 192.168.196.122   (2) 192.168.196.123   (3) ...

  10. Appium安装过程

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