今天给大家分享一款 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. JS性能优化之创建文档碎片(document.createDocumentFragment）

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  2. ES6 中的 Set

    收录待用,修改转载已取得腾讯云授权 作者:kurtshen ES6 新增了几种集合类型,本文主要介绍Set以及其使用. 其基本描述为 Set对象是值的集合,你可以按照插入的顺序迭代它的元素. Set中 ...

  3. 基于Struts2、Spring、Hibernate实现的包括多条件查询分页的基础Dao层帮助jar包实现

    操作数据库经常使用操作就是增删查改.每做一次就写一次这些操作太麻烦,也不是必需,特别是写多条件查询并分页时.太痛苦了,所以抽出时间写了个dao帮助jar.导入即搞定!妈妈再有不用操心我的项目了! 转载 ...

  4. Android Service+Socket 联网交互

    android中,联网操作有http连接和socket连接两大类.由于项目需要,我们采取的是Socket连接.鉴于平时连接频繁,因此把Socket连接放到Service里,需要从服务器端获取数据时,只 ...

  5. 让Android App启动更协调

          不知道大伙有没有发现,应用第一次启动的时候一般比较慢(低配置手机尤其如此),黑屏好一段时间,下面是我在模拟器中启动QQ的截图,黑屏差不多有5秒左右,如下图所示~      显然这种结果很糟 ...

  6. SEO优化实践操作

    合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:descript ...

  7. 塔防游戏 代码project as 分享

    分享 用到的技术为 1. 先进的下载技术 2. mvc 游戏仅仅实现战斗逻辑功能. 简单的 登陆,及选择关卡,战斗,结算. 五脏俱全,各种游戏模块及分层都划分清楚,仅仅要填代码就能够了  哈哈 能够拿 ...

  8. 基于 bootstrap 的数据展示--bootgrid 样式改动。

    bootgrid 的官网案例 http://www.jquery-bootgrid.com/Examples 官方demo 样式 基于项目须要,取消了一些不须要 的功能,改动了源代码 最后样式成了这样 ...

  9. if-else用法

      CreateTime--2016年10月31日14:22:25Author:Marydonif-else的多种用法: //方式一 function test1 (t) { var bl = t | ...

  10. MySQL-LAST_INSERT_ID();使用注意事项

    第一.查询和插入所使用的Connection对象必须是同一个才可以,否则返回值是不可预料的. mysql> SELECT LAST_INSERT_ID(); -> 100 使 用这函数向一 ...