showImg jquery插件图片展示 js

做了一款Jquery插件。常用图片展示的。

主要有图片滚动，无限循环，大图展示。

下面是JS代码：

//showImg
/*
*Author:Jin.DH
*Date:2012/2/29
**
使用方法：
示例：
$("#listDIV").showImg({v:6,b:"#bigPic",p:".listPre",n:".listNext",t:5000,auto:true,class:"current"});

参数介绍，参数是一个对象,属性如下：
v:显示数量(默认为5);
b:大图容器(默认为空);
p:控制往上滚动按钮(默认为空);
n:控制往下滚动按钮(默认为空);
t:播放间隔时间(默认3秒);
ul:滚动容器(默认是ul);
li:列表容器(默认是li),如果有大图请给li对象设置'link'属性保存大图路径;
auto:是否自动播放(默认为false);
fx:滚动方向(默认是"x")该值除了x其他值都将被认作'y'处理;
loop:是否循环滚动(默认为false)如果有大图的时候该值将被设置为false;
class:当前的class名字(当有大图的时候，当前小图的样式，默认为"current");

请注意，有大图的时候小图的当前样式请控制其宽度。例如在添加border的时候记得把宽度减去边框宽度，否则容易导致ul宽度不足。
**
*/
(function($) {
    $.fn.showImg = function(o) {
        return this.each(
        function() {
            new showImg(this, o);
        });
    };
    showImg = function(me, o) {
        var that = this;
        that.set = {
            v: 5,
            t: 3000,
            p: null,
            n: null,
            bp: null,
            bn: null,
            ul: "ul",
            li: "li",
            b: null,
            auto: false,
            fx: "x",
            loop: false,
            curClass:"current"
        };
        $.extend(that.set, o);
        that.me = $(me);
        that.auto
        that.loop = that.set["loop"];
        if (that.set["b"]) { //如果有大图则小图不能循环
            that.b = $(that.set["b"]);
            that.load_l = that.b.width()/2-8;
            that.load_t = that.b.height()/2-8;
            that.curClass = that.set["curClass"];
            that.loop = false;
        };
        that.ul = that.me.find(that.set["ul"]);
        that.li = that.ul.find(that.set["li"]);
        
        that.l = that.li.length;
        that.v = that.set["v"];
        that.auto = that.set["auto"] ? true: false;
        
        var i = that.l - 1;
        do {
            that.li.eq(i).attr("num", i);
            i--;
        } while ( i >= 0 );

        if (that.loop && that.v < that.l) {
            var copyLi = [];
            for (var n = 0; n < that.v; n++) {
                that.ul.append(that.li.eq(n).clone(true));
            };
            that.li = that.ul.find(that.set["li"]);
            that.l = that.li.length;
        };
        that.maxL = that.l - that.v;
        that.fx = that.set["fx"] == "x" ? true: false;
        
        that.c_s = 0;
        that.c = 0;
        
        if (that.fx) {
            that.w = that.li.outerWidth(true);
            that.ul.width(that.w * that.l);
            that.me.width(that.w * that.v);        
            that.me.height(that.li.outerHeight(true));
            that.ul.css({
                left: -that.c * that.w
            });            
        } else {
            that.w = that.li.outerHeight(true);
            that.ul.height(that.w * that.l);
            that.me.width(that.li.outerWidth(true));
            that.me.height(that.w * that.v);
            that.ul.css({
                top: -that.c * that.w
            });            
        };
    
        if (that.set["b"]) {
            that.li.bind("click",
            function() {                
                clearInterval(that.autoId);
                if ($(this).attr("num") == that.c_s) return;
                that.c_s = $(this).attr("num");
                that.showFn(1);
            });
        }
        if (that.v < that.l) {
            if (that.set["p"]) {
                that.p = $(that.set["p"]);
                that.p.bind("click",
                function() {
                    that.pFn(1);
                });
            };
            if (that.set["n"]) {
                that.n = $(that.set["n"]);
                that.n.bind("click",
                function() {
                    that.nFn(1);
                });
            };

        };

        $.extend(that, {
            pFn: function(test) {
                var that = this;
                if (that.loop) {
                    that.pFn = function(test) {
                        if (test && that.autoId) clearInterval(that.autoId);
                        if (that.c <= 0) {
                            if (that.fx) {
                                that.ul.css({
                                    left: -that.maxL * that.w
                                });
                            } else {
                                that.ul.css({
                                    top: -that.maxL * that.w
                                });
                            };
                            that.c = that.maxL;
                        }
                        that.c--;
                        that.move(test);
                    };
                } else {
                    if (that.set["b"]) {
                        
                        that.pFn = function(test) {
                            if (test && that.autoId) clearInterval(that.autoId);
                            if (that.c_s > 0 && that.c == 0) {
                                that.c_s--;
                                that.showFn();
                            } else {
                                that.c <= 0 ? that.c = that.maxL: that.c--;
                                that.c_s <= 0 ? that.c_s = that.l - 1 : that.c_s--;
                                that.showFn();
                                that.move(test);
                            };
                        };
                    } else {
                        that.pFn = function(test) {
                            if (test && that.autoId) clearInterval(that.autoId);
                            that.c > 0 ? that.c--:that.c = that.maxL;
                            that.move(test);
                        };
                    };

                };
                //方法重置以后默认执行遍
                that.pFn(test);
            },
            nFn: function(test) {
                var that = this;

                if (that.loop) {
                    that.nFn = function(test) {
                        if (test && that.autoId) clearInterval(that.autoId);
                        if (that.c >= that.maxL) {
                            if (that.fx) {
                                that.ul.css({
                                    left: 0
                                });
                            } else {
                                that.ul.css({
                                    top: 0
                                });
                            };
                            that.c = 0;
                        };
                        that.c++;
                        that.move(test);
                    };
                } else {
                    if (that.set["b"]) {
                        that.nFn = function(test) {
                            if (test && that.autoId) clearInterval(that.autoId);
                            if (that.c_s < that.l - 1 && that.c == that.maxL) {
                                that.c_s++;
                                that.showFn();
                            } else {
                                that.c >= that.maxL ? that.c = 0 : that.c++;
                                that.c_s >= that.l - 1 ? that.c_s = 0 : that.c_s++;
                                that.showFn();
                                that.move(test);
                            };
                        }
                    } else {
                        that.nFn = function(test) {
                            if (test && that.autoId) clearInterval(that.autoId);
                            that.c >= that.maxL ? that.c = 0 : that.c++;
                            that.move(test);

                        };
                    };

                }
                //方法重置以后默认执行遍
                that.nFn(test);
            },
            showFn: function(test) {
                var that = this;
                var src = that.li.eq(that.c_s).attr("link");
                that.b.html("<img src='http://preview.zcool.com.cn/upimg/allimg/070622/05043125.gif' style='width:16px;height:16px;margin-left:"+that.load_l+"px;margin-top:"+that.load_t+"px;float:left;display:inline;' />");
                that.c = that.c_s;
                if (that.c > that.maxL) {
                    that.c = that.maxL;
                };
                that.move();
                var img = new Image();
                img.style.display = "none";
                img.onload = function() {
                    that.b.html($(img));
                    $(img).fadeIn();
                };
                img.onerror = function(){
                     that.b.html("<p style='line-height:"+that.b.height()+"px;color:#f00;font-weight:bold;'>图片加载失败！</p>");
                };
                img.src = src;
                
                that.li.removeClass(that.curClass);
                that.li.eq(that.c_s).addClass(that.curClass);
                if (test && that.auto) {
                    that.autoId = setInterval(function() {
                        that.nFn();
                    },
                    that.set["t"]);
                };
                
                return false;
            },
            autoPlay: function() {
                var that = this;
                clearInterval(that.autoId);
                that.autoId = null;
                this.autoId = setInterval(function() {
                    that.nFn();
                },
                that.set["t"]);
            },
            move: function(test) {
                var that = this;
                that.ul.stop();
                var pos = that.c * that.w;
                if (that.fx) {
                    that.ul.animate({
                        left: -pos
                    },
                    function() {
                        if (test && that.auto) {
                            that.autoPlay();
                        }
                    });
                } else {
                    that.ul.animate({
                        top: -pos
                    },
                    function() {
                        if (test && that.auto) {
                            that.autoPlay();
                        }
                    });
                }
            }
        });
        if (that.set["b"]) {
            that.showFn();
        };
        if (that.auto) {
            that.autoPlay();
        };
    };
})(jQuery);

