以下是 jQuery左侧图片右侧文字滑动切换滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery左侧图片右侧文字滑动切换代码</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.core.widget.js"></script>
<script type="text/javascript" src="js/jqueryui.bannerize.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#banners').bannerize({
shuffle: 1,
interval: "5"
});
$(".ui-line").hover(function(){
$(this).addClass("ui-line-hover");
$(this).find(".ui-bnnerp").addClass("ui-bnnerp-hover");
},function(){
$(this).removeClass("ui-line-hover");
$(this).find(".ui-bnnerp").removeClass("ui-bnnerp-hover");
});
});
</script>
</head>
<body>
<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>
</body>
</html>
JS代码(jquery-ui-1.8.6.core.widget.js):
;
/*! * jQuery UI Widget 1.8.6 * * Copyright 2010,AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI/Widget */
(function(b,j){
if(b.cleanData){
var k=b.cleanData;
b.cleanData=function(a){
for(var c=0,d;
(d=a[c])!=null;
c++)b(d).triggerHandler("remove");
k(a)}
}
else{
var l=b.fn.remove;
b.fn.remove=function(a,c){
return this.each(function(){
if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add([this]).each(function(){
b(this).triggerHandler("remove")}
);
return l.call(b(this),a,c)}
)}
}
b.widget=function(a,c,d){
var e=a.split(".")[0],f;
a=a.split(".")[1];
f=e+"-"+a;
if(!d){
d=c;
c=b.Widget}
b.expr[":"][f]=function(h){
return!!b.data(h,a)}
;
b[e]=b[e]||{
}
;
b[e][a]=function(h,g){
arguments.length&&this._createWidget(h,g)}
;
c=new c;
c.options=b.extend(true,{
}
,c.options);
b[e][a].prototype=b.extend(true,c,{
namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f}
,d);
b.widget.bridge(a,b[e][a])}
;
b.widget.bridge=function(a,c){
b.fn[a]=function(d){
var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;
d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):d;
if(e&&d.charAt(0)==="_")return h;
e?this.each(function(){
var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;
if(i!==g&&i!==j){
h=i;
return false}
}
):this.each(function(){
var g=b.data(this,a);
g?g.option(d||{
}
)._init():b.data(this,a,new c(d,this))}
);
return h}
}
;
b.Widget=function(a,c){
arguments.length&&this._createWidget(a,c)}
;
b.Widget.prototype={
widgetName:"widget",widgetEventPrefix:"",options:{
disabled:false}
,_createWidget:function(a,c){
b.data(c,this.widgetName,this);
this.element=b(c);
this.options=b.extend(true,{
}
,this.options,this._getCreateOptions(),a);
var d=this;
this.element.bind("remove."+this.widgetName,function(){
d.destroy()}
);
this._create();
this._trigger("create");
this._init()}
,_getCreateOptions:function(){
return b.metadata&&b.metadata.get(this.element[0])[this.widgetName]}
,_create:function(){
}
,_init:function(){
}
,destroy:function(){
this.element.unbind("."+this.widgetName).removeData(this.widgetName);
this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+"-disabled ui-state-disabled")}
,widget:function(){
return this.element}
,option:function(a,c){
var d=a;
if(arguments.length===0)return b.extend({
}
,this.options);
if(typeof a==="string"){
if(c===j)return this.options[a];
d={
}
;
d[a]=c}
this._setOptions(d);
return this}
,_setOptions:function(a){
var c=this;
b.each(a,function(d,e){
c._setOption(d,e)}
);
return this}
,_setOption:function(a,c){
this.options[a]=c;
if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",c);
return this}
,enable:function(){
return this._setOption("disabled",false)}
,disable:function(){
return this._setOption("disabled",true)}
,_trigger:function(a,c,d){
var e=this.options[a];
c=b.Event(c);
c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();
d=d||{
}
;
if(c.originalEvent){
a=b.event.props.length;
for(var f;
a;
){
f=b.event.props[--a];
c[f]=c.originalEvent[f]}
}
this.element.trigger(c,d);
return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}
}
}
)(jQuery);
CSS代码(index.css):
body{min-width:1200px;/*overflow:hidden;*/
}
*{margin:0;padding:0;}
/*content*/
.content{zoom:1;overflow:hidden;}
/* ui-banner */
.ui-banner{display:block;position:relative;width:1154px;}
.ui-banner.ui-banner-invalid{display:none;}
.ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{height:298px;}
.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{position:absolute;top:0;}
.ui-banner ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.ui-banner .ui-banner-slides{width:445px;height:298px;left:1px;}
.ui-banner .ui-banner-slides li{display:none;position:absolute;top:5px;+top:10px;}
.ui-banner .ui-banner-slides li img{width:445px;height:288px;border:none;}
.ui-banner .ui-banner-slides li.ui-banner-slides-current,.ui-banner .ui-banner-slides li.ui-banner-slides-prev,.ui-banner .ui-banner-slides li.ui-banner-slides-next{display:block;}
.ui-banner .ui-banner-slides li.ui-banner-slides-current{left:0;}
.ui-banner .ui-banner-slides li.ui-banner-slides-prev{left:-654px;}
.ui-banner .ui-banner-slides li.ui-banner-slides-next{left:654px;}
.ui-banner .ui-banner-slogans{height:298px;overflow:hidden;width:698px;right:0;}
.ui-bnnerimg{width:103px;height:83px;}
.ui-bnnerp{width:550px;height:97%;padding-left:20px;}
.ui-bnnerp h3{font-size:14px;color:#666;}
.ui-bnnerp p{color:#666;}
.ui-line{zoom:1;overflow:hidden;}
.ui-line-hover{background:url("../images/stuj.png") no-repeat left center;}
.ullinehover{border-bottom:1px solid #ececec;height:86px;margin:0 0 3px 25px;+margin:0 0 1px 25px;padding:6px 0;}
.ui-bnnerp-hover{background-color:#9b040d;color:#fff;}
/*.ullinehover:hover .ui-bnnerp h3,.ullinehover:hover .ui-bnnerp p{color:#fff;}
*/
.uibannerslog ul li{border:1px solid red;}
.ui-bnnerp-hover h3,.ui-bnnerp-hover p{color:#fff;}
.ui-banner .ui-banner-arrow{display:block;width:23px;outline:none;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-prev{background:transparent url("../images/jleft.jpg") no-repeat scroll 0 0;height:23px;right:-43px;top:17px;width:23px;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-next{background:transparent url("../images/jright.jpg") no-repeat;height:23px;right:-43px;top:49px;width:23px;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-next img{left:-15px;}
.ui-banner .ui-banner-overlay{bottom:0;height:10px;position:absolute;right:0;width:173px;}
分享到QQ
分享到微博
微信扫一扫
