jQuery响应式图片播放插件特效代码

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

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

以下是 jQuery响应式图片播放插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>jQuery响应式图片播放插件</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
</head>
<body>

<h1>Flexisel</h1>

<p>Flexisel will adapt responsively as the screen width gets smaller...</p>

<ul id="flexiselDemo1">	
	<li><img src="images/logo-nyt.png" /></li>
	<li><img src="images/logo-microsoft.png" /></li> 	
	<li><img src="images/logo-ebay.png" /></li> 	
	<li><img src="images/logo-hp.png" /></li> 
	<li><img src="images/logo-youtube.png" /></li> 							    	  	       	   	    	
</ul>
 
<div class="clearout"></div> 

<p>You can also change the number of items shown depending on the screen width!</p>

<ul id="flexiselDemo2"> 
	<li><img src="images/logo-adidas.png" /></li>  	
	<li><img src="images/logo-nike.png" /></li> 
	<li><img src="images/logo-amazon.png" /></li> 
	<li><img src="images/logo-spotify.png" /></li> 
	<li><img src="images/logo-android.png" /></li> 					 						    	  	       	   	    	
</ul>
       
<div class="clearout"></div>
       
<p>Other options include autoplay, animation speed when scrolling right and left, initial number of visible items, and more!</p>   
   
<ul id="flexiselDemo3">
	<li><img src="images/1.jpg" /></li>
	<li><img src="images/2.jpg" /></li>
	<li><img src="images/3.jpg" /></li>
	<li><img src="images/4.jpg" /></li>					    	  	       	   	    	
</ul>    

<div class="clearout"></div>
    
 <script type="text/javascript">

$(window).load(function() {
	$("#flexiselDemo1").flexisel();
	$("#flexiselDemo2").flexisel({
		enableResponsiveBreakpoints: true,
    	responsiveBreakpoints: { 
    		portrait: { 
    			changePoint:480,
    			visibleItems: 1
    		}, 
    		landscape: { 
    			changePoint:640,
    			visibleItems: 2
    		},
    		tablet: { 
    			changePoint:768,
    			visibleItems: 3
    		}
    	}
    });

	$("#flexiselDemo3").flexisel({
		visibleItems: 5,
		animationSpeed: 1000,
		autoPlay: true,
		autoPlaySpeed: 3000,    		
		pauseOnHover: true,
		enableResponsiveBreakpoints: true,
    	responsiveBreakpoints: { 
    		portrait: { 
    			changePoint:480,
    			visibleItems: 1
    		}, 
    		landscape: { 
    			changePoint:640,
    			visibleItems: 2
    		},
    		tablet: { 
    			changePoint:768,
    			visibleItems: 3
    		}
    	}
    });
});
</script>
</body>
</html>

JS代码(jquery.flexisel.js):

