首页 > 代码库 > 没事把之前项目中搞的比较有用的多图片展示小插件封装并分享一下,供大伙使用
没事把之前项目中搞的比较有用的多图片展示小插件封装并分享一下,供大伙使用
插件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‘>
4、用到的小图片如下,当然你也可以找美工重新定制:
网页中用到的小图片
| ||||||
欢迎各位吐槽及搬砖!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。