下面是html部分：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片展示[showImg插件] - JS路上</title>
<!--
*Author:Jin.DH
*Date:2012/2/29    
-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/imgDisplay.js"></script>
<body>
<div class="about">
  <p>//showImg</p>
  <p>/*</p>
  <p>*Author:Jin.DH</p>
  <p>*Date:2012/2/29</p>
  <p>**</p>
  <p>使用方法：</p>
  <p>示例：</p>
  <p><strong>$("#listDIV").showImg({v:6,b:"#bigPic",p:".listPre",n:".listNext",t:5000,auto:true,class:"current"});</strong></p>
  <p> 参数介绍，参数是一个对象,属性如下：</p>
  <p><strong>v:显示数量(默认为5);<br />
    b:大图容器(默认为空);<br />
    p:控制往上滚动按钮(默认为空)<br />
    ;
    n:控制往下滚动按钮(默认为空)<br />
    ;
    t:播放间隔时间(默认3秒);<br />
    ul:滚动容器(默认是ul);<br />
    li:列表容器(默认是li),如果有大图请给li对象设置'link'属性保存大图路径;<br />
    auto:是否自动播放(默认为false);<br />
    fx:滚动方向(默认是"x")该值除了x其他值都将被认作'y'处理;<br />
    loop:是否循环滚动(默认为false)如果有大图的时候该值将被设置为false;<br />
    class:当前的class名字(当有大图的时候，当前小图的样式，默认为"current");</strong><br />
  </p>
  <p> 请注意，有大图的时候小图的当前样式请控制其宽度。例如在添加border的时候记得把宽度减去边框宽度，否则容易导致ul宽度不足。
    **
    */</p>
