9款过度效果jquery焦点图轮播滚动切换特效代码

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

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

以下是 9款过度效果jquery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>9款过度效果jquery焦点图</title>
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body style="text-align:center">

    <div id="wrapper">
        <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <a href="#" target="_blank"><img src="images/toystory.jpg" alt="标题美女图片" title="标题美女图片" /></a>
                <a href="#" target="_blank"><img src="images/up.jpg" alt="" title="标题美女图片" /></a>
                <a href="#" target="_blank"><img src="images/walle.jpg" alt="标题美女图片"title="标题美女图片" /></a>
                <a href="#" target="_blank"><img src="images/nemo.jpg" alt="标题美女图片" title="标题美女图片" /></a>
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong><a href="#">标题美女图片</a>.
            </div>
        </div>
    </div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider();
	});
</script>
</body>
</html>

JS代码(jquery.nivo.slider.pack.js):

/* * jQuery Nivo Slider v2.3 * http://nivo.dev7studios.com * * Copyright 2010,Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */
(function(b){
	var a=function(j,q){
	var g=b.extend({
}
,b.fn.nivoSlider.defaults,q);
	var m={
	currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false}
;
	var d=b(j);
	d.data("nivo:vars",m);
	d.css("position","relative");
	d.addClass("nivoSlider");
	var e=d.children();
	e.each(function(){
	var t=b(this);
	var s="";
	if(!t.is("img")){
	if(t.is("a")){
	t.addClass("nivo-imageLink");
	s=t}
t=t.find("img:first")}
var r=t.width();
	if(r==0){
	r=t.attr("width")}
var i=t.height();
	if(i==0){
	i=t.attr("height")}
if(r>d.width()){
	d.width(r)}
if(i>d.height()){
	d.height(i)}
if(s!=""){
	s.css("display","none")}
t.css("display","none");
	m.totalSlides++}
);
	if(g.startSlide>0){
	if(g.startSlide>=m.totalSlides){
	g.startSlide=m.totalSlides-1}
m.currentSlide=g.startSlide}
if(b(e[m.currentSlide]).is("img")){
	m.currentImage=b(e[m.currentSlide])}
else{
	m.currentImage=b(e[m.currentSlide]).find("img:first")}
if(b(e[m.currentSlide]).is("a")){
	b(e[m.currentSlide]).css("display","block")}
d.css("background","url("+m.currentImage.attr("src")+") no-repeat");
	for(var k=0;
	k<g.slices;
	k++){
	var o=Math.round(d.width()/g.slices);
	if(k==g.slices-1){
	d.append(b('<div class="nivo-slice"></div>').css({
	left:(o*k)+"px",width:(d.width()-(o*k))+"px"}
))}
else{
	d.append(b('<div class="nivo-slice"></div>').css({
	left:(o*k)+"px",width:o+"px"}
))}
}
d.append(b('<div class="nivo-caption"><p></p></div>').css({
	display:"none",opacity:g.captionOpacity}
));
	if(m.currentImage.attr("title")!=""){
	var n=m.currentImage.attr("title");
	if(n.substr(0,1)=="#"){
	n=b(n).html()}
b(".nivo-caption p",d).html(n);
	b(".nivo-caption",d).fadeIn(g.animSpeed)}
var c=0;
	if(!g.manualAdvance&&e.length>1){
	c=setInterval(function(){
	p(d,e,g,false)}
,g.pauseTime)}
if(g.directionNav){
	d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');
	if(g.directionNavHide){
	b(".nivo-directionNav",d).hide();
	d.hover(function(){
	b(".nivo-directionNav",d).show()}
,function(){
	b(".nivo-directionNav",d).hide()}
)}
b("a.nivo-prevNav",d).live("click",function(){
	if(m.running){
	return false}
clearInterval(c);
	c="";
	m.currentSlide-=2;
	p(d,e,g,"prev")}
);
	b("a.nivo-nextNav",d).live("click",function(){
	if(m.running){
	return false}
clearInterval(c);
	c="";
	p(d,e,g,"next")}
)}
if(g.controlNav){
	var l=b('<div class="nivo-controlNav"></div>');
	d.append(l);
	for(var k=0;
	k<e.length;
	k++){
	if(g.controlNavThumbs){
	var f=e.eq(k);
	if(!f.is("img")){
	f=f.find("img:first")}
if(g.controlNavThumbsFromRel){
	l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}
else{
	l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}
}
else{
	l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}
}
b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");
	b(".nivo-controlNav a",d).live("click",function(){
	if(m.running){
	return false}
if(b(this).hasClass("active")){
	return false}
clearInterval(c);
	c="";
	d.css("background","url("+m.currentImage.attr("src")+") no-repeat");
	m.currentSlide=b(this).attr("rel")-1;
	p(d,e,g,"control")}
)}
if(g.keyboardNav){
	b(window).keypress(function(i){
	if(i.keyCode=="37"){
	if(m.running){
	return false}
clearInterval(c);
	c="";
	m.currentSlide-=2;
	p(d,e,g,"prev")}
if(i.keyCode=="39"){
	if(m.running){
	return false}
clearInterval(c);
	c="";
	p(d,e,g,"next")}
}
)}
if(g.pauseOnHover){
	d.hover(function(){
	m.paused=true;
	clearInterval(c);
	c=""}
,function(){
	m.paused=false;
	if(c==""&&!g.manualAdvance){
	c=setInterval(function(){
	p(d,e,g,false)}
,g.pauseTime)}
}
)}
d.bind("nivo:animFinished",function(){
	m.running=false;
	b(e).each(function(){
	if(b(this).is("a")){
	b(this).css("display","none")}
}
);
	if(b(e[m.currentSlide]).is("a")){
	b(e[m.currentSlide]).css("display","block")}
if(c==""&&!m.paused&&!g.manualAdvance){
	c=setInterval(function(){
	p(d,e,g,false)}
,g.pauseTime)}
g.afterChange.call(this)}
);
	var p=function(r,s,u,x){
	var y=r.data("nivo:vars");
	if(y&&(y.currentSlide==y.totalSlides-1)){
	u.lastSlide.call(this)}
if((!y||y.stop)&&!x){
	return false}
u.beforeChange.call(this);
	if(!x){
	r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}
else{
	if(x=="prev"){
	r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}
if(x=="next"){
	r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}
}
y.currentSlide++;
	if(y.currentSlide==y.totalSlides){
	y.currentSlide=0;
	u.slideshowEnd.call(this)}
if(y.currentSlide<0){
	y.currentSlide=(y.totalSlides-1)}
if(b(s[y.currentSlide]).is("img")){
	y.currentImage=b(s[y.currentSlide])}
else{
	y.currentImage=b(s[y.currentSlide]).find("img:first")}
if(u.controlNav){
	b(".nivo-controlNav a",r).removeClass("active");
	b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}
if(y.currentImage.attr("title")!=""){
	var z=y.currentImage.attr("title");
	if(z.substr(0,1)=="#"){
	z=b(z).html()}
if(b(".nivo-caption",r).css("display")=="block"){
	b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){
	b(this).html(z);
	b(this).fadeIn(u.animSpeed)}
)}
else{
	b(".nivo-caption p",r).html(z)}
b(".nivo-caption",r).fadeIn(u.animSpeed)}
else{
	b(".nivo-caption",r).fadeOut(u.animSpeed)}
var w=0;
	b(".nivo-slice",r).each(function(){
	var i=Math.round(r.width()/u.slices);
	b(this).css({
	height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"}
);
	w++}
);
	if(u.effect=="random"){
	var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");
	y.randAnim=A[Math.floor(Math.random()*(A.length+1))];
	if(y.randAnim==undefined){
	y.randAnim="fade"}
}
if(u.effect.indexOf(",")!=-1){
	var A=u.effect.split(",");
	y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}
y.running=true;
	if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){
	var t=0;
	var w=0;
	var C=b(".nivo-slice",r);
	if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){
	C=b(".nivo-slice",r)._reverse()}
C.each(function(){
	var i=b(this);
	i.css("top","0px");
	if(w==u.slices-1){
	setTimeout(function(){
	i.animate({
	height:"100%",opacity:"1.0"}
,u.animSpeed,"",function(){
	r.trigger("nivo:animFinished")}
)}
,(100+t))}
else{
	setTimeout(function(){
	i.animate({
	height:"100%",opacity:"1.0"}
,u.animSpeed)}
,(100+t))}
t+=50;
	w++}
)}
else{
	if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){
	var t=0;
	var w=0;
	var C=b(".nivo-slice",r);
	if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){
	C=b(".nivo-slice",r)._reverse()}
C.each(function(){
	var i=b(this);
	i.css("bottom","0px");
	if(w==u.slices-1){
	setTimeout(function(){
	i.animate({
	height:"100%",opacity:"1.0"}
,u.animSpeed,"",function(){
	r.trigger("nivo:animFinished")}
)}
,(100+t))}
else{
	setTimeout(function(){
	i.animate({
	height:"100%",opacity:"1.0"}
,u.animSpeed)}
,(100+t))}
t+=50;
	w++}
)}
else{
	if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){
	var t=0;
	var w=0;
	var B=0;
	var C=b(".nivo-slice",r);
	if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){
	C=b(".nivo-slice",r)._reverse()}
