jQuery淡入淡出渐变切换焦点图代码

首页

当前位置：首页 > 网页特效 > 焦点图 >

jQuery淡入淡出渐变切换焦点图代码

时间：2016-05-21 12:45 来源：互联网作者：12图资源库浏览：次收藏挑错推荐打印

效果预览本地下载

下载说明：

1、如有不能下载的情况，请点击下载报错告知我们，谢谢！

2、同时下载多个文件，容易出现无法解压情况。请下载完成一个文件后再下载另一个。

3、节约资源，有部分PSD文件已关闭全部图层，下载后使用Photoshop打开图层即可。

4、本站的所有资源除特殊说明（均来自互联网）仅供学习与参考，请勿用于商业用途。

jQuery淡入淡出渐变切换焦点图代码，带索引小按钮，支持自动轮播，淡入淡出过渡效果，代码很少，不依赖其他插件，兼容所有浏览器！

							jQuery(function($){
						
							    varindex=0;
						
							    varmaximg=5;
						
							    //滑动导航改变内容  
						
							    $("#myjQueryNavli").hover(function(){
						
							        if(MyTime){
						
							            clearInterval(MyTime);
						
							        }
						
							        index=$("#myjQueryNavli").index(this);
						
							        MyTime=setTimeout(function(){
						
							        ShowjQueryFlash(index);
						
							        $('#myjQueryContent').stop();
						
							        },400);
						
							    },function(){
						
							        clearInterval(MyTime);
						
							        MyTime=setInterval(function(){
						
							        ShowjQueryFlash(index);
						
							        index++;
						
							        if(index==maximg){index=0;}
						
							        },3000);
						
							    });
						
							    //滑入停止动画，滑出开始动画.
						
							    $('#myjQueryContent').hover(function(){
						
							            if(MyTime){
						
							                clearInterval(MyTime);
						
							            }
						
							    },function(){
						
							                MyTime=setInterval(function(){
						
							                ShowjQueryFlash(index);
						
							                index++;
						
							                if(index==maximg){index=0;}
						
							            },3000);
						
							    });
						
							    //自动播放
						
							    varMyTime=setInterval(function(){
						
							        ShowjQueryFlash(index);
						
							        index++;
						
							        if(index==maximg){index=0;}
						
							    },3000);
						
							});
						
							functionShowjQueryFlash(i){
						
							    $("#myjQueryContentdiv").eq(i).animate({opacity:1},1000).css({"z-index":"1"}).siblings().animate({opacity:0},1000).css({"z-index":"0"});
						
							    $("#myjQueryNavli").eq(i).addClass("current").siblings().removeClass("current");
						
							}