没事把之前项目中搞的比较有用的多图片展示小插件封装并分享一下，供大伙使用

首页 > 代码库 > 没事把之前项目中搞的比较有用的多图片展示小插件封装并分享一下，供大伙使用

没事把之前项目中搞的比较有用的多图片展示小插件封装并分享一下，供大伙使用

2024-07-12 19:41:41 211人阅读

插件demo如下：

demo

实现原理比较简单，主要是用了css中的overflow=hidden特性来设计。比如你一个item宽度（图片+margin）为w,总共有n个item,那么把所有的item按照float=left在一个宽度为n*w的div A里横排过来；然后假如你每页要展示4个item，那么你要在div A外面包一个宽度为4*w的div B然后设置overflow=hidden，那么就只可就看到刚好一页4个item；接下来就是通过控制div B 的left位置来显示翻页时要显示的相应胡第4*i+1到4*(i+1)个item.

当然通过调整样式、参数或者扩展函数，你可以实现更多功能，talk is cheap, just show you the code ，插件是用jquery写的.

1、html页面中加入如下代码

<div id="image-gallery">            <div class="gallery_pages"></div>            <div class="gallery_content">                <div class="arrow_left"></div>                <div class="gallery_wrapper">                    <div class="gallery_area"></div>                </div>                <div class="arrow_right"></div>            </div>        </div>

2、CSS设置，可自定义修改

#image-gallery {    background-color: white;    clear: both;    float: left;    height: 277px;    margin-top: 0;    position: relative;    width: 922px;}.gallery_pages {    float: right;    margin: 10px 20px 0 0;    /*display:none;*/}.gallery_content {    clear: both;    height: 155px;    position: relative;}.arrow_left_bg_off{    background-image: url(‘../img/gallery_btn_left_off.png‘);    background-attachment: scroll;    background-repeat: no-repeat;    background-position: 8px 7px;    background-color: rgba(0, 0, 0, 0);    cursor: default;}.arrow_left_bg_on{    background-image: url(‘../img/gallery_btn_left.png‘);    background-attachment: scroll;    background-repeat: no-repeat;    background-position: 15px 7px;    background-color: rgba(0, 0, 0, 0);    cursor: pointer;}.arrow_left{    float: left;    height: 127px;    left: 0;    opacity: 0.5;    width: 35px;}.arrow_right{    float: left;    height: 127px;    left: 0;    opacity: 0.5;    width: 40px;}.arrow_right_bg_off{    background-image: url(‘../img/gallery_btn_right_off.png‘);    background-attachment: scroll;    background-repeat: no-repeat;    background-position: 7px 7px;    background-color: rgba(0, 0, 0, 0);    cursor: default;}.arrow_right_bg_on{    background-image: url(‘../img/gallery_btn_right.png‘);    background-attachment: scroll;    background-repeat: no-repeat;    background-position: 5px 7px;    background-color: rgba(0, 0, 0, 0);    cursor: pointer;}.gallery_wrapper{    float: left;    height: 198px;    margin-left: 5px;    margin-right: 0px;    margin-top: 0px;    overflow: hidden;    padding-top: 8px;    position: relative;    width: 840px;}.gallery_area > div > div{    height: 0;}.gallery_area{    left: 0;    padding-right: 7px;    position: relative;}.gallery_pages > img{    cursor: pointer;    padding-left: 5px;}.gallery_area > div{    float: left;    margin-left: 15px;    margin-right: 15px;    text-align: center;    width: 180px;}    .gallery_area > div > img    {        cursor: pointer;        height: 127px;        width: 175px;    }.gallery_area img{    border: 0 none;}.gallery_area > div > div > img{    margin-left: -7px;    margin-top: -8px;}.gallery_item_title{    background: url(../img/arrow_b.png) no-repeat scroll 0 3px rgba(0, 0, 0, 0);    float: left;    line-height: 15px;    margin-top: 5px;    padding-left: 12px;    text-align: left;    width: 160px;}    .gallery_item_title a, .gallery_item_title a:link, .gallery_item_title a:hover, .gallery_item_title a:active, .gallery_item_title a:visited    {        color: #466FA4;        font-size: 12px;        text-decoration: none;    }

3、最后是关键JS/Jquery 部分代码

