分享一款jQuery左侧图片右侧文字滑动切换代码。这是一款基于jQuery实现的列表图片控制图片滑动切换代码。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div class="index-new w1200 mt30">

        <div class="indexadd mt50 mb60">

            <div id="banners" class="ui-banner">

                <ul class="ui-banner-slides">

                    <li><a href=""><img src="data:images/simgd.jpg" alt="NEW! Get Heart Smart With Essential Omega III" title="NEW! Get Heart Smart With Essential Omega III" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="NEW! Support Your Skin on a Cellular Level" title="NEW! Support Your Skin on a Cellular Level" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="NEW! Indulge in Luxury With Royal Spa" title="NEW! Indulge in Luxury With Royal Spa" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="NEW! Get paid to shop with Cashback" title="NEW! Get paid to shop with Cashback" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="NEW! Radiation Protection at its Best" title="NEW! Radiation Protection at its Best" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="Unleash the Power of Isotonix Today" title="Unleash the Power of Isotonix Today" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="Motives is Changing the Face of UK Beauty" title="Motives is Changing the Face of UK Beauty" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="Get a Taste of Spring" title="Get a Taste of Spring" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="Try Isotonix OPC-3 Today for Better Health" title="Try Isotonix OPC-3 Today for Better Health" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="Feel like a princess with Royal Spa" title="Feel like a princess with Royal Spa" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="Stay energised with Isotonix for the Queen's Jubilee" title="Stay energised with Isotonix for the Queen's Jubilee" /></a></li>

                    <li><a href=""><img src="data:images/simgd.jpg" alt="WorldStores - Top Brands Delivered Next Day" title="WorldStores - Top Brands Delivered Next Day" /></a></li>

                </ul><!--ui-banner-slides end-->

                <ul class="ui-banner-slogans">

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                    <li class="ui-line">

                        <div class="ullinehover">

                            <div class="ui-bnnerimg floatLeft">

                                <img src="data:images/simg.jpg" alt="" width="103" />

                            </div>

                            <div class="ui-bnnerp floatRight">

                                <h3 style="margin-top: 8px;">设计院开展扶贫济困募捐活动</h3>

                                <p>

                                    根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位

                                    开展扶贫济困募捐活动。

                                </p>

                            </div>

                        </div>

                    </li>

                </ul><!--ui-banner-slogans end-->

            </div>

        </div>

    </div>

via：http://www.w2bc.com/article/54056

jQuery左侧图片右侧文字滑动切换代码的更多相关文章

  1. bootstrap实现左侧图片右侧文字布局

    效果图 代码 通过class="media-left"来控制相对位置 <!DOCTYPE html> <html> <head lang=" ...

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

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  3. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  4. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  5. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  7. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  8. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

  9. markdown 使用示例，包含常用的标题、图片、文字样式、代码块、链接等

    ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/Markdown%E7%A4%BA%E4%BE%8B # ...

随机推荐

  1. CCF-炉石传说

    #include<cstdio> typedef struct { int attack,health; } cus; cus info[][]; ]; ; void summon(); ...

  2. 洛谷P1880 石子合并（区间DP）（环形DP）

    To 洛谷.1880 石子合并 题目描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1 ...

  3. 【开源GPS追踪】 之 服务器硬伤

    前面就说过了,目前GPS 追踪的原理都是通过GPRS将数据发送到一个服务器上,如果回看数据就从服务器上去数据,服务器在整个系统中具有举足轻重的地位. 如果服务器坏了,整个系统几千台设备可能也就无法工作 ...

  4. 潭州课堂25班：Ph201805201 django 项目 第三十四课 后台文章标签更新功能 ，创建功能实现(课堂笔记）

    g更改标签:,前台要向后台传来 id, name, 对标签进行校验:标签不能为空,标签是否已经存在, 流程: def put(self, request, tag_id): ''' 更改标签 :par ...

  5. Ghostscript 将PDF文件转换成PNG图片 问题一二

    由于项目需求,需要将原来的PDF文档转换成图片文件,在网上找了一些PDF转图片的方法:测试了几个后,都有这样或那样的问题 1.PDFLibNet.dll,这个类型最初还是挺好用的,能转图片和HTML, ...

  6. BZOJ3737 : [Pa2013]Euler

    首先枚举$n$的每个约数$d$,检查一下$d+1$是否是质数,这些数都有可能作为答案的质因子出现. 考虑爆搜,每次枚举下一个要在答案中出现的质因子$p$,将$n$除以$p-1$,再枚举$p$的指数,然 ...

  7. BeanPostProcessor出现init方法无法被调用Invocation of init method failed

    是因为 返回了null,要返回object即可,arg0是bean对象本身,arg1是bean名字,即bean的id

  8. tableview分割线

    默认分割线,左边不到屏幕: TableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine; 三种结构体样式: /** UITab ...

  9. hadoop实现倒排索引

    hadoop实现倒排索引 本文用hadoop实现倒排索引算法,用基本的分两步完成,不使用combine 第一步 读入文档,统计文档中各个单词的个数,与word count类似,但这里把word-fil ...

  10. .Net core的日志系统

    .net core是内置了日志系统的,本文这里简单的介绍一下它的基本用法.如下是一个简单的示例: var service = new ServiceCollection() .AddLogging(l ...