jQuery焦点图插件PicCarousel轮播滚动切换特效代码

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

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

以下是 jQuery焦点图插件PicCarousel轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!doctype html>
<html>
<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">
<title>jQuery焦点图插件PicCarousel</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/PicCarousel.js"></script>

</head>
<body>
<div class="container">
<div class="poster-main A_Demo">
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>

<div class="poster-main B_Demo" style="margin-top:100px">
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>

<script>

$(".A_Demo").PicCarousel("init");
$(".B_Demo").PicCarousel({
"width":1000,		
"height":300,		
"posterWidth":520,	
"posterHeight":300,
"scale":0.9,		
"speed":500,	
"autoPlay":true,	
"delay":1000,	
"verticalAlign":"top"	
});

</script>
</div>
</body>
</html>

JS代码(demo.js):

// var PicCarousel = function(poster){
	//var self = this;
	////保存单个旋转木马对象//this.poster = poster;
	//this.posterItemMain = poster.find("ul.poster-list");
	//this.nextBtn = poster.find("div.poster-next-btn");
	//this.prevBtn = poster.find("div.poster-prev-btn");
	//this.posterItems = poster.find("li.poster-item");
	//if(this.posterItems.size()%2 == 0){
	//this.posterItemMain.append(this.posterItems.ep(0).clone());
	//this.posterItems = this.posterItemMain.children;
	//}
//this.posterFirstItem = this.posterItems.first();
	//this.posterLastItem = this.posterItems.last();
	//this.rotateFlag =true;
	////默认配置参数//this.setting ={
	//"width":1000,//幻灯片的宽度//"height":500,//幻灯片的高度//"posterWidth":180,//幻灯片第一帧的宽度//"posterHeight":500,//幻灯片第一张的高度//"scale":0.9,//记录显示比例关系//"speed":300,//记录幻灯片滚动速度//"autoPlay":true,//是否开启自动播放//"delay":500,//自动播放间隔//"verticalAlign":"middle"//图片对齐位置//}
;
	//$.extend(this.setting,this.getSetting());
	////设置配置参数值//this.setSettingValue();
	//this.setPosterPost();
	//this.nextBtn.click(function(){
	//if(self.rotateFlag){
	//self.rotateFlag = false;
	//self.carouseRotate("left");
	//}
;
	//}
);
	//this.prevBtn.click(function(){
	//if(self.rotateFlag){
	//self.rotateFlag = false;
	//self.carouseRotate("right");
	//}
;
	//}
);
	////是否开启自动播放//if(this.setting.autoPlay){
	//console.log("a");
	//this.autoPlay();
	//this.poster.hover(function(){
	//window.clearInterval(self.timer);
	//}
,function(){
	//self.autoPlay();
	//}
);
	//}
//}
// PicCarousel.prototype ={
	////自动播放方法//autoPlay:function(){
	//var self = this;
	//this.timer = window.setInterval(function(){
	//self.nextBtn.click();
	//}
,this.setting.delay);
	//}
,////旋转方法//carouseRotate:function(dir){
	//var _this_ = this;
	//var zIndexArr = [];
	//if(dir === "left"){
	//this.posterItems.each(function(){
	//var self = $(this),//prev = self.prev().get(0)?self.prev():_this_.posterLastItem,//width = prev.width(),//height = prev.height(),//zIndex = prev.css("zIndex"),//opacity = prev.css("opacity"),//left = prev.css("left"),//top = prev.css("top");
	//zIndexArr.push(zIndex);
	//self.animate({
	//width:width,//height:height,//opacity:opacity,//left:left,//top:top//}