/** File:jquery.flexisel.js* Version:1.0.1* Description:Responsive carousel jQuery plugin* Author:9bit Studios* Copyright 2012,9bit Studios* http://www.9bitstudios.com* Free to use and abuse under the MIT license.* http://www.opensource.org/licenses/mit-license.php*/
(function ($){
	$.fn.flexisel = function (options){
	var defaults = $.extend({
	visibleItems:4,animationSpeed:200,autoPlay:false,autoPlaySpeed:3000,pauseOnHover:true,setMaxWidthAndHeight:false,enableResponsiveBreakpoints:false,responsiveBreakpoints:{
	portrait:{
	changePoint:480,visibleItems:1}
,landscape:{
	changePoint:640,visibleItems:2}
,tablet:{
	changePoint:768,visibleItems:3}
}
}
,options);
	/******************************Private Variables*******************************/
 var object = $(this);
	var settings = $.extend(defaults,options);
	var itemsWidth;
	// Declare the global width of each item in carouselvar canNavigate = true;
	var itemsVisible = settings.visibleItems;
	var responsivePoints = [];
	/******************************Public Methods*******************************/
 var methods ={
	init:function(){
	return this.each(function (){
	methods.appendHTML();
	methods.setEventHandlers();
	methods.initializeItems();
}
);
}
,/******************************Initialize ItemsSet up carousel*******************************/
initializeItems:function(){
	var listParent = object.parent();
	var innerHeight = listParent.height();
	var childSet = object.children();
	methods.sortResponsiveObject(settings.responsiveBreakpoints);
	var innerWidth = listParent.width();
	// Set widthsitemsWidth = (innerWidth)/itemsVisible;
	childSet.width(itemsWidth);
	childSet.last().insertBefore(childSet.first());
	childSet.last().insertBefore(childSet.first());
	object.css({
	'left':-itemsWidth}
);
	object.fadeIn();
	$(window).trigger("resize");
	// needed to position arrows correctly}
,/******************************Append HTMLWrap list in markup with classes needed for carousel to function*******************************/
appendHTML:function(){
	object.addClass("nbs-flexisel-ul");
	object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
	object.find("li").addClass("nbs-flexisel-item");
	if(settings.setMaxWidthAndHeight){
	var baseWidth = $(".nbs-flexisel-item img").width();
	var baseHeight = $(".nbs-flexisel-item img").height();
	$(".nbs-flexisel-item img").css("max-width",baseWidth);
	$(".nbs-flexisel-item img").css("max-height",baseHeight);
}
$("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);
	var cloneContent = object.children().clone();
	object.append(cloneContent);
}
,/******************************Set Event HandlersSet events for carousel*******************************/
setEventHandlers:function(){
	var listParent = object.parent();
	var childSet = object.children();
	var leftArrow = listParent.find($(".nbs-flexisel-nav-left"));
	var rightArrow = listParent.find($(".nbs-flexisel-nav-right"));
	$(window).on("resize",function(event){
	methods.setResponsiveEvents();
	var innerWidth = $(listParent).width();
	var innerHeight = $(listParent).height();
	itemsWidth = (innerWidth)/itemsVisible;
	childSet.width(itemsWidth);
	object.css({
	'left':-itemsWidth}
);
	var halfArrowHeight = (leftArrow.height())/2;
	var arrowMargin = (innerHeight/2) - halfArrowHeight;
	leftArrow.css("top",arrowMargin + "px");
	rightArrow.css("top",arrowMargin + "px");
}
);
	$(leftArrow).on("click",function (event){
	methods.scrollLeft();
}
);
	$(rightArrow).on("click",function (event){
	methods.scrollRight();
}
);
	if(settings.pauseOnHover){
	$(".nbs-flexisel-item").on({
	mouseenter:function (){
	canNavigate = false;
}
,mouseleave:function (){
	canNavigate = true;
}
}
);
}
if(settings.autoPlay){
	setInterval(function (){
	if(canNavigate)methods.scrollRight();
}
,settings.autoPlaySpeed);
}
}
,/******************************Set Responsive EventsSet breakpoints depending on responsiveBreakpoints*******************************/
setResponsiveEvents:function(){
	var contentWidth = $('html').width();
	if(settings.enableResponsiveBreakpoints){
	var largestCustom = responsivePoints[responsivePoints.length-1].changePoint;
	// sorted arrayfor(var i in responsivePoints){
	if(contentWidth >= largestCustom){
	// set to default if width greater than largest custom responsiveBreakpointitemsVisible = settings.visibleItems;
	break;
}
else{
	// determine custom responsiveBreakpoint to useif(contentWidth < responsivePoints[i].changePoint){
	itemsVisible = responsivePoints[i].visibleItems;
	break;
}
elsecontinue;
}
}
}
}
,/******************************Sort Responsive ObjectGets all the settings in resposiveBreakpoints and sorts them into an array*******************************/
sortResponsiveObject:function(obj){
	var responsiveObjects = [];
	for(var i in obj){
	responsiveObjects.push(obj[i]);
}
responsiveObjects.sort(function(a,b){
	return a.changePoint - b.changePoint;
}
);
	responsivePoints = responsiveObjects;
}
,/******************************Scroll LeftScrolls the carousel to the left*******************************/
scrollLeft:function(){
	if(canNavigate){
	canNavigate = false;
	var listParent = object.parent();
	var innerWidth = listParent.width();
	itemsWidth = (innerWidth)/itemsVisible;
	var childSet = object.children();
	object.animate({
	'left':"+=" + itemsWidth}
,{
	queue:false,duration:settings.animationSpeed,easing:"linear",complete:function(){
	childSet.last().insertBefore(childSet.first());
	// Get the first list item and put it after the last list item (that's how the infinite effects is made)methods.adjustScroll();
	canNavigate = true;
}
}
);
}
}
,/******************************Scroll RightScrolls the carousel to the right*******************************/
scrollRight:function(){
	if(canNavigate){
	canNavigate = false;
	var listParent = object.parent();
	var innerWidth = listParent.width();
	itemsWidth = (innerWidth)/itemsVisible;
	var childSet = object.children();
	object.animate({
	'left':"-=" + itemsWidth}
,{
	queue:false,duration:settings.animationSpeed,easing:"linear",complete:function(){
	childSet.first().insertAfter(childSet.last());
	// Get the first list item and put it after the last list item (that's how the infinite effects is made)methods.adjustScroll();
	canNavigate = true;
}
}
);
}
}
,/******************************Adjust ScrollNeeded to position arrows correctly on init and resize*******************************/
adjustScroll:function(){
	var listParent = object.parent();
	var childSet = object.children();
	var innerWidth = listParent.width();
	itemsWidth = (innerWidth)/itemsVisible;
	childSet.width(itemsWidth);
	object.css({
	'left':-itemsWidth}
);
}
}
;
	if (methods[options]){
	// $("#element").pluginName('methodName','arg1','arg2');
	return methods[options].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof options === 'object' || !options){
	// $("#element").pluginName({
	option:1,option:2}
);
	return methods.init.apply(this);
}
else{
	$.error( 'Method "' + method + '" does not exist in flexisel plugin!');
}
}
;
}
)(jQuery);

