宣传册图片播放jquery插件

来源:https://www.sucaihuo.com/js/1822.html 2017-04-25 19:07浏览(316) 收藏

此作品是一款宣传册图片播放jquery插件,实现了jquery智能炫酷的翻页相册,巧妙的运用Html的文档属性,大大减少jQ 的代码量,实现了智能炫酷的翻页相册、兼容性很好,很好的满足企业或个人的展示。。。。
宣传册图片播放jquery插件
分类:图片代码 > 图片轮播 难易:
查看演示 下载资源 下载积分: 20 积分

首选引用文件

<script src="jquery.js"></script>

在html内有//设置动画的运动时间,//设置定时器的间隔时间//设置张数计数器//设置判断点击了哪一个按钮//设置当前动画计数器

$(document).ready(function(e) {	
    var   ImgBox = $(".img-box"),
	      ImgSpan =ImgBox.find("span"),
	      ImgDiv = $(".img-box div"),
		  BtnNext = $("#btn-next"),
		  BtnPrve = $("#btn-prev"),
		  Btn = $(".btn"),		  
		  speed = 600,//设置动画的运动时间
		  Tick = 8000+speed,//设置定时器的间隔时间
		  n=1,//设置张数计数器
		  whichCl ,//设置判断点击了哪一个按钮 
		  z=0;//设置当前动画计数器
	  $(".bg").css({ opacity:0.1});
	  $(".bglogo").css({opacity:0.2});
	  $(".zhezhu").css({opacity:0.8});	

		  ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张");
		  function Slider(){//动画函数
			  if(whichCl=="nextCl"){
				      n++; if(n>ImgDiv.length){n=1;}
			          z--; if(z<0){z=ImgDiv.length-1;}
				 }
			  if(whichCl=="prevCl"){ n--; if(n<1){n=ImgDiv.length;}}  
			  ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张");
			  ImgDiv.eq(z).stop().animate(
			       {right:-(1.1*ImgDiv.width())}, speed,
			        function(){
			                     if(whichCl=="nextCl"){ImgSpan.after($(this));}
			                     if(whichCl=="prevCl"){ImgBox.append($(this));}
			                     $(this).stop().animate({right:0}, speed);
			                   }) 
			  if(whichCl=="prevCl"){ z++; if(z>ImgDiv.length-1){z=0;}} 
			  ImgBox.stop().animate({right:100},speed,function(){$(this).stop().animate({right:0}, speed)})
			  ImgSpan.stop().animate({left:100},speed,function(){$(this).stop().animate({left:0},speed)})
			  }   
		  BtnNext.click(next_cl = function(){whichCl="nextCl";Slider();});//向右点击事件启动动画函数
		  BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左点击事件启动动画函数	
		  ImgBox.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(zd,Tick);})//当鼠标进入点击按钮时对定时器进行控制		
		  function zd(){
			   if($(".zidong").is(":checked"))
			   {
				next_cl()   
				   }
			  }
		 
		  autoTime = setInterval(zd,Tick);	//模拟向右点击事件定时启动动画函数,也可以使用  prev_cl向左启动动画函数 
           $(".zhezhu").slideUp(Tick*2);
});
标签: 图片播放
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2