jQuery自适应窗口大小轮播图特效代码

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

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

以下是 jQuery自适应窗口大小轮播图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<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" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="slider">
	<ul class="slides clearfix">
		<li><img class="responsive" src="img/1.jpg"></li>
		<li><img class="responsive" src="img/2.jpg"></li>
		<li><img class="responsive" src="img/3.jpg"></li>
		<li><img class="responsive" src="img/4.jpg"></li>
	</ul>
	<ul class="controls">
		<li><img src="img/prev.png" alt="previous"></li>
		<li><img src="img/next.png" alt="next"></li>
	</ul>
	<ul class="pagination">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="dist/easySlider.js"></script>
<script type="text/javascript">
	$(function() {
		$("#slider").easySlider( {
			slideSpeed: 500,
			paginationSpacing: "15px",
			paginationDiameter: "12px",
			paginationPositionFromBottom: "20px",
			slidesClass: ".slides",
			controlsClass: ".controls",
			paginationClass: ".pagination"					
		});
	});
</script>
</body>
</html>

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

/* * jquery-boilerplate - v4.1.0 * A jump-start for jQuery plugins development. * http://jqueryboilerplate.com * * Made by Zeno Rocha * Under MIT License */
!function(a,b,c,d){
	"use strict";
	function e(b,c){
	this.element=b,this.settings=a.extend({
}
,g,c),this._defaults=g,this._name=f,this.init()}
var f="easySlider",g={
	slideSpeed:500,paginationSpacing:"15px",paginationDiameter:"12px",paginationPositionFromBottom:"20px",controlsClass:".controls",slidesClass:".slides",paginationClass:".pagination"}
;
	a.extend(e.prototype,{
	init:function(){
	this.setProperties(),this.positionPagination(),this.slideParameters.setCurrentSlideNumber.call(this,1),this.events.clickRight.call(this),this.events.clickLeft.call(this),this.events.clickPage.call(this)}
,events:{
	clickRight:function(){
	var b=this;
	a(this.settings.controlsClass+" li:last-child").click(function(){
	b.slideParameters.getCurrentSlideNumber.call(b)===b.slideParameters.getNumberOfSlides.call(b)?(a(b.settings.slidesClass).animate({
	right:"0%"}
,b.settings.slideSpeed),b.slideParameters.setCurrentSlideNumber.call(b,1),b.paginate(b.slideParameters.getCurrentSlideNumber.call(b))):(a(b.settings.slidesClass).animate({
	right:"+=100%"}
,b.settings.slideSpeed),b.slideParameters.setCurrentSlideNumber.call(b,b.slideParameters.getCurrentSlideNumber.call(b)+1),b.paginate(b.slideParameters.getCurrentSlideNumber.call(b)))}
)}
,clickLeft:function(){
	var b=this;
	a(this.settings.controlsClass+" li:first-child").click(function(){
	1===b.slideParameters.getCurrentSlideNumber.call(b)?(a(b.settings.slidesClass).animate({
	right:(b.slideParameters.getMaxSlidePercentage.call(b)-100).toString()+"%"}
,b.settings.slideSpeed),b.slideParameters.setCurrentSlideNumber.call(b,b.slideParameters.getNumberOfSlides.call(b)),b.paginate(b.slideParameters.getCurrentSlideNumber.call(b))):(a(b.settings.slidesClass).animate({
	right:"-=100%"}
,b.settings.slideSpeed),b.slideParameters.setCurrentSlideNumber.call(b,b.slideParameters.getCurrentSlideNumber.call(b)-1),b.paginate(b.slideParameters.getCurrentSlideNumber.call(b)))}
)}
,clickPage:function(){
	var b=this;
	a(this.settings.paginationClass+" li").click(function(){
	var c=a(this).index()+1;
	a(b.settings.slidesClass).animate({
	right:(100*(c-1)).toString()+"%"}
,500),b.paginate(c)}
)}
}
,paginate:function(b){
	var c,d=this.slideParameters.getNumberOfSlides.call(this);
	for(c=1;
	c<=d;
	c++)a(this._defaults.paginationClass+" li:nth-child("+c.toString()+")").removeClass("active");
	a(this._defaults.paginationClass+" li:nth-child("+b.toString()+")").addClass("active"),this.slideParameters.setCurrentSlideNumber.call(this,b)}
,positionPagination:function(){
	var b=this.slideParameters.getNumberOfSlides.call(this),c=-(b*this.convertStringToInteger(this.settings.paginationDiameter)+(b-1)*this.convertStringToInteger(this.settings.paginationSpacing))/2;
	a(this.settings.paginationClass).css("margin-left",c)}
,slideParameters:{
	setCurrentSlideNumber:function(a){
	this.currentSlideNumber=a}
,getCurrentSlideNumber:function(){
	return this.currentSlideNumber}
,getNumberOfSlides:function(){
	return a(this._defaults.slidesClass).children().length}
,getSlideWidth:function(){
	return a(this._defaults.slidesClass+" li").width()}
,getMaxSlideDistance:function(){
	return(this.getNumberOfSlides()-1)*this.getSlideWidth()}
,getMaxSlidePercentage:function(){
	return 100*this.slideParameters.getNumberOfSlides.call(this)}
}
,convertStringToInteger:function(a){
	return parseInt(a.replace(/[^0-9.]/g,""))}
,setProperties:function(){
	a("#slider").css({
	position:"relative",overflow:"hidden"}
),a(this.settings.slidesClass).css({
	position:"relative",width:this.slideParameters.getMaxSlidePercentage.call(this).toString()+"%"}
),a(this.settings.controlsClass).css({
	cursor:"pointer"}
),a(this.settings.controlsClass+" li").css({
	position:"absolute"}
),a(this.settings.slidesClass+" li").css({
	width:100/this.slideParameters.getNumberOfSlides.call(this).toString()+"%",float:"left"}
),a(this.settings.paginationClass).css({
	position:"relative",left:"50%",bottom:this.settings.paginationPositionFromBottom}
),a(this.settings.paginationClass+" li").css({
	"margin-right":this.settings.paginationSpacing,float:"left",cursor:"pointer",width:this.settings.paginationDiameter,height:this.settings.paginationDiameter,"border-radius":"9999px"}
)}
}
),a.fn[f]=function(b){
	return this.each(function(){
	a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}
)}
}
(jQuery,window,document);

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

/*--------------SLIDER----------------*/
#slider{width:50%;margin:50px auto;}
/*--------------CONTROLS--------------*/
/*position controls*/
.controls li{top:50%;margin-top:-30px}
.controls li:nth-child(1){left:0;}
.controls li:nth-child(2){right:0;}
/*------------PAGINATION------------*/
/*style pagination*/
.pagination li{background-color:#ddd;}
.pagination li.active{background-color:#000;}
/*-------------HELPERS----------------*/
.responsive{width:100%;height:auto;}
.clearfix:after{content:"";display:table;clear:both;}

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