(function () {    initImageGallery();    function initImageGallery() {//debugger;        /*******************************         **Input Parameters Settings         *******************************/        var itemImageShadowWidth = 194;        var itemImageShadowHeight = 142;        var itemImageWidth = 180;        var itemImageHeight = 127;        var itemImageMargin = 15;        var countPerPage = 4;        var widthPerPage = countPerPage * (itemImageWidth + 2 * itemImageMargin);        var itemArray = [{            id: 1,            title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 2,                      title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 3,                      title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 4,                 title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 5,                  title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 6,                    title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 7,                     title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 8,                        title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 9,                       title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 10,                     title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 11,                       title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 12,                     title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }, {            id: 13,                     title: "Please add your item title here ",            desc: "my description",            image: "demo_image.jpg",            link: "http://www.baidu.com"        }        ];        var arryLength = itemArray.length;        var strhtml = "";        var count = 0;        //more than 70 charactors using  ... as an end        for (var t = 0; t < arryLength; t++) {            count = count + 1;            if ($("#image-gallery").html() != null) {                var dot_desc = itemArray[t].title;                if (itemArray[t].title.length >= 70) {                    var len = 70;                    for (var j = 70; j >= 50; j--) {                        if (itemArray[t].title.substr(j, 1) == " ") {                            len = j;                            break;                        }                    }                    dot_desc = itemArray[t].title.substring(0, len) + " ...";                }                var imgName = itemArray[t].image;                itemArray[t].image = "img/itemImg/" + imgName;                var link = itemArray[t].link;                strhtml += "<div>" +                                                "<div>" + "<img width=‘" + itemImageShadowWidth + "px‘ height=‘" + itemImageShadowHeight + "px‘ src=http://www.mamicode.com/‘img/image_shadow.png‘>

" + "<a href=http://www.mamicode.com/‘" + link + "‘ target=‘_self‘>" + "<img title=‘" + itemArray[t].title + "‘ alt=‘" + itemArray[t].title + "‘ width=‘" + itemImageWidth + "px‘ height=‘" + itemImageHeight + "px‘ index=‘" + count + "‘ src=http://www.mamicode.com/‘" + itemArray[t].image + "‘></a>" + "<span class=‘gallery_item_title‘>" + "<a target=‘_self‘ href=http://www.mamicode.com/‘" + link + "‘ index=‘" + count + "‘ projectid=‘" + itemArray[t].id + "‘>" + dot_desc + "</a></span>" + "</div>"; } } $(".gallery_area").html(strhtml); $(".gallery_area").css("left", "0px").css("width", (count * (itemImageWidth + 2*itemImageMargin)) + "px");//the total width of all the items ,should be larger than itemImageWidth + margin+ padding. var html = ""; count = Math.ceil(count / countPerPage); var rightclickcount = 0; $(".arrow_right").removeClass("arrow_right_bg_on").addClass("arrow_right_bg_off"); $(".arrow_left").removeClass("arrow_left_bg_on").addClass("arrow_left_bg_off"); $(".arrow_right").unbind("click"); $(".arrow_left").unbind("click"); if (count > 1) { $(".arrow_right").removeClass("arrow_right_bg_off").addClass("arrow_right_bg_on"); $(".arrow_right").bind("click", function () { rightclickcount = rightclickcount + 1; if (0 <= rightclickcount && rightclickcount < count) { $(".gallery_pages:eq(0)>img").attr("src", "img/dot_2.png"); $(".gallery_pages:eq(0)>img:eq(" + rightclickcount + ")").attr("src", "img/dot_1.png"); $(".gallery_area").animate({ "left": "-=" + widthPerPage + "px" }, 550); $(".arrow_left").removeClass("arrow_left_bg_off").addClass("arrow_left_bg_on"); if (rightclickcount == count - 1) { $(".gallery_pages:eq(0)>img").attr("src", "img/dot_2.png"); $(".gallery_pages:eq(0)>img:eq(" + rightclickcount + ")").attr("src", "img/dot_1.png"); rightclickcount = count - 1; $(".arrow_right").removeClass("arrow_right_bg_on").addClass("arrow_right_bg_off"); } } else if (rightclickcount >= count) { rightclickcount = count - 1; } }); $(".arrow_left").bind("click", function () { rightclickcount = rightclickcount - 1; if (rightclickcount >= 0) { $(".gallery_pages:eq(0)>img").attr("src", "img/dot_2.png"); $(".gallery_pages:eq(0)>img:eq(" + rightclickcount + ")").attr("src", "img/dot_1.png"); $(".gallery_area").animate({ "left": "+=" + widthPerPage + "px" }, 550); $(".arrow_right").removeClass("arrow_right_bg_off").addClass("arrow_right_bg_on"); $(".arrow_left").removeClass("arrow_left_bg_off").addClass("arrow_left_bg_on"); if (rightclickcount == 0) { $(".gallery_pages:eq(0)>img").attr("src", "img/dot_2.png"); $(".gallery_pages:eq(0)>img:eq(" + rightclickcount + ")").attr("src", "img/dot_1.png"); rightclickcount = 0; $(".arrow_right").removeClass("arrow_right_bg_off").addClass("arrow_right_bg_on"); $(".arrow_left").removeClass("arrow_left_bg_on").addClass("arrow_left_bg_off"); } } else if (rightclickcount < 0) { rightclickcount = 0; } }); } for (i = 0; i < count; i++) { if (i == 0) { html += "<img tag=‘" + i + "‘ src=http://www.mamicode.com/‘img/dot_1.png‘ />"; } else { html += "<img tag=‘" + i + "‘ src=http://www.mamicode.com/‘img/dot_2.png‘ />"; } } $(".gallery_pages").html(html); var galleryimagecount = $(".gallery_pages:eq(0)>img").length; $(".gallery_pages:eq(0)>img").bind("click", function () { var i = $(this).index(".gallery_pages:eq(0)>img"); if (i == 0 && i < galleryimagecount && galleryimagecount > 1) { $(".arrow_right").removeClass("arrow_right_bg_off").addClass("arrow_right_bg_on"); $(".arrow_left").removeClass("arrow_left_bg_on").addClass("arrow_left_bg_off"); } else if (i > 0 && i < galleryimagecount - 1) { $(".arrow_right").removeClass("arrow_right_bg_off").addClass("arrow_right_bg_on"); $(".arrow_left").removeClass("arrow_right_bg_off").addClass("arrow_left_bg_on"); } else if (i > 0 && i == (galleryimagecount - 1)) { $(".arrow_right").removeClass("arrow_right_bg_on").addClass("arrow_right_bg_off"); $(".arrow_left").removeClass("arrow_left_bg_off").addClass("arrow_left_bg_on"); } $(".gallery_pages:eq(0)>img").attr("src", "img/dot_2.png"); $(".gallery_pages:eq(0)>img:eq(" + i + ")").attr("src", "img/dot_1.png"); var leftwidth = i * widthPerPage; $(".gallery_area").animate({ left: "-" + leftwidth + "px" }, 550); rightclickcount = i; }); }}());

4、用到的小图片如下，当然你也可以找美工重新定制：