竖条轮播切换
2018-02-10 本文已影响0人
请叫我小胖纸_7ad5
1.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0; margin: 0; list-style: none;
}
fieldset, img {
border: none;
outline: none;
-moz-outline:none;
width: 201px;
height: 118px;
}
.ui-banner{
display:block;
position:relative;
width:1171px;
}
.ui-banner.ui-banner-invalid{display:none;}
.ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans{height:470px;}
.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans{position:absolute;top:0;}
.ui-banner ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.ui-banner .ui-banner-slides{
width:970px;
height:470px;
}
.ui-banner .ui-banner-slides li{
display:none;
position:absolute;
}
.ui-banner .ui-banner-slides li img{width:970px;height:470px;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:-1050px;}
.ui-banner .ui-banner-slides li.ui-banner-slides-next{left:1050px;}
.ui-banner .ui-banner-slogans{
height:470px;
overflow:hidden;
width:201px;
right:0;
}
.ui-bnnerimg{
width: 201px;
height: 118px;
}
.ui-line{
zoom: 1;
overflow: hidden;
}
.ui-banner .ui-banner-overlay{
bottom:0;
height:10px;
position:absolute;
right:0;
width:173px;
}
</style>
</head>
<body>
<div id="banners" class="ui-banner">
<ul class="ui-banner-slides">
<li><a href=""><img src="images/ban1.jpg" /></a></li>
<li><a href=""><img src="images/ban4.jpg" /></a></li>
<li><a href=""><img src="images/ban5.jpg"/></a></li>
<li><a href=""><img src="images/ban6.jpg" /></a></li>
<li><a href=""><img src="images/ban3.jpg" /></a></li>
</ul>
<ul class="ui-banner-slogans">
<li class="ui-line">
<div class="ullinehover">
<div class="ui-bnnerimg">
<img src="images/ban1.jpg" alt=""/>
</div>
</div>
</li>
<li class="ui-line">
<div class="ullinehover">
<div class="ui-bnnerimg">
<img src="images/ban4.jpg" alt=""/>
</div>
</div>
</li>
<li class="ui-line">
<div class="ullinehover">
<div class="ui-bnnerimg">
<img src="images/ban5.jpg" alt=""/>
</div>
</div>
</li>
<li class="ui-line">
<div class="ullinehover">
<div class="ui-bnnerimg">
<img src="images/ban6.jpg" alt=""/>
</div>
</div>
</li>
<li class="ui-line">
<div class="ullinehover">
<div class="ui-bnnerimg">
<img src="images/ban3.jpg" alt=""/>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
(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);
;(function($) {
$.widget("ma.bannerize", {
options: {
interval: 5,
auto: true,
shuffle: false,
startAt: 0,
overlay: true,
className: ''
},
_create: function(){
var self = this;
self.rotating = self.options.auto;
self.slides = self.element.find('ul:eq(0)')
self.slogans = self.element.find('ul:eq(1)')
.delegate('li', 'click.bannerize', function(event){
event.preventDefault();
var $obj = $(this);
self.queue("stop");
if(!$obj.hasClass('ui-banner-slogans-current') && !$obj.hasClass('ui-banner-slogans-prev')){
self._rotate($obj.prevUntil('.ui-banner-slogans-current').length + 1, "next");
}
});
self.slides
.children(':eq(' + self.options.startAt + ')')
.addClass('ui-banner-current ui-banner-slides-current')
.next()
.addClass('ui-banner-next ui-banner-slides-next')
.end()
.filter(function(i){
if(!self.options.startAt){
self.slides
.children(':last')
.detach()
.prependTo(self.slides);
}
return true;
})
.prev()
.addClass('ui-banner-prev ui-banner-slides-prev');
self.slogans
.children(':eq(' + self.options.startAt + ')')
.addClass('ui-banner-current ui-banner-slogans-current')
.next()
.addClass('ui-banner-next ui-banner-slogans-next')
.end()
.filter(function(i){
if(!self.options.startAt){
self.slogans
.children(':last')
.detach()
.prependTo(self.slogans);
}
return true;
})
.prev()
.addClass('ui-banner-prev ui-banner-slogans-prev')
.each(function(i, v){
var $obj = $(this);
$obj.css('marginTop', ($obj.outerHeight() * -1) + 'px');
});
self.options.interval = self.options.interval.toString().split(".")[0].length < 4 ? self.options.interval * 1000 : self.options.interval;
if(self.options.auto){// start the queue
self.queue("start");
}
},
_shuffle: function(){
var self = this, pos, len, $slides = self.slides.children(), slides = [], $slogans = self.slogans.children(), slogans = [];
while (len = $slides.length, len > 0){
pos = parseInt(Math.random() * len);
slides.push($slides[pos]);
slogans.push($slogans[pos]);
$slides = $slides.filter(':not(:eq(' + pos + '))');
$slogans = $slogans.filter(':not(:eq(' + pos + '))');
}
self.slides
.empty()
.append($([]).pushStack(slides));
self.slogans
.empty()
.append($([]).pushStack(slogans));
return;
},
queue: function(action){
var self = this;
if(action === "start"){
self.element
.bind("rotate.bannerize", function(event){
var $obj = $(this);
$obj
.delay(self.options.interval, "rotate")
.queue("rotate", function(next){
$obj.trigger("rotate");
next();
});
self._rotate(1, "next");
})
.delay(self.options.interval, "rotate")
.queue("rotate", function(next){
var $obj = $(this);
$obj.trigger("rotate");
next();
})
.dequeue("rotate");
self.rotating = true;
}
else{
self.element
.unbind("rotate.bannerize")
.clearQueue("rotate");
self.rotating = false;
}
},
_rotate: function(step, direction){
var self = this;
if(self.sliding){
return;
}
(direction === "prev") ? self._slideBack(step) : self._slideForward(step);
},
_slideBack: function(step){
var self = this;
self.slides.queue("banner", function(next){
self.sliding = true;
next();
});
for(var a = 1; a <= step; a++){
self.slides
.queue("banner", function(next){
self.slides
.children('.ui-banner-next')
.removeClass('ui-banner-next ui-banner-slides-next')
.css('left', '');
self.slogans
.children('.ui-banner-next')
.removeClass('ui-banner-next ui-banner-slogans-next')
.css('left', '');
next();
})
.queue("banner", function(next){
self.slogans
.children('.ui-banner-current')
.toggleClass('ui-banner-current ui-banner-slogans-current ui-banner-next ui-banner-slogans-next')
.end()
.children('.ui-banner-prev')
.animate({ marginTop: '0px' }, 250, function(){
$(this).toggleClass('ui-banner-prev ui-banner-slogans-prev ui-banner-current ui-banner-slogans-current');
next();
});
self.slides
.children('.ui-banner-current')
.each(function(i, v){
var $obj = $(this);
$obj.animate({
left: '+=' + $obj.width() + 'px'
}, 250, function(){
$obj
.toggleClass('ui-banner-current ui-banner-slides-current ui-banner-next ui-banner-slides-next')
.css('left', '');
})
})
.end()
.children('.ui-banner-prev')
.animate({ left: '0px' }, 250, function(){
$(this)
.toggleClass('ui-banner-prev ui-banner-slides-prev ui-banner-current ui-banner-slides-current')
.css('left', '');
next();
});
})
.queue("banner", function(next){
self.slogans
.children(':last')
.addClass('ui-banner-prev ui-banner-slogans-prev')
.each(function(i, v){
var $obj = $(this);
$obj.css('marginTop', ($obj.outerHeight() * -1) + 'px');
})
.detach()
.prependTo(self.slogans);
self.slides
.children(':last')
.addClass('ui-banner-prev ui-banner-slides-prev')
.detach()
.prependTo(self.slides);
next();
})
.queue("banner", function(next){
self.rotating = false;
next();
});
}
self.slides
.queue("banner", function(next){
self.sliding = false;
self._trigger("rotateBack");
self._trigger("rotate");
next();
})
.dequeue("banner");
},
_slideForward: function(step){
var self = this;
self.slides.queue("banner", function(next){
self.sliding = true;
next();
});
for(var a = 1; a <= step; a++){
self.slides
.queue("banner", function(next){
self.slides
.children('.ui-banner-prev')
.removeClass('ui-banner-prev ui-banner-slides-prev')
.css('left', '')
.detach()
.appendTo(self.slides);
self.slogans
.children('.ui-banner-prev')
.removeClass('ui-banner-prev ui-banner-slogans-prev')
.css('marginTop', '')
.detach()
.appendTo(self.slogans);
next();
})
.queue("banner", function(next){
self.slogans
.children('.ui-banner-current')
.each(function(i, v){
var $obj = $(this);
$obj.animate({
marginTop: ($obj.outerHeight() * -1) + 'px'
}, 250, function(){
$obj.toggleClass('ui-banner-current ui-banner-slogans-current ui-banner-prev ui-banner-slogans-prev');
});
})
.end()
.children('.ui-banner-next')
.toggleClass('ui-banner-next ui-banner-slogans-next ui-banner-current ui-banner-slogans-current')
.next()
.addClass('ui-banner-next ui-banner-slogans-next');
self.slides
.children('.ui-banner-current')
.each(function(i, v){
var $obj = $(this);
$obj.animate({
left: '-=' + $obj.width() + 'px'
}, 250, function(){
$obj.toggleClass('ui-banner-current ui-banner-slides-current ui-banner-prev ui-banner-slides-prev');
})
})
.end()
.children('.ui-banner-next')
.animate({ left: '0px' }, 250, function(){
$(this)
.toggleClass('ui-banner-next ui-banner-slides-next ui-banner-current ui-banner-slides-current')
.next()
.addClass('ui-banner-next ui-banner-slides-next');
next();
});
});
}
self.slides
.queue("banner", function(next){
self.sliding = false;
self._trigger("rotateNext");
self._trigger("rotate");
next();
})
.dequeue("banner");
},
});
})(jQuery);
$(document).ready(function(){
$('#banners').bannerize({
shuffle: 1,
interval: "5"
});
});
</script>
