js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS广告代码 > JS幻灯片

jquery banner插件实现全屏图片放大缩小切换轮播特效代码

发布时间:2016-03-07 19:57:32    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery banner插件实现全屏图片放大缩小切换轮播特效代码
(function ($) {
   $.fn.swBanner=function(options){
     var defaults={
	     animateTime:300,
		 delayTime:5000
	 }
   var setting=$.extend({},defaults,options);
   
   return this.each(function(){
      $obj=$(this);
	  var o=setting.animateTime;
	  var d=setting.delayTime;
	  var $oban=$obj.find(".banList li");
	  var _len=$oban.length;
	  var $nav=$obj.find(".fomW a");
	  var _index=0;
	  var timer;
	  //图片轮换
	  function showImg(n){
	     $oban.eq(n).addClass("active").siblings().removeClass("active");
		 $nav.eq(n).addClass("current").siblings().removeClass("current");
	  }
	  //自动播放
	  function player(){
	    timer=setInterval(function(){
		   var _index=$obj.find(".fomW").find("a.current").index();
		   showImg((_index+1)%_len);
		},d)
	  }
	  //
	  $nav.click(function(){
	     if(!($oban.is(":animated"))){
	     _index=$(this).index();
		 showImg(_index);
		 }
	  });
	  //
	  $oban.hover(function(){
	    clearInterval(timer);
	  
	  },function(){
	    player();
	  
	  });
	   player();
   });
   
   }
})(jQuery);

调用方法:

$(function() {
	$(".banner").swBanner()
});



jquery特效 图片轮播 图片切换 全屏

jQuery特效圣诞下雪花_js特效圣诞雪花特效代码

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿微运5.0网站全屏图片轮播特效

jquery仿华谊兄弟首页3D图片轮播特效

jquery实现选项卡形式,四屏焦点图片轮播特效,带控制的选项卡轮播

jquery 3D图片轮播效果

jquery仿hao123带新闻标题图片轮播滚动特效代码