jq实现左侧显示图片右侧文字滑动切换效果


Posted in Javascript onAugust 04, 2015

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

下面给大家分享下基于jq实现左侧显示图片右侧文字滑动切换效果,用div+css布置表单借用jq实现特效,具体不多说了,请看下面代码。

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="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="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="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="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="images/simgd.jpg" alt="NEW! Radiation Protection at its Best" title="NEW! Radiation Protection at its Best" /></a></li>
          <li><a href=""><img src="images/simgd.jpg" alt="Unleash the Power of Isotonix Today" title="Unleash the Power of Isotonix Today" /></a></li>
          <li><a href=""><img src="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="images/simgd.jpg" alt="Get a Taste of Spring" title="Get a Taste of Spring" /></a></li>
          <li><a href=""><img src="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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>

展示效果图:

jq实现左侧显示图片右侧文字滑动切换效果

以上就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
原生js实现放大镜组件
Jan 22 Javascript
javascript控制图片播放的实现代码
Jul 29 #Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 #Javascript
Javascript实现鼠标右键特色菜单
Aug 04 #Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
常用的Javascript数据验证插件
Aug 04 #Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 #Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python类的继承用法示例
2019/01/31 Python
简单了解Python生成器是什么
2019/07/02 Python
python for和else语句趣谈
2019/07/02 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
基于python使用tibco ems代码实例
2019/12/20 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Django REST 异常处理详解
2020/07/15 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
继承公证书样本
2014/04/04 职场文书
股权转让协议书
2014/04/12 职场文书
商业用房租赁协议书
2014/10/13 职场文书
土建施工员岗位职责
2015/04/11 职场文书
工作失职自我检讨书
2015/05/05 职场文书
2016保送生自荐信范文
2016/01/29 职场文书