今天给大家分享一款 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. html表格内容自动换行

    有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!首先介绍两个利器:table-layout:fixed //固定表格大小word-break:break-al ...

  2. 免费的.net云平台appharbor.com

    支持Mysql,MSSQL2008R2免费的都是20MB 提供codeplex,GitHub,BitBucket部署到appharbor.com 也可以使用Git来部署应用,但不支持FTP 可以一键安 ...

  3. scala "←" "<-"

    程序里看到"←"符号 (for { routee ← valueHolder.routee } yield routee).toVector 找遍scala的操作符表都没找到,回头 ...

  4. Kettle中txt类型数据源作为输入需要注意的地方

    文本类型在kettle中作为数据源的时候,需要注意的几点,ktr的机构如下图 1:txt文本的格式 2:文本输入控件的设置 --2.1:选择文件所在物理位置 --2.2:设置分隔符,注意头部数量去掉, ...

  5. LeetCode Linked List Cycle 解答程序

    Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up: Can you solve i ...

  6. 微信小程序 - 选取搜索地点并且显示（map）

    演示如下,使用时,你也许会配合它:腾讯地图路线规划 wxml: <view class='address' bindtap='onChangeAddress'> <input cla ...

  7. 从头学习MVC4基础之视图

    实例一:首先简单显示实例: 控制器代码: public class WujyTestController : Controller { public ActionResult Index() { Li ...

  8. Jquery重新学习之八[Ajax运用总结B]

    上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程中的细节:除Jquery.ajax()方法外,Jqu ...

  9. myeclipse2014安装jad反编译插件

    myeclipse上默认不能查看class文件,需要查看的话安装反编译插件 安装步骤: 准备图中框里的两个文件 1. [net.sf.jadclipse_3.3.0.jar]文件拷贝到如下路径([D: ...

  10. Ubuntu8.04系列－系统优化篇

    文章欢迎转载,转载请注明出处:嘉骏苑http://luckiss.blogcn.com  原文出处:http://luckiss.blogcn.com/diary,15151058.shtml    ...