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

基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="examples_body">

    <div class="examples_bg">

        <div class="examples_image">
            <img src="images/sample_banner1.jpg" alt="" />
            <div class="desc">
                <a href="#" class="collapse">Close Me!</a>
                <div class="block">
                    <h4>爱编程一号图片</h4>
                    <small>爱编程发布时间</small>
                    <p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
                </div>
            </div>
        </div>

        <div class="mune_thumb">
            <ul>
                <li>
                    <a href="images/sample_banner1.jpg"><img src="images/sample_banner1_thumb.jpg" alt="Image Name" /></a>
                    <div class="block">
                        <h4>爱编程二号图片</h4>
                        <small>爱编程发布时间</small>
                        <p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
                    </div>
                </li>
                <li>
                    <a href="images/sample_banner2.jpg"><img src="images/sample_banner2_thumb.jpg" alt="Image Name" /></a>
                    <div class="block">
                        <h4 class="title02">爱编程三号图片</h4>
                        <small>爱编程发布时间</small>
                        <p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
                    </div>
                </li>
                <li>
                    <a href="images/sample_banner3.jpg"><img src="images/sample_banner3_thumb.jpg" alt="Image Name" /></a>
                    <div class="block">
                        <h4 class="title03">爱编程四号图片</h4>
                        <small>爱编程发布时间</small>
                        <p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
                    </div>
                </li>
                <li>
                    <a href="images/sample_banner4.jpg"><img src="images/sample_banner4_thumb.jpg" alt="Image Name" /></a>
                    <div class="block">
                        <h4 class="title04">爱编程五号图片</h4>
                        <small>爱编程发布时间</small>
                        <p>爱编程,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源。</p>
                    </div>
                </li>
            </ul>
        </div>

    </div>

</div>

via:http://www.w2bc.com/Article/43287

时间: 06-12

基于jQuery左侧大图右侧小图切换代码的相关文章

jQuery左侧图片右侧文字滑动切换代码

分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="banners" class="ui-banner"> <

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

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

一款基于jquery超炫的图片切换特效

今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的代码.注意了,这里有引用jquery和underscore插件. html代码: <div class="wrap"> <div class="box active" style="background-image: url(img/1.jp

基于jQuery全屏焦点图切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed:

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

基于jQuery网页步骤流程进度条代码

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="step_context test"></div> 当前步骤:第<input type="text" value="5" id="currentStepVal" />步 <button onclick=&qu

基于jquery地图特效全国网点查看代码

基于jquery地图特效全国网点查看代码.这是一款简单实用的jQuery地图特效,主要知识点是jquery和css实现了中图地图,提示层效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m_map"> <div class="mp mp1"> <div class="feng"> <div class="tree"> <div

基于jQuery实现汉字转换成拼音代码

基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br /> <br /> <br /> <br /> <br /> <center> 在这里输入汉字<br /> <textarea id="content"> </textarea><br /&g

基于jQuery仿去哪儿城市选择代码

基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lineSearch"> <ul> <li class="thRelative" id="hhDrop00"> <div class="boxSearch"> <span class="k