</div>
<br />
<div class="box1">
    <p style="color:#f00;">这里测试图片比较大，所以加载比较慢...</p>
  <h2>展示大图，不自动播放(暂不支持小图循环),显示4张小图</h2>

  <div class="bBox">
    <input type="button" value="上一张" class="listPre lf" />
    <div id="bigPic" class="bigPic"></div>
    <input type="button" value="下一张" class="listNext" />
  </div>
  <div class="sBox">
    <input type="button" value="Pre" class="listPre lf" />
    <div class="listDIV lf" id="listDIV">
      <ul>
        <li link="http://deskcity.com/picture/image_url/84377/Concept_028012.jpg?13093707832"><img src="http://deskcity.com/picture/image_url/84377/Concept_028012-small.jpg?1309372803" /></li>
        <li link="http://deskcity.com/picture/image_url/84384/Concept_028019.jpg?1309370822"><img src="http://deskcity.com/picture/image_url/84384/Concept_028019-small.jpg?1309372805" /></li>
        <li link="http://deskcity.com/picture/image_url/84366/Concept_028001.jpg?1309370284"><img src="http://deskcity.com/picture/image_url/84366/Concept_028001-small.jpg?1309372800" /></li>
        <li link="http://deskcity.com/picture/image_url/84367/Concept_028002.jpg?1309370338"><img src="http://deskcity.com/picture/image_url/84367/Concept_028002-small.jpg?1309372801" /></li>
        <li link="http://deskcity.com/picture/image_url/84368/Concept_028003.jpg?1309371571"><img src="http://deskcity.com/picture/image_url/84368/Concept_028003-small.jpg?1309372801" /></li>
        <li link="http://deskcity.com/picture/image_url/84369/Concept_028004.jpg?1309370717"><img src="http://deskcity.com/picture/image_url/84369/Concept_028004-small.jpg?1309372801" /></li>
        <li link="http://deskcity.com/picture/image_url/84371/Concept_028006.jpg?1309370735"><img src="http://deskcity.com/picture/image_url/84371/Concept_028006-small.jpg?1309372801" /></li>
        <li link="http://deskcity.com/picture/image_url/84372/Concept_028007.jpg?1309370744"><img src="http://deskcity.com/picture/image_url/84372/Concept_028007-small.jpg?1309372802" /></li>
        <li link="http://deskcity.com/picture/image_url/84373/Concept_028008.jpg?1309370757"><img src="http://deskcity.com/picture/image_url/84373/Concept_028008-small.jpg?1309372802" /></li>
        <li link="http://deskcity.com/picture/image_url/84374/Concept_028009.jpg?1309370761"><img src="http://deskcity.com/picture/image_url/84374/Concept_028009-small.jpg?1309372802" /></li>
        <li link="http://deskcity.com/picture/image_url/84375/Concept_028010.jpg?1309370769"><img src="http://deskcity.com/picture/image_url/84375/Concept_028010-small.jpg?1309372802" /></li>
      </ul>
    </div>
    <input type="button" value="Next" class="listNext lr"/>
  </div>
  <script type="text/javascript">
    $("#listDIV").showImg({v:4,b:"#bigPic",p:".listPre",n:".listNext",curClass:"current"});
    </script> 
</div>
<br />
<div class="box2">
  <h2>Y轴,不循环，不自动播放,显示3张</h2>
  <input type="button" value="Pre" id="listPre2" />
  <div class="listDIV" id="listDIV2">
    <ul>
      <li><img src="http://deskcity.com/picture/image_url/84382/Concept_028017-small.jpg?1309372805" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84384/Concept_028019-small.jpg?1309372805" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84366/Concept_028001-small.jpg?1309372800" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84367/Concept_028002-small.jpg?1309372801" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84368/Concept_028003-small.jpg?1309372801" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84369/Concept_028004-small.jpg?1309372801" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84371/Concept_028006-small.jpg?1309372801" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84372/Concept_028007-small.jpg?1309372802" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84373/Concept_028008-small.jpg?1309372802" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84374/Concept_028009-small.jpg?1309372802" /></li>
      <li><img src="http://deskcity.com/picture/image_url/84375/Concept_028010-small.jpg?1309372802" /></li>
    </ul>
  </div>
  <input type="button" value="Next" id="listNext2" />
  <script type="text/javascript">
