jquery+html实现翻页相册功能实例（推荐）

今天心情大好，再发一篇最进前端实现的相册模仿功能。

这个相册是在一个网站的案例展示页面上实现的，没单独写出来，没时间，重用性也很差，以后有时间了再单独提取出来，

写这个玩意前，我在网上找了一些案例，但是一看代码都比较傻眼，固不想去研究，所以自己写了.....

下面是实现这个功能的截图

/*------------------------点击后将相册需要加载的这个项目的所有图片展示到一个弹出层中（小图片)---------------------------------*/   $(function () {   $(".transparentp").click(function (e) {       var el = e.srcElement || e.target;     var transparentBackViewArray = $(".transparentp");    var AppTitleArray = $(".appDetialTitleClass");      for (var i = 0; i < transparentBackViewArray.length; i++) {     var focusTransparentBackView = transparentBackViewArray[i];     if (el == focusTransparentBackView) {      var pointTitle = AppTitleArray[i];//根据title去查询需要加载的说明图片       //transParentLawyer全屏幕遮蔽层      $("#masterp").after('
 
')      /* .transParentLawyer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;}*/        var addPxWidth = document.documentElement.clientWidth;      var addPxHeight = document.documentElement.clientHeight;       var alertBackpWidth = 555;      var alertBackpHeight = 525;       var alertBackStyleMarginLeft = (addPxWidth - alertBackpWidth) / 2;      var alertBackStyleMarginTop = (addPxHeight - alertBackpHeight) / 2;        var createLeft = alertBackStyleMarginLeft.toString() + 'px';      var createTop = alertBackStyleMarginTop.toString() + 'px';      var ProjectName = "捉大毛APP";      var combindTable = "
" + ProjectName + "
 
')       $(".appProjectPrevious").click(function (e) {//上一页       var imageArray = $(".showPorjectAppImg");      var el = e.srcElement || e.target;      var imagePath;      if (currentAlbumIndex > 0)      {       currentAlbumIndex = currentAlbumIndex + 1;      }      else {       currentAlbumIndex = imageArray.length - 1;      }      var obj = imageArray[currentAlbumIndex];      imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";//obj.src;            // $("#rollAblumImage").attr("src", imagePath);      $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () {       $("#rollAblumImage").attr("src", imagePath);       $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow");        //var image = $("#rollAblumImage");             // resizeimg(image, 320, 560);      });     })     $(".appProjectNext").click(function (e)     {     // alert("adad");      var imageArray = $(".showPorjectAppImg");      var el = e.srcElement || e.target;      var imagePath;      if (currentAlbumIndex < imageArray.length-1) {       currentAlbumIndex = currentAlbumIndex + 1;      }      else {       currentAlbumIndex = 0;      }      var obj = imageArray[currentAlbumIndex];      imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";       $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () {       $("#rollAblumImage").attr("src", imagePath);       $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow");      });     // $("#rollAblumImage").attr("src", imagePath);     })     })     });   });

以上就是jquery+html实现翻页相册功能实例（推荐）的详细内容，更多请关注 第一PHP社区 其它相关文章！