您的位置：首页 > 其它

图片水平轮播展示小插件

2014-07-18 19:26 267 查看

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