jQuery炫酷翻页图片相册

最新推荐文章于 2018-06-22 16:51:12 发布

xlhu618

最新推荐文章于 2018-06-22 16:51:12 发布

阅读量779

点赞数

分类专栏： html 文章标签： html js

本文链接：https://blog.csdn.net/xlhu618/article/details/20691481

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用jquery实现的图片前后切换特效，类似翻页的效果，在此要注意，选用jquery-1.9.1.min.js以上版本才可以，兼容的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

<!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>
<title>jQuery炫酷翻页图片相册</title>
<style>
body{ overflow:hidden;}
a{ text-decoration:none; color:#FFF;}
a img{ border:none;}
.img-box,.img-box div,.img-box div img{ width:800px; height:450px; }
.img-box{ margin:auto;position:relative; }
.img-box span{ position:absolute;bottom:0;left:295px; width:201px;font-size:12px; line-height:25px;color:#FFF; z-index:100; background:#555; text-align:center;}
.img-box div{ position: absolute;cursor: all-scroll }
.btn-box{ width:800px; height:40px;margin: auto; cursor:pointer; background:#222; }
.btn-margin{ width:210px; height:40px; margin: auto;}
.btn{ width:100px; height:38px; line-height:38px; margin:1px 1px 0 0;  text-align:center; float:left;color:#FFF;  background:#555; }
</style>
<script src="/ajaxjs/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(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 = 4000+speed,//设置定时器的间隔时间
  n=1,//设置张数计数器
  whichCl ,//设置判断点击了哪一个按钮
  z=0;//设置当前动画计数器
  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:395},speed,function(){$(this).stop().animate({left:295},speed)})
	  }
  BtnNext.click(next_cl = function(){whichCl="nextCl";Slider();});//向右点击事件启动动画函数
  BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左点击事件启动动画函数
  Btn.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(next_cl,Tick);})//当鼠标进入点击按钮时对定时器进行控制
  autoTime = setInterval(next_cl,Tick);	//模拟向右点击事件定时启动动画函数，也可以使用  prev_cl向左启动动画函数
});
</script>
</head>
<body>
<div class="img-box">
         <span></span>
          <div><a href="/"><img src="/jscss/demoimg/wall1.jpg" /></a></div>
          <div><a href="/"><img src="/jscss/demoimg/wall2.jpg" /></a></div>
          <div><a href="/"><img src="/jscss/demoimg/wall3.jpg" /></a></div>
          <div><a href="/"><img src="/jscss/demoimg/wall4.jpg" /></a></div>
</div>
<div class="btn-box">
    <div class="btn-margin">
        <div class="btn" id="btn-prev">上一张</div>
        <div class="btn" id="btn-next">下一张</div>
    </div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

xlhu618

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery炫酷翻页图片相册

使用jquery实现的图片前后切换特效，类似翻页的效果，在此要注意，选用jquery-1.9.1.min.js以上版本才可以，兼容的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。jQuery炫酷翻页图片相册body{ overflow:hidden;}a{ text-decoration:none; color:#FFF;}
复制链接

扫一扫