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" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="src/jquery.skidder.css">

</head>
<body>

<div class="slideshow" style="height: 0; margin-top:15px;overflow: hidden">
	<div class="slide"><img src="./img/1.jpg"></div>
	  <div class="slide"><img src="./img/2.jpg"></div>
	  <div class="slide"><img src="./img/3.jpg"></div>
	  <div class="slide"><img src="./img/4.jpg"></div>
	  <div class="slide"><img src="./img/5.jpg"></div>
</div>
<!--<div class="slideshow-nocycle" style="height: 0; overflow: hidden">
	  <div class="slide"><img src="./images/1000x400_b.png"></div>
	  <div class="slide"><img src="./images/300x500_p.png"></div>
	  <div class="slide"><img src="./images/500x300_y.png"></div>
	  <div class="slide"><img src="./images/300x500_p.png"></div>
	</div> -->

<!--<div class="slideshow">

	  <div class="slide" style="background: green;">Text 1</div>
	  <div class="slide" style="background: red;">Text 2</div>
	  <div class="slide" style="background: yellow;">Text 3</div>
	  <div class="slide" style="background: blue;">Text 4</div>

</div> -->

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/smartresize.js"></script>
<script src="src/jquery.skidder.js"></script>
<script type="text/javascript">
	$('.slideshow').each( function() {
		  var $slideshow = $(this);
		  $slideshow.imagesLoaded( function() {
			$slideshow.skidder({
			  slideClass    : '.slide',
			  animationType : 'css',
			  scaleSlides   : true,
			  maxWidth : 1300,
			  maxHeight: 500,
			  paging        : true,
			  autoPaging    : true,
			  pagingWrapper : ".skidder-pager",
			  pagingElement : ".skidder-pager-dot",
			  swiping       : true,
			  leftaligned   : false,
			  cycle         : true,
			  jumpback      : false,
			  speed         : 400,
			  autoplay      : false,
			  autoplayResume: false,
			  interval      : 4000,
			  transition    : "slide",
			  afterSliding  : function() {},
			  afterInit     : function() {}
			});
		  });
	});
	// $('.slideshow-nocycle').each( function() {
	//   var $slideshow = $(this);
	//   $slideshow.imagesLoaded( function() {
	//     $slideshow.skidder({
	//       slideClass    : '.slide',
	//       scaleSlides   : true,
	//       maxWidth : 1300,
	//       maxHeight: 500,
	//       leftaligned   : true,
	//       cycle         : false,
	//       paging        : true,
	//       swiping       : true,
	//       jumpback      : false,
	//       speed         : 400,
	//       autoplay      : false,
	//       interval      : 4000,
	//       afterSliding  : function() {}
	//     });
	//   });
	// });
	$(window).smartresize(function(){
		  $('.slideshow').skidder('resize');
	});
</script>
</body>
</html>

JS代码(smartresize.js):

(function($,sr){
	// from:http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func,threshold,execAsap){
	var timeout;
	return function debounced (){
	var obj = this,args = arguments;
	function delayed (){
	if (!execAsap) func.apply(obj,args);
	timeout = null;
}
;
	if (timeout) clearTimeout(timeout);
	else if (execAsap) func.apply(obj,args);
	timeout = setTimeout(delayed,threshold || 100);
}
;
}
// smartresize jQuery.fn[sr] = function(fn){
	return fn ? this.bind('resize',debounce(fn)):this.trigger(sr);
}
;
}
)(jQuery,'smartresize');

CSS代码(zzsc.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}

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