分享一款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. 在Xamarin.iOS项目中使用预设数据库

    在Xamarin.iOS项目中使用预设数据库 当开发者准备好一个预设数据库文件后,就可以将这个数据库文件添加到创建的项目中了.本节将分别在Xamarin.iOS和Xamarin.Android项目中使 ...

  2. JS运算符问题

    以下代码是否报错,如果不报错输出什么,为什么 var x = !!"Hello" + (!"world", !!"from here!!") ...

  3. Redis自学笔记:4.1进阶-事务

    第4章:进阶 4.1事务 4.1.1概述 redis中的事务是一组命令的集合 事务同命令一样都是redis的最小执行单位,一个事务中的命令要么都执行, 要么都不执行 事务的原理是先将一个事务的命令发送 ...

  4. 纯几何题 --- UVA - 11646 Athletics Track

    这一题题目有点坑,注意这句话: 这代表了其圆心就是矩形的中心! 然后就可以推公式: 可知: x = 200/(a+2atan(b/c)*r); r = sqrt(a*a + b*b); 所以有AC代码 ...

  5. 潭州课堂25班：Ph201805201 django 项目 第十一课 手机号是否存在，短信验证分析 (课堂笔记）

    判断手机号是否注册功能实现 1.分析 请求方法:GET url定义:/mobiles/(?P<mobile>1[3-9]\d{9})/ 请求参数:url路径参数 参数 类型 前端是否必须传 ...

  6. Emgucv - 下载、安装、配置

    工欲善其事,必先利其器. 一.下载 Emgucv学习之前,我们先要搭建好开发环-Emgucv库.VS开发平台. (1)VS开发平台,个人觉得VS2015挺好用的,比如:自定义窗口布局.更优的代码编辑器 ...

  7. EasyAR 开发实例---AR礼物（简单demo）

    一个节日礼物效果 --显示模型 在本次的案例中,我使用的是unity5.6.3版本,EasyAR 为2.0.(用1.0的版本,在渲染那块有问题) [导入SDK]到EasyAR官网(http://www ...

  8. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

  9. 通过pip安装python web

    提示 No module named 'utils' 我就pip install utils 提示 No module named 'db' 然后我就 pip install db 报错 No mod ...

  10. 代码d17

    admin.py from django.contrib import admin from crm import models # Register your models here. class ...