,_this_.setting.speed,function(){
	//_this_.rotateFlag = true;
	//}
);
	//}
);
	//this.posterItems.each(function(i){
	//$(this).css("zIndex",zIndexArr[i]);
	//}
)//}
else if(dir === "right"){
	//this.posterItems.each(function(){
	//var self = $(this),//next = self.next().get(0)?self.next():_this_.posterFirstItem,//width = next.width(),//height = next.height(),//zIndex = next.css("zIndex"),//opacity = next.css("opacity"),//left = next.css("left"),//top = next.css("top");
	//zIndexArr.push(zIndex);
	//self.animate({
	//width:width,//height:height,//opacity:opacity,//left:left,//top:top//}
,_this_.setting.speed,function(){
	//_this_.rotateFlag = true;
	//}
);
	//}
);
	//this.posterItems.each(function(i){
	//$(this).css("zIndex",zIndexArr[i]);
	//}
)//}
//}
,////设置剩余的帧的位置关系//setPosterPost:function(){
	//var self = this;
	//var sliceItems = this.posterItems.slice(1),//sliceSize = sliceItems.size()/2,//rightSlice = sliceItems.slice(0,sliceSize),//level = Math.floor(this.posterItems.size()/2),//leftSlice = sliceItems.slice(sliceSize);
	////设置右边帧的位置关系和宽度、高度、top...//var rw = this.setting.posterWidth,//rh = this.setting.posterHeight,////((容器宽-帧宽)/2)/层级 190//gap = ((this.setting.width-this.setting.posterWidth)/2)/level;
	//var firstLeft = (this.setting.width-this.setting.posterWidth)/2;
	//var fixOffsetLeft = firstLeft + rw;
	////设置右边的位置关系//rightSlice.each(function(i){
	//level--;
	//rw = rw*self.setting.scale;
	//rh = rh*self.setting.scale;
	//var j=i;
	//$(this).css({
	//zIndex:level,//width:rw,//height:rh,//opacity:1/(++j),//left:fixOffsetLeft+(++i)*gap-rw,//top:self.setVertucalAlign(rh)//}
);
	//}
);
	////设置左边的位置关系//var lw = rightSlice.last().width(),//lh = rightSlice.last().height(),//oloop = Math.floor(this.posterItems.size()/2);
	//leftSlice.each(function(i){
	//$(this).css({
	//zIndex:i,//width:lw,//height:lh,//opacity:1/oloop,//left:i*gap,//top:self.setVertucalAlign(lh)//}
);
	//lw = lw/self.setting.scale;
	//lh = lh/self.setting.scale;
	//oloop--;
	//}
);
	//}
,////设置垂直排列对齐//setVertucalAlign:function(height){
	//var verticalType = this.setting.verticalAlign,//top = 0;
	//if(verticalType === "middle"){
	//top = (this.setting.height - height)/2;
	//}
else if(verticalType === "top"){
	//top = 0;
	//}
else if(verticalType === "bottom"){
	//top = this.setting.height - height;
	//}
else{
	//top = (this.setting.height-height)/2;
	//}
;
	//return top;
	//}
,////设置配置参数值去控制基本的宽度高度//setSettingValue:function(){
	//this.poster.css({
	//width:this.setting.width,//height:this.setting.height//}
);
	//this.posterItemMain.css({
	//width:this.setting.width,//height:this.setting.height//}
);
	////计算左右切换按钮的宽度//var w = (this.setting.width-this.setting.posterWidth)/2;
	//this.nextBtn.css({
	//width:w,//height:this.setting.height,//zIndex:Math.ceil(this.posterItems.size()/2)//}
);
	//this.prevBtn.css({
	//width:w,//height:this.setting.height,//zIndex:Math.ceil(this.posterItems.size()/2)//}
);
	//this.posterFirstItem.css({
	//width:this.setting.posterWidth,//height:this.setting.posterHeight,//left:w,//zIndex:Math.floor(this.posterItems.size()/2)//}
);
	//}
,////获取用户配置参数//getSetting:function(){
	//var setting = this.poster.attr("data-setting");
	//if(setting&&setting!=""){
	//return $.parseJSON(setting);
	//}
else{
	//return{
}
;
	//}
//}
//}
// PicCarousel.init = function(posters){
	//var _this_ = this;
	//posters.each(function(){
	//new _this_($(this));
	//}
);
	//}
