jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

前端之家收集整理的这篇文章主要介绍了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果分享给大家供大家参考,具体如下:

插件文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。

插件旨在实现目前较为流行的点击放大图片并左右点击切换图片效果,您可以根据自己的实际需求来设置是否添加左右切换图片效果。整体代码如下:

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档
  • 插件jquery.LightBox.js代码

    Box 1.0 *dependence jquery-1.7.1.js */ ;(function(a){ a.fn.LightBox = function(options){ var defaults = { controls : true //上一张、下一张按钮是否显示,默认是显示true } var opts = a.extend(defaults,options); var lb_wrap = '
    Box_bg">
    Box">
    '; a("body").append(lb_wrap); //controls if(opts.controls){ a(".lightBox").append('

    '); } function imgobj(obj1,obj2){ //imgObj.height是通过img对象获取图片的实际高度 var imgObj = new Image(); imgObj.src = obj1.attr("src"); var margintop = 0 - (imgObj.height)/2; obj2.css("margin-top",margintop); } this.each(function(){ var obj = a(this); var numpic = obj.find("li").length; var num = 0; //点击赋值并显示 obj.find("img").click(function(){ var src = a(this).attr("src"); a(".lg_img").attr("src",src); imgobj(a(".lg_img"),a(".lightBox")); a(".lb_wrap").fadeIn(); a(".lg_img").fadeIn(); a(".prev").fadeIn().siblings(".next").fadeIn(); num = a(this).parent().index(); //获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务 }); //上一张 a(".prev").click(function(){ if(num == 0){ num = numpic; } var src = obj.find("li").eq(num-1).find("img").attr("src"); a(".lg_img").attr("src",a(".lightBox")); num--; }); //下一张 a(".next").click(function(){ if(num == numpic-1){ num = -1; } var src = obj.find("li").eq(num+1).find("img").attr("src"); a(".lg_img").attr("src",a(".lightBox")); num++; }); //点击除了上一张、下一张之外的其他地方隐藏 a(".lb_wrap").click(function(e){ var e = e || window.event; var elem = e.target || e.srcElement; while(elem){ if (elem.className && elem.className.indexOf('prev')>-1) { return; } if(elem.className && elem.className.indexOf('next')>-1){ return; } elem = elem.parentNode; } a(this).find("img").attr("src","loading.gif").hide(); //隐藏后,再将默认的图片赋给lightBox图片的src a(this).find(".prev").hide().siblings(".next").hide(); a(this).fadeOut(); }); }) } })(jQuery);

    完整实例代码点击此处

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《

    希望本文所述对大家jQuery程序设计有所帮助。

    原文链接:https://www.f2er.com/jquery/49960.html

    猜你在找的jQuery相关文章