C.each(function(){
	var i=b(this);
	if(w==0){
	i.css("top","0px");
	w++}
else{
	i.css("bottom","0px");
	w=0}
if(B==u.slices-1){
	setTimeout(function(){
	i.animate({
	height:"100%",opacity:"1.0"}
,u.animSpeed,"",function(){
	r.trigger("nivo:animFinished")}
)}
,(100+t))}
else{
	setTimeout(function(){
	i.animate({
	height:"100%",opacity:"1.0"}
,u.animSpeed)}
,(100+t))}
t+=50;
	B++}
)}
else{
	if(u.effect=="fold"||y.randAnim=="fold"){
	var t=0;
	var w=0;
	b(".nivo-slice",r).each(function(){
	var i=b(this);
	var v=i.width();
	i.css({
	top:"0px",height:"100%",width:"0px"}
);
	if(w==u.slices-1){
	setTimeout(function(){
	i.animate({
	width:v,opacity:"1.0"}
,u.animSpeed,"",function(){
	r.trigger("nivo:animFinished")}
)}
,(100+t))}
else{
	setTimeout(function(){
	i.animate({
	width:v,opacity:"1.0"}
,u.animSpeed)}
,(100+t))}
t+=50;
	w++}
)}
else{
	if(u.effect=="fade"||y.randAnim=="fade"){
	var w=0;
	b(".nivo-slice",r).each(function(){
	b(this).css("height","100%");
	if(w==u.slices-1){
	b(this).animate({
	opacity:"1.0"}
,(u.animSpeed*2),"",function(){
	r.trigger("nivo:animFinished")}
)}
else{
	b(this).animate({
	opacity:"1.0"}
,(u.animSpeed*2))}
w++}
)}
}
}
}
}
}
;
	var h=function(i){
	if(this.console&&typeof console.log!="undefined"){
	console.log(i)}
}
;
	this.stop=function(){
	if(!b(j).data("nivo:vars").stop){
	b(j).data("nivo:vars").stop=true;
	h("Stop Slider")}
}
;
	this.start=function(){
	if(b(j).data("nivo:vars").stop){
	b(j).data("nivo:vars").stop=false;
	h("Start Slider")}
}
;
	g.afterLoad.call(this)}
