分享一款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. Java -- 内部类（二）

    在上一篇博客Java --内部类(一)中已经提过了,java中的内部类主要有四种:成员内部类.局部内部类.匿名内部类.静态内部类. 该文主要介绍这几种内部类. 成员内部类 成员内部类也是最普通的内部类 ...

  2. 2046 ACM 数学

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2046 思维:与之前有两道题目相似,n可以由n-1和n-2递推过来.f(n)=f(n-1)*1+f(n-2) ...

  3. Centos 安装lnmp完整版

    1.使用putty或类似的SSH工具登录服务器: 登录后运行 screen -S lnmp 2.下载并安装LNMP一键安装包: 我是CentOS系统,所以运行: wget -c http://soft ...

  4. 浅谈KMP“串”的模式匹配问题

    感悟:预处理next[ ]数组求解B串的"自我匹配过程",思路与KMP类似,目标得到最大相同的前缀.后缀. ([1->k]==[i-k+1,i]),可以根据由前往后,利用前面 ...

  5. C#文件及数据流技术

    空间名称:Sysytem.IO 一.文件.文件夹操作1.创建.删除.移动.复制文件 2.创建.删除.移动.复制文件夹 二.流操作 1.FileSream - 提供读取和写入文件的方式 文本文件的写入与 ...

  6. JVM 内存分配模型概念和java中各种对象的存储

    JVM 内存分配模型概念 --在工作中可能用到的机会不多,有个概念的了解 --此文是转载某位读者,应该是在阅读了<深入理解Java虚拟机JVM高级特性与最佳实践> 一书后,总结所得.写的不 ...

  7. DOCKER上安装HASSIO

    更新源列表命令 sudo apt-get update sudo apt-get upgrade –y This is the list of packages you need to have av ...

  8. 前端里面如何进行搜索引擎优化(SEO)

    如何进行SEO优化: (1) 避免head标签js堵塞: 所有放在head标签里面的js和css都会堵塞渲染:如果这些css和js需要加载很久的话,那么页面就空白了: 解决办法:一是把script放到 ...

  9. vue中的v-cloak

    问题 在使用vue时,HTML 绑定 Vue实例,在页面加载时会闪烁类似{{msg}}这样的信息.可能会导致用户体验不好. 使用v-cloak v-cloak就能解决这个问题. (1)用法 这个指令保 ...

  10. 用PowerShell激活anaconda的环境

    1.以管理员身份打开PowerShell 2. 执行conda install -n root -c pscondaenvs pscondaenvs 3. 执行 Set-ExecutionPolicy ...