$("#listDIV2").showImg({v:3,p:"#listPre2",n:"#listNext2",fx:"y"});
</script> 
</div>
<br />
<div class="box3">
  <h2>X轴,循环，自动播放,显示4张,ul为'.wrapBox',li为:'.item'</h2>
  <input type="button" value="pre" class="lf" id="listPre3" />
  <div class="listDIV lf" id="listDIV3">
    <div class="wrapBox">
      <div class="item"><img src="http://deskcity.com/picture/image_url/84382/Concept_028017-small.jpg?1309372805" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84384/Concept_028019-small.jpg?1309372805" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84366/Concept_028001-small.jpg?1309372800" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84367/Concept_028002-small.jpg?1309372801" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84368/Concept_028003-small.jpg?1309372801" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84369/Concept_028004-small.jpg?1309372801" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84371/Concept_028006-small.jpg?1309372801" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84372/Concept_028007-small.jpg?1309372802" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84373/Concept_028008-small.jpg?1309372802" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84374/Concept_028009-small.jpg?1309372802" /></div>
      <div class="item"><img src="http://deskcity.com/picture/image_url/84375/Concept_028010-small.jpg?1309372802" /></div>
    </div>
  </div>
  <input type="button" value="next" class="lf" id="listNext3" />
  <script type="text/javascript">
$("#listDIV3").showImg({v:4,t:3000,p:"#listPre3",ul:".wrapBox",li:".item",n:"#listNext3",fx:"x",loop:true,auto:true});
</script> 
</div>
<br />
</body>
</html>

css部分：

@charset "utf-8";
/* CSS Document */
body {    margin: 0px;    font-size:12px;    font-family:Arial, Helvetica, sans-serif;    padding:20px 0;}
ul, li, p, a {    margin:0px;    padding:0px;}
ul,li{list-style:none;}
a img {border:none;}
.lf {float:left;}
.lr{float:right;}
h2{font-size:14px;}
.clear{clear:both; display:block; width:100%;}

input{ cursor:pointer;background:#999; border:none;width:60px;height:30px;}

.listDIV{overflow:hidden; position:relative;}
.listDIV ul{ position:absolute;}
.listDIV li{margin:10px 3px 10px 0;width:160px;height:100px;overflow:hidden;cursor:pointer;float:left; display:inline;background:url(http://preview.zcool.com.cn/upimg/allimg/070622/05043125.gif) no-repeat center center #fff;}

.box1{width:772px; zoom:1; overflow:hidden; background:#ccc;padding:10px; border:2px solid #333; text-align:center;margin:0 auto;}
.box1 .sBox {clear:both;}
.box1 .listDIV li.current {border:5px solid #656363;width:150px;height:90px;}
.box1 .bBox input{ float:left;margin-top:170px; height:30px;width:60px;}
.box1 .bBox { clear:both; overflow:hidden; margin:0 auto;}
.box1 .sBox input{margin-top:30px;}
.box1 .bigPic{float:left;height:380px;width:650px;overflow:hidden; margin:auto; background:#fff;}
.box1 .bigPic img{display:block;margin:0 auto; width:650px;}

.box2 {width:163px;zoom:1; padding:10px; background:#ccc;border:2px solid #333;overflow:hidden;margin:0 auto;}
.box2 input{width:70px; display:block;margin:0 auto;}
.box2 .listDIV{ clear:both;}

.box3{width:790px;padding:10px;background:#ccc;border:2px solid #333; overflow:hidden;zoom:1;margin:0 auto;}
.box3 input{margin-top:35px;}
.box3 .wrapBox{ position:absolute;}
.box3 .wrapBox .item{float:left;width:160px;height:100px;margin:10px 3px; overflow:hidden; display:inline;background:url(http://preview.zcool.com.cn/upimg/allimg/070622/05043125.gif) no-repeat center center #fff;}

.about{width:700px;border:1px dotted #778855;background:#F5F5F5;padding:10px; font-size:14px; line-height:24px;margin:0 auto;}

保存即可预览效果。

posted on 2012-02-29 17:25 向我开炮阅读(545) 评论(0) 编辑收藏举报

showImg jquery插件 图片展示 js

showImg jquery插件图片展示 js