【原创】简洁的JQ幻灯片插件

评测系统说明页缺少一个幻灯片切换插件，网络上各种开源强大的JQ幻灯片插件。但功能并不需要那么多，而且那些插件自己进行修改的参数很有限也很难控制。如果直接用这些插件进行再次开放，不仅时间慢，而且多余的功能必将影响系统的性能，所以就动手自己写了一个幻灯片插件。先贴上代码，最后再加上整合后的文件附件。

 

JQ插件源码：

// JavaScript Document
(function($){
  $.fn.jq_slide=function(options){
	  var defaults={
		  width:"100%",
		  height:"100px",
		  intertime:"3",
		  slideclass:".slide_list"
	  };
	  var opts=$.extend(defaults,options);
	  var vlen=$(opts.slideclass).length;
	  $(this).css({width:opts.width,height:opts.height});
	  $(this).find(opts.slideclass).css("height",opts.height);
	  
	  //初始构建插件元素
	  var slide_num_str='';
	  for(i=0;i<vlen;i++){
		  slide_num_str+='<span>'+(i+1)+'</span>';
	  }
	  $(this).after('<div class="slide_number"></div>');
	  var slideNum=$(this).next(".slide_number");
	  slideNum.html(slide_num_str);
	  var slideNumSpan=slideNum.find("span");
	  
	  //显隐自动切换
	  var i=1;
	  function slide(k){
		  if(k){
			 i=k;
		  }else{
			slideNumSpan.eq(0).addClass("span_hover");  
		  }
          
		  slideInter=setInterval(function(){
			  if(i>vlen-1){
				  i=0;
			  }
			  slideSwitch(i);
			  i++;

	      },opts.intertime*1000);
	  }
	  
	  //转换显隐
	  function slideSwitch(j){
		  $(opts.slideclass).hide();
		  $(opts.slideclass).eq(j).fadeIn();
		  slideNumSpan.removeClass("span_hover");
		  slideNumSpan.eq(j).addClass("span_hover");
	  }
	  
      //Num click事件
	  slideNumSpan.click(function(){
		 var numIndex=slideNumSpan.index($(this));
		 clearInterval(slideInter);
         slideSwitch(numIndex);
		 slide(numIndex+1); 
	 })
	 
	 //初始执行
	 slide();
  }
})(jQuery);



	/*
		1、各初始化参数已经在注释中指明
		2、使用插件时，指定外部BOX和BOX内部需要循环切换的内容的Class即可;		   
	*/

$(function(){
	
	$(".slide_box").jq_slide({
		slideclass:".slide_list", //需要幻灯片切换的内容class
		intertime:"2", //切换时间(s)
		width:"80%", //box宽度
		height:"395px" //box高度
	});
	
})

使用方法及各参数在最后的注释中已经解释说明了。使用方法很简单，直接实例化插件就可以了。

HTML文件源码：

        <!--Slide Start-->
        <div class="slide_box">
            <div class="slide_list"><img src="1.png" width="500" height="400" /></div>
            <div class="slide_list"><img src="2.png" width="500" height="400" /></div>
            <div class="slide_list"><img src="3.png" width="500" height="400" /></div>
            <div class="slide_list">
		         <div class="start_box">
		           <div class="guidance_box">
		              <ul>
		              	<li><span>访谈提纲管理</span>访谈提纲是您使用访谈法收集信息时必备的工具。</li>
		                <li><span>访谈提纲管理</span>访谈提纲是您使用访谈法收集信息时必备的工具。</li>
		                <li><span>访谈提纲管理</span>访谈提纲是您使用访谈法收集信息时必备的工具。</li>
		              </ul>
		           
		           </div>  
		        </div>                  
            </div>       
        </div>
        <!--Slide End-->

该插件支持循环HTML 的BOX。CSS文件可以在附件中查看。

 

【附件】Jq_slide.zip