码迷,mamicode.com
首页 > 其他好文 > 详细

焦点图切换插件代码

时间:2015-06-02 15:00:01      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:

js插件代码如下:

$.fn.extend({
	//焦点图	
	INA_focus:function(opt,callback){
		if(!opt){}
		var _this=$(this),nr=_this.find(opt.qhys||"img"),controls=opt.controls||"ina_hdp",auto=opt.auto||"true",on=opt.on||"ina_dq",ina_click=opt.click||"click",time=opt.time||"5000",display=opt.display||"block",prevnext=opt.prevnext||"false";
		if(nr.length>1){
			nr.hide().eq(0).show();
			_this.append("<div class=‘"+controls+"‘></div>");
			for(var i=1;i<nr.length+1;i++){
				if(i==1){_this.find("."+controls).append("<a href=‘javascript:void(0)‘ target=‘_self‘ class=‘"+on+"‘>"+i+"</a>")}
				else{_this.find("."+controls).append("<a href=‘javascript:void(0)‘ target=‘_self‘>"+i+"</a>")}
				}
			function qh(i){
				if(auto=="true"){clearInterval(timer);}
				if(display=="block"){nr.hide().eq(i).show();if(auto=="true"){timer=window.setInterval(function(){
					i++;
					if(i>=nr.length){i=0}
					qh(i)
					},time)}}
				else{
					var width=nr.eq(0).outerWidth();
			        for(var j=0;j<nr.length;j++){
						if(nr.eq(j).is(":visible")){
							if(i>j){
								nr.eq(i).show().css({left:width}).stop().animate({left:0})
								nr.eq(j).css({left:0}).stop().animate({left:-width},function(){nr.eq(j).hide();if(auto=="true"){timer=window.setInterval(function(){
					              i++;
					              if(i>=nr.length){i=0}
					              qh(i)
					               },time)}})
								   break;
								}
							else if(i<j){
								nr.eq(i).show().css({left:-width}).stop().animate({left:0})
								nr.eq(j).css({left:0}).stop().animate({left:width},function(){nr.eq(j).hide();if(auto=="true"){timer=window.setInterval(function(){
					              i++;
					              if(i>=nr.length){i=0}
					              qh(i)
					              },time)}})
								  break;
								}
							
							}
						}
					}
				_this.find("."+controls).find("a").removeClass(on).eq(i).addClass(on);
				}
			if(prevnext=="true"){
				_this.append("<div class=‘ina_pre‘><</div><div class=‘ina_next‘>></div>");
				var pre=_this.find(".ina_pre"),next=_this.find(".ina_next");
				pre.click(function(){
					if(nr.is(":animated")){return false;}
					for(var i=0;i<nr.length;i++){
						if(nr.eq(i).is(":visible")){
							i--;
							if(i<0){i=nr.length-1}
							qh(i)
							break;
							}
						}
					})
				next.click(function(){
					if(nr.is(":animated")){return false;}
					for(var i=0;i<nr.length;i++){
						if(nr.eq(i).is(":visible")){
							i++;
							if(i>=nr.length){i=0}
							qh(i)
							break;
							}
						}
					})
				}
			if(auto=="true"){
				_this.find("."+controls).find("a").on(ina_click,function(){
				if(nr.is(":animated")){return false;}	
				clearInterval(timer);
				var n=$(this).index();
				qh(n);
				})
				var timer,m=0;
				timer=window.setInterval(function(){
					m++;
					if(m>=nr.length){m=0}
					qh(m)
					},time)
				}
			else if(auto=="false"){
				_this.find("."+controls).find("a").on(ina_click,function(){
				qh($(this).index())
				})
				}
			}
		}
	
	})

 调用方法如下:

$(".ina_focus").INA_focus({
	qhys:"img", //切换元素,默认为img
        controls:"ina_hdp", //滑动控制按钮div的class,默认为ina_hdp
        auto:"", //是否自动切换true||false,默认为true
        on:"ina_dq",  //当前选中按钮class,默认为ina_dq
        click:"mouseover", //滑动按钮切换方式,默认为click
        time:"3000", //自动切换间隔时间,默认5秒
        display:"left", //显示方式left||block,向左滚动,默认为block
        prevnext:"false" //是否显示切换箭头 true||false 默认false	
})

 

焦点图切换插件代码

标签:

原文地址:http://www.cnblogs.com/caiming/p/4546281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!