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--> <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 # ...
随机推荐
- UVA 508 Morse Mismatches JAVA
题意:输入字母和数字的编码,输入词典,输入一段编码,求出对应的单词. 思路:来自https://blog.csdn.net/qq_41163933/article/details/82224703 i ...
- 从香港机房引入google/bitbucket路由
首先说这种方法有一个局限性:只适用于非CDN网段的引入,比如Google自己足够大,所以用不到CDN,那在香港解析出来的就是Google在香港自己的AS number,因此不存在CDN干扰的问题.如果 ...
- [SDOI2017]树点涂色
Description: Bob有一棵\(n\)个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不 ...
- Macbook Pro安装Office 2016 for mac
折腾了半天终于弄好了…… 工具:office2016安装包,MSO15.11.2Patch(破解脚本),Xcode office2016安装包百度网盘下载:http://pan.baidu.com/s ...
- shell脚本使用--sleep
#!/bin/bash #filename.sh echo -n Count: tput sc count=; while true; do ]; then let count++; ; tput r ...
- Java身份证归属地目录树
数据库结构: web管理界面: 目录树: 视频: 应用场景:
- Css3实现波浪效果2
一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...
- nvidia-smi命令输出详解
nvidia-smi命令输出如下: +-----------------------------------------------------------------------------+ | ...
- golang基础学习及web框架
golang的web框架 web框架百花齐放:对比 Go Web 编程 Go Web Examples Golang 适合做 Web 开发吗? beego beego简介 go-restful gol ...
- 09、高级编程之基于排序机制的wordcount程序
package sparkcore.java; import java.util.Arrays; import java.util.Iterator; import org.apache.spark. ...