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

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>jQuery焦点图插件Krakatoa </title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
	<div class="krakatoa">
		<img src="img/1.png" />
		<img src="img/2.png" />
		<img src="img/3.png" />
		<img src="img/4.png" />
	</div>

	<div class="krakatoa" data-settings="{ items : 2, autoplay : true, loop : true }">
		<img src="img/1.png" />
		<img src="img/2.png" />
		<img src="img/3.png" />
		<img src="img/4.png" />
	</div>
<script src="js/jquery.min-1.7.1.js"></script>
<script src="js/jquery.krakatoa.js"></script>
<script>
	$(window).on('load',function(){
		$('.krakatoa').krakatoa( { width: '500px', height: 'auto' });
	});
</script>
</body>
</html>

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

/** * Krakatoa * https://github.com/davidlpz/krakatoa */
(function(c){
	var b=0;
	c.fn.krakatoa=function(e){
	var e=c.extend({
}
,c.fn.krakatoa.defaults,e);
	return this.each(function(){
	var p,n,g=c(this),j=g.children().length,f,r,m,h,q,k,o=0,l;
	l=(c(this).data("settings"))?c.extend({
}
,e,d(c(this).data("settings"))):e;
	if(g.data("krakatoa")){
	return;
}
g.attr("data-krakatoa",true);
	g.html('<div class="krakatoa-control"></div><div class="krakatoa-container">'+g.html()+"</div>");
	f=g.find(".krakatoa-container");
	g.css({
	position:"relative",width:l.width,display:l.display}
);
	f.css({
	overflow:"hidden",position:"relative"}
);
	f.children().css({
	position:"absolute",top:0,left:0,display:"none"}
);
	g.find(".krakatoa-control").append('<ul class="arrows"><li data-move="-1" class="arrow arrow-left"><a href="#">&laquo;
	</a></li><li data-move="1" class="arrow arrow-right"><a href="#">&raquo;
	</a></li></ul>');
	g.find(".arrows").on("click touchstart","li",{
	settings:l}
,a);
	if(!l.arrows){
	g.find(".arrows").css("display","none");
}
if(l.buttons){
	n='<ul class="buttons">';
	for(m=0;
	m<j/l.items;
	m++){
	n+='<li class="pagination"><a href="#">'+m+"</a></li>";
}
n+="</ul>";
	g.find(".krakatoa-control").append(n);
	g.find(".buttons").on("click touchstart","li",{
	settings:l}
,a).find("li").eq(l.first).addClass("active-button");
}
h=g.width();
	k=(h-(l.items-1)*l.gutter)/l.items;
	for(m=0;
	m<j;
	m++){
	r=f.children().eq(m);
	r.css("width",k);
	if(l.height==="max"){
	q=r.outerHeight(true);
	if(q>o){
	o=q;
}
}
}
for(m=0;
	m<l.items&&l.first+m<j;
	m++){
	r=f.children().eq(l.first+m);
	r.addClass("current").css({
	display:"block",left:(k+l.gutter)*m}
);
	if(l.height!=="max"){
	o=l.height==="auto"?r.outerHeight(true):l.height;
}
}
g.attr("data-current",l.first);
	f.css("height",o);
	if(l.autoplay){
	l.playing=true;
	c.fn.krakatoa.play(l,g);
	g.on("mouseleave",function(){
	c.fn.krakatoa.play(l,g);
}
);
	g.on("mouseover",function(){
	clearTimeout(b);
	l.playing=false;
}
);
}
else{
	l.playing=false;
}
}
);
}
;
	c.fn.krakatoa.play=function(e,f){
	b=window.setTimeout(function(){
	f.find(".arrow-"+e.direction).trigger("click");
}
,e.delay);
	if(e.autoplay){
	e.playing=true;
}
}
;
	c.fn.krakatoa.defaults={
	width:"400px",height:"300px",display:"block",arrows:true,buttons:true,items:1,first:0,gutter:10,loop:false,autoplay:false,direction:"right",delay:2000,duration:500}
;
	function a(q){
	var w=c(this),h=w.closest(".krakatoa-control").parent(),f=h.find(".krakatoa-container"),r=parseInt(h.attr("data-current")),k=f.children().length,o,m,p,g,t,v,l,s=0,u=c.Deferred(),n=q.data.settings,j=0;
	q.preventDefault();
	if(w.attr("data-move")){
	m=w.data("move");
	p=r+n.items*m;
	if(n.loop&&(p<0||p>=k)){
	p=Math.ceil(k/n.items)*n.items-p*m;
}
else{
	if(p<0||p>=k){
	if(n.playing){
	n.playing=false;
}
return;
}
}
}
else{
	if(n.buttons){
	if(w.hasClass("active-button")){
	return;
}
m=(w.index()*n.items>r)?1:-1;
	p=w.index()*n.items;
}
}
w.parent().off("click touchstart","li").on("click touchstart","li",function(i){
	i.preventDefault();
}
);
	g=h.width();
	l=(g-(n.items-1)*n.gutter)/n.items;
	for(o=0;
	o<n.items;
	o++){
	v=f.children().eq(r+o);
	v.removeClass("current").animate({
	left:-(g+n.gutter)*m+(l+n.gutter)*o}
,n.duration,"linear",function(){
	c(this).css({
	left:0,display:"none"}
);
}
);
	if(p+o>k-1){
	continue;
}
j++;
	v=f.children().eq(p+o);
	v.addClass("current").css({
	display:"block",left:(g+n.gutter)*m+(l+n.gutter)*o}
).animate({
	left:(l+n.gutter)*o}
,n.duration,"linear",function(){
	j--;
	if(j===0){
	u.resolve();
}
}
);
	if(n.height==="auto"){
	t=v.outerHeight(true);
	if(t>s){
	s=t;
}
f.css("height",s);
}
}
h.attr("data-current",p);
	u.done(function(){
	if(n.playing){
	c.fn.krakatoa.play(n,h);
}
w.parent().off("click touchstart","li");
	w.parent().on("click touchstart","li",{
	settings:n}
,a);
}
);
	r=Math.round(p/n.items);
	if(n.buttons){
	h.find(".active-button").removeClass("active-button").parent().children().eq(r).addClass("active-button");
}
}
function d(f){
	var h=new Object(),j=[],e=0,g;
	if(typeof f!=="string"){
	return;
}
f=f.replace(/[{
}
\s]/g,"");
	j=f.split(",");
	for(e;
	e<j.length;
	e++){
	g=j[e].split(":");
	if(!isNaN(g[1]-0)){
	if(g[1]%1===0){
	g[1]=parseInt(g[1]);
}
else{
	g[1]=parseFloat(g[1]);
}
}
else{
	if(g[1].toLowerCase()=="true"||g[1].toLowerCase()=="false"){
	g[1]=(g[1]=="true");
}
}
h[g[0]]=g[1];
}
return h;
}
}
(jQuery));

CSS代码(style.css):

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
span,img,a,ul,li{margin:0;padding:0;border:0;}
ul{list-style-type:none;}
.krakatoa{display:none;margin:50px auto;}
.krakatoa-control{padding-bottom:20px;}
.arrows{position:absolute;top:1px;left:0;z-index:100;}
.arrow{float:left;margin-right:7px;}
.arrow a{display:block;width:13px;height:0;padding-top:16px;overflow:hidden;background:transparent url('img/arrows.png') no-repeat;cursor:pointer;}
.arrow-left a{background-position:0 0;}
.arrow-right a{background-position:-20px 0;left:20px;}
.arrow-left a:hover{background-position:0 -16px;}
.arrow-right a:hover{background-position:-20px -16px;left:20px;}
.buttons{position:absolute;top:5px;right:0px;z-index:100;}
.pagination{float:left;margin:0 2px;}
.pagination a{display:block;width:10px;height:0;padding-top:10px;background-image:url('img/pagination.png');background-position:0 0;overflow:hidden;}
.active-button a,.active-button a:hover{background-position:0 -30px;}
.pagination a:hover{background-position:0 -30px;}

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