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

分享一款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左侧图片右侧文字滑动切换代码的更多相关文章

bootstrap实现左侧图片右侧文字布局
效果图代码通过class="media-left"来控制相对位置 <!DOCTYPE html> <html> <head lang=" ...
基于jQuery左侧大图右侧小图切换代码
基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效: HTML代码如下:  <div class="warp"> <!--中间内容d ...
基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
基于jQuery果冻式按钮焦点图切换代码
基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&quo ...
jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
[js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码在线演示本地下载
markdown 使用示例，包含常用的标题、图片、文字样式、代码块、链接等
ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/Markdown%E7%A4%BA%E4%BE%8B # ...

随机推荐

JVM 虚拟化
http://www.infoq.com/cn/news/2015/05/java20-multitenant-jvm http://2016.qconshanghai.com/presentatio ...
NOIP2010 机器翻译
1机器翻译题目背景小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单 ...
Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
使用lombok
Lombok是一种JavaArchive(JAR)文件,可用来消除Java代码的冗长.通过在开发环境中实现Lombok,开发人员可以节省构建诸如hashCode()和equals()这样的方法以及以 ...
java菜鸟篇&lt&semi;一&gt&semi; 对JsonObject 和JsonArray知识点理解
今天遇到从前台拿值(json数组格式),从request里边取值,然后经过一系列的处理方式,在用request返回去 1.先把request里的值赋值给String string类型的变量 2.因为前 ...
Swift &num; 项目框架
利用Swift--简单的项目界面流程. TabBar+Navigation底部导航控制,界面的切换. GitHub源码分享,地址: URL:https://github.com/SpongeBob-G ...
逻辑运算符、三元运算符、for循环、stack(栈)，heap(堆)，方法区，静态域
Lesson One 2018-04-17 19:58:39 逻辑运算符(用于逻辑运算,左右两边都是 true 或 false) 逻辑与-& 和短路与-&& 区别: &amp ...
oracle&lowbar;dataGuard&lowbar;11G
[李红]--切记_从库只安装实例_不需要 dbca 创建数据库但是 netca 创建监听看个人喜欢,我反正是创建了.[DataGuard_主数据库的参数配置]1.启用 force logging 功 ...
caffe&period;pb&period;h丢失问题解决方法
https://blog.csdn.net/ThomasCai001/article/details/53940430 错误提示 fatal error: caffe/proto/caffe.pb ...
MYSQL数据库的日志文件
日志文件:用来记录MySQL实例对某种条件做出响应时写入的文件.如错误日志文件.二进制日志文件.慢查询日志文件.查询日志文件等. 错误日志 show variables like 'log_error ...