焦点图切换插件代码

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
})
时间: 2024-11-06 23:16:21

焦点图切换插件代码的相关文章

基于jQuery全屏焦点图切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed:

自制jQuery焦点图切换简易插件

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s

vue组件开发练习--焦点图切换

1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换组件.这个项目是我用于vue组件练习的一个项目,当然了,代码也会提交到github(ec-slider),也会维护.我也想我开发的东西好用一点!现在,就是建议有需要的伙伴,可以来玩下这个项目,当练习的作用!另外,如果大家有什么建议,欢迎指点! 建议1.下面的步骤,最好在自己本地上跑起来,根据文章的步

8款耀眼的jQuery/HTML5焦点图滑块插件

1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片.焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用. 在线演示 源码下载 2.HTML5/CSS3淡入淡出滑块焦点图 非常清新 我们已经分享过几款简单的CSS3/jQuery焦点图插件,今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利

一款JS感应鼠标横向左右切换的焦点图切换效果

<!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-

10款华丽最新jQuery焦点图动画插件

1.jQuery带对比功能的焦点图插件 我们在这里已经分享过很多炫酷的jQuery焦点图插件,大部分焦点图插件都比较实用.今天要分享的这款有几个特点:第一是焦点图带有缩略图预览功能,第二是焦点图中的图片带有和原图进行对比的功能,并且这款jQuery焦点图还支持定时图片切换,非常实用. 在线演示一 在线演示二 源码下载 2.Devrama Slider - 支持任意 HTML 的内容滑块 Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持

收藏一个漂亮的Flash焦点图切换

网上闲逛的时候发现一个Flash焦点图效果,跟喜欢,然后就下载回来,收集在这里,以便以后方便取用.这个Flash使用方法也是相当简单的,如果你喜欢,也可以从这里查看源代码下载. 效果演示泌阳县马奇建材 Flash 焦点图效果 使用方法 在页面上加入这段HTML代码即可. view source print? 1 <embed width="522" height="245" flashvars="image=../images/1_min.jpg|

简单的js焦点图切换效果

<!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-

jQuery banner切换插件

今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 2.Html部分 <!--Focus Html--> <div class="s_focus"> <ul class="f_img"> &l