图片水平轮播展示小插件

插件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='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、用到的小图片如下，当然你也可以找美工重新定制：

 

 

欢迎各位吐槽及搬砖微笑！

posted @ 2014-07-18 19:26  Fast Mover  阅读(328)  评论(0)  编辑  收藏  举报
友情链接： A4纸尺寸 | 卡通头像 | +申请友情链接