jquery全宽图像滑块特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery全宽图像滑块特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>jquery全宽图像滑块</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">	
			<header class="clearfix">
			</header>
			<div id="cbp-fwslider" class="cbp-fwslider">
				<ul>
					<li><a href="#"><img src="images/1.jpg" alt="img01"/></a></li>
					<li><a href="#"><img src="images/2.jpg" alt="img02"/></a></li>
					<li><a href="#"><img src="images/3.jpg" alt="img03"/></a></li>
					<li><a href="#"><img src="images/4.jpg" alt="img04"/></a></li>
					<li><a href="#"><img src="images/5.jpg" alt="img05"/></a></li>
				</ul>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.cbpFWSlider.min.js"></script>
		<script>
			$( function() {
				/*
				- how to call the plugin:
				$( selector ).cbpFWSlider( [options] );
				- options:
				{
					// default transition speed (ms)
					speed : 500,
					// default transition easing
					easing : 'ease'
				}
				- destroy:
				$( selector ).cbpFWSlider( 'destroy' );
				*/

				$( '#cbp-fwslider' ).cbpFWSlider();

			} );
		</script>
	</body>
</html>

JS代码(jquery.cbpFWSlider.min.js):

(function(c,b,e){
	var d=b.Modernizr;
	c.CBPFWSlider=function(f,g){
	this.$el=c(g);
	this._init(f)}
;
	c.CBPFWSlider.defaults={
	speed:500,easing:"ease"}
;
	c.CBPFWSlider.prototype={
	_init:function(f){
	this.options=c.extend(true,{
}
,c.CBPFWSlider.defaults,f);
	this._config();
	this._initEvents()}
,_config:function(){
	this.$list=this.$el.children("ul");
	this.$items=this.$list.children("li");
	this.itemsCount=this.$items.length;
	this.support=d.csstransitions&&d.csstransforms;
	this.support3d=d.csstransforms3d;
	var j={
	WebkitTransition:{
	transitionEndEvent:"webkitTransitionEnd",tranformName:"-webkit-transform"}
,MozTransition:{
	transitionEndEvent:"transitionend",tranformName:"-moz-transform"}
,OTransition:{
	transitionEndEvent:"oTransitionEnd",tranformName:"-o-transform"}
,msTransition:{
	transitionEndEvent:"MSTransitionEnd",tranformName:"-ms-transform"}
,transition:{
	transitionEndEvent:"transitionend",tranformName:"transform"}
}
;
	if(this.support){
	this.transEndEventName=j[d.prefixed("transition")].transitionEndEvent+".cbpFWSlider";
	this.transformName=j[d.prefixed("transition")].tranformName}
this.current=0;
	this.old=0;
	this.isAnimating=false;
	this.$list.css("width",100*this.itemsCount+"%");
	if(this.support){
	this.$list.css("transition",this.transformName+" "+this.options.speed+"ms "+this.options.easing)}
this.$items.css("width",100/this.itemsCount+"%");
	if(this.itemsCount>1){
	this.$navPrev=c('<span class="cbp-fwprev">&lt;
	</span>').hide();
	this.$navNext=c('<span class="cbp-fwnext">&gt;
	</span>');
	c("<nav/>").append(this.$navPrev,this.$navNext).appendTo(this.$el);
	var k="";
	for(var g=0;
	g<this.itemsCount;
	++g){
	var f=g===this.current?'<span class="cbp-fwcurrent"></span>':"<span></span>";
	k+=f}
var h=c('<div class="cbp-fwdots"/>').append(k).appendTo(this.$el);
	this.$navDots=h.children("span")}
}
,_initEvents:function(){
	var f=this;
	if(this.itemsCount>1){
	this.$navPrev.on("click.cbpFWSlider",c.proxy(this._navigate,this,"previous"));
	this.$navNext.on("click.cbpFWSlider",c.proxy(this._navigate,this,"next"));
	this.$navDots.on("click.cbpFWSlider",function(){
	f._jump(c(this).index())}
)}
}
,_navigate:function(f){
	if(this.isAnimating){
	return false}
this.isAnimating=true;
	this.old=this.current;
	if(f==="next"&&this.current<this.itemsCount-1){
	++this.current}
else{
	if(f==="previous"&&this.current>0){
	--this.current}
}
this._slide()}
,_slide:function(){
	this._toggleNavControls();
	var g=-1*this.current*100/this.itemsCount;
	if(this.support){
	this.$list.css("transform",this.support3d?"translate3d("+g+"%,0,0)":"translate("+g+"%)")}
else{
	this.$list.css("margin-left",-1*this.current*100+"%")}
var f=c.proxy(function(){
	this.isAnimating=false}
,this);
	if(this.support){
	this.$list.on(this.transEndEventName,c.proxy(f,this))}
else{
	f.call()}
}
,_toggleNavControls:function(){
	switch(this.current){
	case 0:this.$navNext.show();
	this.$navPrev.hide();
	break;
	case this.itemsCount-1:this.$navNext.hide();
	this.$navPrev.show();
	break;
	default:this.$navNext.show();
	this.$navPrev.show();
	break}
this.$navDots.eq(this.old).removeClass("cbp-fwcurrent").end().eq(this.current).addClass("cbp-fwcurrent")}
,_jump:function(f){
	if(f===this.current||this.isAnimating){
	return false}
this.isAnimating=true;
	this.old=this.current;
	this.current=f;
	this._slide()}
,destroy:function(){
	if(this.itemsCount>1){
	this.$navPrev.parent().remove();
	this.$navDots.parent().remove()}
this.$list.css("width","auto");
	if(this.support){
	this.$list.css("transition","none")}
this.$items.css("width","auto")}
}
;
	var a=function(f){
	if(b.console){
	b.console.error(f)}
}
;
	c.fn.cbpFWSlider=function(g){
	if(typeof g==="string"){
	var f=Array.prototype.slice.call(arguments,1);
	this.each(function(){
	var h=c.data(this,"cbpFWSlider");
	if(!h){
	a("cannot call methods on cbpFWSlider prior to initialization;
	attempted to call method '"+g+"'");
	return}
if(!c.isFunction(h[g])||g.charAt(0)==="_"){
	a("no such method '"+g+"' for cbpFWSlider instance");
	return}
h[g].apply(h,f)}
)}
else{
	this.each(function(){
	var h=c.data(this,"cbpFWSlider");
	if(h){
	h._init()}
else{
	h=c.data(this,"cbpFWSlider",new c.CBPFWSlider(g,this))}
}
)}
return this}
}
)(jQuery,window);

CSS代码(component.css):

.cbp-fwslider{position:relative;margin:0 0 10px;overflow:hidden;padding:40px 0 60px;}
.cbp-fwslider ul{margin:0;padding:0;white-space:nowrap;list-style-type:none;}
.cbp-fwslider ul li{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);float:left;display:block;margin:0;padding:0;}
.cbp-fwslider ul li > a,.cbp-fwslider ul li > div{display:block;text-align:center;outline:none;}
.cbp-fwslider ul li > a img{border:none;display:block;margin:0 auto;max-width:75%;}
.cbp-fwslider nav span{position:absolute;top:50%;width:50px;height:100px;background:#47a3da;color:#fff;font-size:50px;text-align:center;margin-top:-50px;line-height:100px;cursor:pointer;font-weight:normal;}
.cbp-fwslider nav span:hover{background:#378fc3;}
.cbp-fwslider nav span.cbp-fwnext{right:0px;}
.cbp-fwslider nav span.cbp-fwprev{left:0px;}
.cbp-fwdots{position:absolute;bottom:0px;white-space:nowrap;text-align:center;width:100%;}
.cbp-fwdots span{display:inline-block;width:18px;height:18px;background:#ddd;margin:4px;border-radius:50%;cursor:pointer;}
.cbp-fwdots span:hover{background:#999;}
.cbp-fwdots span.cbp-fwcurrent{background:#47a3da;box-shadow:0 0 0 2px #47a3da;-webkit-transition:box-shadow 0.2s ease-in-out;-moz-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;}

CSS代码(default.css):

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'fontawesome';src:url('../fonts/fontawesome.eot');src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),url('../fonts/fontawesome.svg#fontawesome') format('svg'),url('../fonts/fontawesome.woff') format('woff'),url('../fonts/fontawesome.ttf') format('truetype');font-weight:normal;font-style:normal;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#47a3da;}
a{color:#f0f0f0;text-decoration:none;}
a:hover{color:#000;}
.main,.container > header{width:90%;max-width:70em;margin:0 auto;padding:0 1.875em 3.125em 1.875em;}
.container > header{padding:2.875em 1.875em 1.875em;}
.container > header h1{font-size:2.125em;line-height:1.3;margin:0;float:left;font-weight:400;}
.container > header span{display:block;font-weight:700;text-transform:uppercase;letter-spacing:0.5em;padding:0 0 0.6em 0.1em;}
.container > header nav{float:right;}
.container > header nav a{display:block;float:left;position:relative;width:2.5em;height:2.5em;background:#fff;border-radius:50%;color:transparent;margin:0 0.1em;border:4px solid #47a3da;text-indent:-8000px;}
.container > header nav a:after{content:attr(data-info);color:#47a3da;position:absolute;width:600%;top:120%;text-align:right;right:0;opacity:0;pointer-events:none;}
.container > header nav a:hover:after{opacity:1;}
.container > header nav a:hover{background:#47a3da;}
.icon-drop:before,.icon-arrow-left:before{font-family:'fontawesome';position:absolute;top:0;width:100%;height:100%;speak:none;font-style:normal;font-weight:normal;line-height:2;text-align:center;color:#47a3da;-webkit-font-smoothing:antialiased;text-indent:8000px;padding-left:8px;}
.container > header nav a:hover:before{color:#fff;}
.icon-drop:before{content:"\e000";}
.icon-arrow-left:before{content:"\f060";}

附件:下载该文件资源,减少时间成本(增值服务)