CSS代码(style.css):

body{background:#fff;font-family:Arial,sans-serif;}
p{margin-bottom:20px;}
.clearout{height:20px;clear:both;}
#flexiselDemo1,#flexiselDemo2,#flexiselDemo3{display:none;}
.nbs-flexisel-container{position:relative;max-width:100%;}
.nbs-flexisel-ul{position:relative;width:9999px;margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nbs-flexisel-inner{overflow:hidden;float:left;width:100%;background:#fcfcfc;background:#fcfcfc -moz-linear-gradient(top,#fcfcfc 0%,#eee 100%);/* FF3.6+ */
background:#fcfcfc -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fcfcfc)),color-stop(100%,#eee));/* Chrome,Safari4+ */
background:#fcfcfc -webkit-linear-gradient(top,#fcfcfc 0%,#eee 100%);/* Chrome10+,Safari5.1+ */
background:#fcfcfc -o-linear-gradient(top,#fcfcfc 0%,#eee 100%);/* Opera11.10+ */
background:#fcfcfc -ms-linear-gradient(top,#fcfcfc 0%,#eee 100%);/* IE10+ */
background:#fcfcfc linear-gradient(top,#fcfcfc 0%,#eee 100%);/* W3C */
border:1px solid #ccc;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.nbs-flexisel-item{float:left;margin:0px;padding:0px;cursor:pointer;position:relative;line-height:0px;}
.nbs-flexisel-item img{width:100%;cursor:pointer;positon:relative;margin-top:10px;margin-bottom:10px;max-width:100px;max-height:45px;}
/*** Navigation ***/
.nbs-flexisel-nav-left,.nbs-flexisel-nav-right{width:22px;height:22px;position:absolute;cursor:pointer;z-index:100;opacity:0.5;}
.nbs-flexisel-nav-left{left:10px;background:url(../images/button-previous.png) no-repeat;}
.nbs-flexisel-nav-right{right:5px;background:url(../images/button-next.png) no-repeat;}

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