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

插件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=‘img/image_shadow.png‘></div>" +
                             "<a href=‘" + link + "‘ target=‘_self‘>" +
                             "<img title=‘" + itemArray[t].title + "‘ alt=‘" + itemArray[t].title + "‘ width=‘" + itemImageWidth + "px‘ height=‘" + itemImageHeight + "px‘ index=‘" + count + "‘ src=‘" + itemArray[t].image + "‘></a>" +
                             "<span class=‘gallery_item_title‘>" +
                            "<a target=‘_self‘  href=‘" + 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=‘img/dot_1.png‘ />";
            } else {
                html += "<img tag=‘" + i + "‘ src=‘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、用到的小图片如下，当然你也可以找美工重新定制：

网页中用到的小图片

播放幻灯片 全部下载
   

欢迎各位吐槽及搬砖！

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

时间： 2024-11-05 16:25:01

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

-----------------------------------项目中整理的非常有用的PHP函数库（二）-----------------------------------------------------

6.PHP列出目录下的文件名 如果你想列出目录下的所有文件,使用以下代码即可: function listDirFiles($DirPath){ if($dir = opendir($DirPath)){ while(($file = readdir($dir))!== false){ if(!is_dir($DirPath.$file)) { echo "filename: $file<br />"; } } } } 使用方法如下: listDirFiles('home/

-----------------------------------项目中整理的非常有用的PHP函数库（一）-----------------------------------------------------

1.PHP加密解密 PHP加密和解密函数可以用来加密一些有用的字符串存放在数据库里,并且通过可逆解密字符串,该函数使用了base64和MD5加密和解密. 1 function encryptDecrypt($key, $string, $decrypt){ 2 if($decrypt){ 3 $decrypted = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, md5($key), base64_decode($string), MCRYPT_MODE_C

ckeditor编辑器在java项目中配置

一.基本使用: 1.所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2.配置使用 A．将下载下来的CKEditor压缩解压,将解压后的文件夹("ckeditor")拷贝进项目里面,比如我是放在"WebContent"的"commons"文件夹下: B．在需要使用CKEditor的页面引入CKEditor的支持javascript <

项目中如何使用babel6详解

由于浏览器的版本和兼容性问题,很多es6,es7的新的方法都不能使用,等到可以使用的时候,可能已经过去了很多年.Babel可以把es6,es7的新代码编译成兼容绝大多数的主流浏览器的代码. 本篇文章主要介绍在项目中如何安装配置和使用babel. 1.在项目下初始化 package.json $ npm init 2.在项目中安装babel $ npm install babel-cli --save-dev 3.安装babel插件 $ npm install babel-preset-xxxxx

简单介绍在C# 项目中使用 redis

搜索了一圈, 发现没有比较全面且简单的介绍如何在C#项目中使用redis的, 大部分都是零碎的文章,稍微组织了一下,希望对要用redis的人有帮助. 前提 1. Redis is an open source, BSD licensed, advanced key-value store, 简单说用来缓存数据,更多信息参照官网 http://redis.io/,很多大网站都在用这个, 参照 http://redis.io/topics/whos-using-redis. 2. Redis官方是没

项目中的“蓝牙”

之前写过一篇关于蓝牙的文章,我把它称为译文,就是把官方的BluetoothChat那个程序拿过来说android中的蓝牙的操作.因为项目要用到蓝牙,所以这方面的文章看得也不少,不过果然文章都是大同小异,基本都是那个蓝牙聊天程序的照抄,然后修改一下而已.所以当我做这个项目的时候,就很头痛,因为没有多少可以参考的资料,所以一直研究那个聊天程序,现在算是,彻底弄懂了蓝牙的所有操作部分.当然我这篇文章不是想说那个程序,我是想说说我那个项目中的蓝牙操作,希望能给点不一样的蓝牙资料,供做项目的学习,也算是一

[转]MVC4项目中验证用户登录一个特性就搞定

本文转自:http://www.mrhuo.com/Article/Details/470/A-Attribute-For-MVC4-Project-Used-To-Validate-User-Login 在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用方对操作方法的访问. [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inhe

转：C4项目中验证用户登录一个特性就搞定

转:C4项目中验证用户登录一个特性就搞定 在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性.     // 摘要:    //     表示一个特性,该特性用于限制调用方对操作方法的访问.    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = true, AllowMultiple = true)]    public class AuthorizeAttrib

最近一个项目中关于NGUI部分的总结

最近一个项目中关于NGUI部分的总结           在自己最近的一个项目中,软件的界面部分使用了NGUI来进行制作.在制作过程中,遇到了一些问题,也获取了一些经验,总结下来,作为日后的积累. 1.NGUI图集的使用. 此次是第一个自己正儿八经的制作完整图集的项目,感受颇深.在使用NGUI制作界面时,图集的选用是一个关键,因为它直接关系到了drawcall的数量.最好就是自始至终都只使用同一个图集中的元素,这样的话,在界面制作上drawcall的消耗就只会受到Panel的划分以及字体与图集的