jQuery插件实现大图全屏图片相册_jquery-js教程-PHP中文网

jQuery插件实现大图全屏图片相册_jquery

WBOY

发布： 2016-05-16 16:09:42

原创

1188 人浏览过

大图全屏图片相册jQuery插件，支持左右按钮切换以及点击大图自动切换图片，基于jQuery插件jQuery.album.js，插件支持参数自定义功能，viewMode：0没有缩略图 1有缩略图 2缩略图。全屏幕。可以对图片进行左右转，具体的参数大家可以查看jQuery.album.js文件，总之效果很不错，喜欢的朋友可学习下

复制代码代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

非常不错的JS相册特效代码下载

<li> 
     <div> <img alt="JS相册特效" src="images/tiny/20140121161108.JPG" onload="scaleImage(this,99,75)"></div> 
      
      images/20140121161108.JPG 
      
      </li> 
            <li> 
     <div> <img src="images/tiny/20140121161130.jpg" onload="scaleImage(this,99,75)" alt=""></div> 
      
      images/20140121161130.jpg 
      
      </li> 
            <li> 
     <div> <img src="images/tiny/20140121161152.jpg" onload="scaleImage(this,99,75)" alt=""></div> 
      
      images/20140121161152.jpg 
      
      </li> 
            <li> 
     <div> <img src="images/tiny/20140121161231.JPG" onload="scaleImage(this,99,75)" alt=""></div> 
      
      images/20140121161231.JPG 
      
      </li> 
            <li> 
     <div> <img alt="JS相册特效" src="images/tiny/20140126134637.jpg" onload="scaleImage(this,99,75)"></div> 
      
      images/20140126134637.jpg 
      
      </li> 
            <li> 
     <div> <img alt="JS相册特效" src="images/tiny/20140121181958.jpg" onload="scaleImage(this,99,75)"></div> 
      
      images/20140121181958.jpg 
      
      </li> 
            <li> 
     <div> <img alt="JS相册特效" src="images/tiny/20140121182023.jpg" onload="scaleImage(this,99,75)"></div> 
      
      images/20140121182023.jpg 
      
      </li> 
            <li> 
     <div> <img alt="JS相册特效" src="images/tiny/20140121182118.jpg" onload="scaleImage(this,99,75)"></div> 
      
      images/20140121182118.jpg 
      
      </li>

<脚本类型=“text/javascript”>
函数scaleImage(o, w, h) {
 var img = new Image();
 img.src = o.src;
 if (img.width > 0 && img.height > 0) {
 if (img.width / img.height >= w / h) {
 if (img.width > w) {
 o.width = w;
 o.height = (img.height * w) / img.width;
 } 其他 {
 o.width = img.width;
 o.height = img.height;
 }
 // o.alt = img.width "x" img.height;
 } 其他 {
 if (img.height > h) {
 o.高度 = h;
 o.width = (img.width * h) / img.height;
 } 其他 {
 o.width = img.width;
 o.height = img.height;
 }
 //o.alt = img.width "x" img.height;
 }
 }
}

以上就是分享文章给大家的实例代码了，希望对大家学习jQuery能够有所帮助。