;

JS代码(PicCarousel.js):

/** * jQuery PicCarousel.js * Version 0.1.4 * * https://github.com/javion25/PicCarousel.js * MIT licensed * * Copyright (C) 2015 Javion.com - A project by Javion */
;
	(function($){
	//定义PicCarousel类var PicCarousel = (function(){
	//定义PicCarousel的构造函数function PicCarousel(element,options){
	this.settings = $.extend(true,$.fn.PicCarousel.defaults,options||{
}
);
	this.element = element;
	this.init();
}
//定义PicCarousel的方法PicCarousel.prototype ={
	/*说明：初始化插件*/
init:function(){
	var me = this;
	me.poster = me.element;
	me.posterItemMain = me.poster.find("ul.poster-list");
	me.nextBtn = me.poster.find("div.poster-next-btn");
	me.prevBtn = me.poster.find("div.poster-prev-btn");
	me.posterItems = me.poster.find("li.poster-item");
	if(me.posterItems.size()%2 == 0){
	me.posterItemMain.append(me.posterItems.ep(0).clone());
	me.posterItems = me.posterItemMain.children;
}
me.posterFirstItem = me.posterItems.first();
	me.posterLastItem = me.posterItems.last();
	me.rotateFlag =true;
	//设置配置参数值me.setSettingValue();
	me.setPosterPost();
	me.nextBtn.click(function(){
	if(me.rotateFlag){
	me.rotateFlag = false;
	me.carouseRotate("left");
}
;
}
);
	me.prevBtn.click(function(){
	if(me.rotateFlag){
	me.rotateFlag = false;
	me.carouseRotate("right");
}
;
}
);
	//是否开启自动播放if(me.settings.autoPlay){
	me.autoPlay();
	me.poster.hover(function(){
	window.clearInterval(me.timer);
}
,function(){
	me.autoPlay();
}
);
}
}
,//自动播放方法autoPlay:function(){
	var me = this;
	me.timer = window.setInterval(function(){
	me.nextBtn.click();
}
,me.settings.delay);
}
,//旋转方法carouseRotate:function(dir){
	var me = this;
	var zIndexArr = [];
	if(dir === "left"){
	me.posterItems.each(function(){
	var self = $(this),prev = self.prev().get(0)?self.prev():me.posterLastItem,width = prev.width(),height = prev.height(),zIndex = prev.css("zIndex"),opacity = prev.css("opacity"),left = prev.css("left"),top = prev.css("top");
	zIndexArr.push(zIndex);
	self.animate({
	width:width,height:height,opacity:opacity,left:left,top:top}
,me.settings.speed,function(){
	me.rotateFlag = true;
}
);
}
);
	me.posterItems.each(function(i){
	$(this).css("zIndex",zIndexArr[i]);
}
)}
else if(dir === "right"){
	me.posterItems.each(function(){
	var self = $(this),next = self.next().get(0)?self.next():me.posterFirstItem,width = next.width(),height = next.height(),zIndex = next.css("zIndex"),opacity = next.css("opacity"),left = next.css("left"),top = next.css("top");
	zIndexArr.push(zIndex);
	self.animate({
	width:width,height:height,opacity:opacity,left:left,top:top}
,me.settings.speed,function(){
	me.rotateFlag = true;
}
);
}
);
	me.posterItems.each(function(i){
	$(this).css("zIndex",zIndexArr[i]);
}
)}
}
,//设置剩余的帧的位置关系setPosterPost:function(){
	var me = this;
	var sliceItems = me.posterItems.slice(1),sliceSize = sliceItems.size()/2,rightSlice = sliceItems.slice(0,sliceSize),level = Math.floor(me.posterItems.size()/2),leftSlice = sliceItems.slice(sliceSize);
	//设置右边帧的位置关系和宽度、高度、top...var rw = me.settings.posterWidth,rh = me.settings.posterHeight,//((容器宽-帧宽)/2)/层级 190gap = ((me.settings.width-me.settings.posterWidth)/2)/level;
	var firstLeft = (me.settings.width-me.settings.posterWidth)/2;
	var fixOffsetLeft = firstLeft + rw;
	//设置右边的位置关系rightSlice.each(function(i){
	level--;
	rw = rw*me.settings.scale;
	rh = rh*me.settings.scale;
	var j=i;
	$(this).css({
	zIndex:level,width:rw,height:rh,opacity:1/(++j),left:fixOffsetLeft+(++i)*gap-rw,top:me.setVertucalAlign(rh)}
);
}
);
	//设置左边的位置关系var lw = rightSlice.last().width(),lh = rightSlice.last().height(),oloop = Math.floor(me.posterItems.size()/2);
	leftSlice.each(function(i){
	$(this).css({
	zIndex:i,width:lw,height:lh,opacity:1/oloop,left:i*gap,top:me.setVertucalAlign(lh)}
);
	lw = lw/me.settings.scale;
	lh = lh/me.settings.scale;
	oloop--;
}
);
}
,//设置垂直排列对齐setVertucalAlign:function(height){
	var me = this;
	var verticalType = me.settings.verticalAlign,top = 0;
	if(verticalType === "middle"){
	top = (me.settings.height - height)/2;
}
else if(verticalType === "top"){
	top = 0;
}
else if(verticalType === "bottom"){
	top = me.settings.height - height;
}
else{
	top = (me.settings.height-height)/2;
}
;
	return top;
}
,//配置左右按钮和第一帧位置setSettingValue:function(){
	var me = this;
	me.poster.css({
	width:me.settings.width,height:me.settings.height}
);
	me.posterItemMain.css({
	width:me.settings.width,height:me.settings.height}
);
	//计算左右切换按钮的宽度var w = (me.settings.width-me.settings.posterWidth)/2;
	me.nextBtn.css({
	width:w,height:me.settings.height,zIndex:Math.ceil(me.posterItems.size()/2)}
);
	me.prevBtn.css({
	width:w,height:me.settings.height,zIndex:Math.ceil(me.posterItems.size()/2)}
);
	me.posterFirstItem.css({
	width:me.settings.posterWidth,height:me.settings.posterHeight,top:me.setVertucalAlign(me.settings.posterHeight),left:w,zIndex:Math.floor(me.posterItems.size()/2)}
);
}
}
;
	return PicCarousel;
}
)();
	//单例模式,添加PicCarousel方法$.fn.PicCarousel = function(options){
	return this.each(function(){
	var me = $(this),instance = me.data("PicCarousel");
	if(!instance){
	instance = new PicCarousel(me,options);
	me.data("PicCarousel",instance);
}
}
);
}
;
	//默认配置参数$.fn.PicCarousel.defaults ={
	"width":1000,//幻灯片的宽度"height":300,//幻灯片的高度"posterWidth":520,//幻灯片第一帧的宽度"posterHeight":300,//幻灯片第一张的高度"scale":0.9,//记录显示比例关系"speed":300,//记录幻灯片滚动速度"autoPlay":false,//是否开启自动播放"delay":500,//自动播放间隔"verticalAlign":"middle"//图片对齐位置}
}
(jQuery));

CSS代码(style.css):

/*重置*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:;}
abbr,acronym{border:0;}
body{color:#666;background-color:#eee;font:12px/1.5;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{zoom:1;}
.container{margin:150px auto;width:1000px;}
.poster-main{width:1000px;height:500px;position:relative;margin:0 auto;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:1000px;height:500px;}
.poster-main .poster-list .poster-item{width:200px;height:500px;position:absolute;left:0;top:0;}
.poster-main .poster-btn{position:absolute;top:0;z-index:10;cursor:pointer;}
.poster-main .poster-prev-btn{left:0;background:url(../img/left.png) no-repeat center center;}
.poster-main .poster-next-btn{right:0;background:url(../img/right.png) no-repeat center center;}

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