jQuery圆环交叉重叠焦点图轮播滚动切换特效代码

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

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

以下是 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=gb2312" />
    <title>jQuery圆环交叉重叠焦点图</title>
    <link href="css/style1.css" rel="stylesheet" type="text/css" />
    <link href="js/threeCircle/threeCircle.green.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.timers.min.js" type="text/javascript"></script>
    <!--[if lt IE 10]>
    <script src="js/PIE.js" type="text/javascript"></script>
    <![endif]-->
    <script src="js/threeCircle/jquery.threeCircle.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("#circle-main").threeCircle();
        });
    </script>
</head>
<body>
    <div class="top_sh">
        <br /><br /><br /><br /><br />
        <div class="circles-container">
            <a href="#" class="left_arrow"></a>
            <a href="#" class="right_arrow"></a>
            <div id="circle-main"> </div>
            <div class="circles-images">
                <a href="#1"><img src="images/hyacinths.jpg" alt="Small genus of bulbous plants" title="Hyacinths" /></a>
                <a href="#2"><img src="images/lilies.jpg" alt="Flowering plants growing from bulbs" title="Lilies" /></a>
                <a href="#3"><img src="images/tulips.jpg" alt="The tulip is a bulbous plant" title="Tulips" /></a>
                <a href="#3"><img src="images/roses.jpg" alt="A rose is a woody perennial" title="Roses" /></a>
            </div>
        </div>

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

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

jQuery.fn.extend({
	everyTime:function(interval,label,fn,times,belay){
	return this.each(function(){
	jQuery.timer.add(this,interval,label,fn,times,belay)}
)}
,oneTime:function(interval,label,fn){
	return this.each(function(){
	jQuery.timer.add(this,interval,label,fn,1)}
)}
,stopTime:function(label,fn){
	return this.each(function(){
	jQuery.timer.remove(this,label,fn)}
)}
}
);
	jQuery.extend({
	timer:{
	guid:1,global:{
}
,regex:/^([0-9]+)\s*(.*s)?$/,powers:{
	"ms":1,"cs":10,"ds":100,"s":1E3,"das":1E4,"hs":1E5,"ks":1E6}
,timeParse:function(value){
	if(value==undefined||value==null)return null;
	var result=this.regex.exec(jQuery.trim(value.toString()));
	if(result[2]){
	var num=parseInt(result[1],10);
	var mult=this.powers[result[2]]||1;
	return num*mult}
else return value}
,add:function(element,interval,label,fn,times,belay){
	var counter=0;
	if(jQuery.isFunction(label)){
	if(!times)times=fn;
	fn=label;
	label=interval}
interval=jQuery.timer.timeParse(interval);
	if(typeof interval!="number"||isNaN(interval)||interval<=0)return;
	if(times&&times.constructor!=Number){
	belay=!!times;
	times=0}
times=times||0;
	belay=belay||false;
	if(!element.$timers)element.$timers={
}
;
	if(!element.$timers[label])element.$timers[label]={
}
;
	fn.$timerID=fn.$timerID||this.guid++;
	var handler=function(){
	if(belay&&this.inProgress)return;
	this.inProgress=true;
	if(++counter>times&&times!==0||fn.call(element,counter)===false)jQuery.timer.remove(element,label,fn);
	this.inProgress=false}
;
	handler.$timerID=fn.$timerID;
	if(!element.$timers[label][fn.$timerID])element.$timers[label][fn.$timerID]=window.setInterval(handler,interval);
	if(!this.global[label])this.global[label]=[];
	this.global[label].push(element)}
,remove:function(element,label,fn){
	var timers=element.$timers,ret;
	if(timers){
	if(!label)for(label in timers)this.remove(element,label,fn);
	else if(timers[label]){
	if(fn){
	if(fn.$timerID){
	window.clearInterval(timers[label][fn.$timerID]);
	delete timers[label][fn.$timerID]}
}
else for(var fn in timers[label]){
	window.clearInterval(timers[label][fn]);
	delete timers[label][fn]}
for(ret in timers[label])break;
	if(!ret){
	ret=null;
	delete timers[label]}
}
for(ret in timers)break;
	if(!ret)element.$timers=null}
}
}
}
);
	if(jQuery.browser.msie)jQuery(window).one("unload",function(){
	var global=jQuery.timer.global;
	for(var label in global){
	var els=global[label],i=els.length;
	while(--i)jQuery.timer.remove(els[i],label)}
}
);

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