;
	b.fn.nivoSlider=function(c){
	return this.each(function(){
	var d=b(this);
	if(d.data("nivoslider")){
	return}
var e=new a(this,c);
	d.data("nivoslider",e)}
)}
;
	b.fn.nivoSlider.defaults={
	effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){
}
,afterChange:function(){
}
,slideshowEnd:function(){
}
,lastSlide:function(){
}
,afterLoad:function(){
}
}
;
	b.fn._reverse=[].reverse}
)(jQuery);

CSS代码(style.css):

/*=================================*/
/* Nivo Slider Demo/* November 2010/* By:Gilbert Pellegrom/* http://dev7studios.com/*=================================*/
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body{line-height:1;color:black;background:white;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
/* HTML5 tags */
header,section,footer,aside,nav,article,figure{display:block;}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body{font:14px/1.6 Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;color:#2d3536;background:#e8e0c0 url(../images/background.png) repeat;text-shadow:0 1px 0 #fff;}
a,a:visited{color:#2d3536;text-decoration:none;border-bottom:1px dotted #826a4d;}
a:hover,a:active{color:#9e805c;text-decoration:none;}
#dev7link{position:absolute;top:0;left:50px;background:url(../images/dev7logo.png) no-repeat;width:60px;height:67px;border:0;display:block;text-indent:-9999px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper{background:url(../images/slider.png) no-repeat;width:998px;height:392px;margin:0 auto;padding-top:74px;margin-top:50px;}
#slider{position:relative;width:618px;height:246px;margin-left:190px;background:url(../images/loading.gif) no-repeat 50% 50%;}
#slider img{position:absolute;top:0px;left:0px;display:none;}
#slider a{border:0;display:block;}
.nivo-controlNav{position:absolute;left:260px;bottom:-42px;}
.nivo-controlNav a{display:block;width:22px;height:22px;background:url(../images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active{background-position:0 -22px;}
.nivo-directionNav a{display:block;width:30px;height:30px;background:url(../images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
a.nivo-nextNav{background-position:-30px 0;right:15px;}
a.nivo-prevNav{left:15px;}
.nivo-caption{text-shadow:none;font-family:Helvetica,Arial,sans-serif;}
.nivo-caption a{color:#efe9d1;text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear{clear:both;}

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