上一篇文章里,我们实现了图片集的展示,在本文,对上一篇文章的内容作了封装,实现效果上作了一些优化,具体的思路我就不再赘述,下面将我的代码贴出来,以供搭建参考。
1、imglist.css
html, body, .modal-bg {
height: 100%;
margin: 0;
padding: 0;
font-size: 13px;
font-weight: bold;
color: #fff;
}
.modal-bg{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
background: #48525e;
opacity: 0.4;
z-index: 10;
}
.modal{
position: relative;
z-index: 99;
opacity: 1;
top: 15%;
left: 40%;
width: 600px;
height: 400px;
}
.modal .title .tips-bg{
position: absolute;
bottom: 0px;
left: 0px;
background: #48525e;
width: 100%;
height: 50px;
opacity: 0.8;
}
.modal .title .tips{
position: absolute;
bottom: 13px;
left: 10px;
font-family: "Arial";
font-weight: bold;
font-size: 20px;
}
.modal .title .close{
background: url(../img/close.png) no-repeat;
width: 27px;
height: 27px;
position: absolute;
top: 5px;
right: 5px;
}
.modal .title .close:hover{
cursor: pointer;
}
.container{
position: absolute;
top: 200px;
text-align: center;
width: 100%;
z-index: 5;
}
.image-list{
margin-left: 40%;
position: relative;
}
#prev{
display: none;
width: 45px;
height: 50px;
background: url(../img/prev.png);
}
#next{
width: 45px;
height: 50px;
background: url(../img/next.png);
}
#prev:hover,#next:hover{
cursor: pointer;
}
.page-num{
position: absolute;
right: 8px;
bottom: 15px;
border: 2px solid #fff;
font-weight: bold;
background: #666666;
color: #fff;
border-radius:15px;
text-align: center;
padding: 3px;
width: 15px;
font-size: 13px;
}
.thumb-a{
display:inline-block;
padding:4px;
margin:0 0.5rem 1rem 0.5rem 1rem;
line-height:0;
-webkit-transition:background-color 0.1s ease-out;
-moz-transition:background-color 0.1s ease-out;
-o-transition:background-color 0.1s ease-out;
transition:background-color 0.1s ease-out;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
border-radius:6px
}
.thumb-a:hover{
background-color:#4ae;
cursor: pointer;
}
.thumb-a-hide{
display: none;
}
.thumb-img{
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px
}
2、jquery.imglist.js
(function($){
$.fn.imgList = function(options){
var defaults = {};
var options = $.extend(defaults, options);
var container=$(this);
var imgUrls = options.imgurls;
var autoPlay = options.autoplay;
var thumbWidth = options.thumbwidth, thumbHeight = options.thumbheight,
detailWidth = options.detailwidth,detailHeight = options.detailheight;
var length,imgIndex=1;
length = imgUrls.length;
var play;
var imgList = $("<div></div>").addClass("image-list").css("width",thumbWidth+"px");
$(".image-list").live("mouseenter",function(){
play = clearInterval(play);
divCtrl.show();
});
$(".image-list").live("mouseleave",function(){
play = setInterval(playImg,3000);
divCtrl.hide();
});
var divPageNum = $("<div></div>").addClass("page-num").html(imgIndex);
divPageNum.appendTo(imgList);
var divCtrl = $("<div></div>").css("width","100%").css("height","100%").hide();
var divPrev = $("<div></div>").attr("id","prev"),
divNext = $("<div></div>").attr("id","next");
divPrev.css("position","absolute"),
divNext.css("position","absolute");
divPrev.css("top",(thumbHeight/2-25)+"px"),
divNext.css("top",(thumbHeight/2-25)+"px");
divPrev.css("left","-10px"),
divNext.css("right","-12px");
divPrev.on("click",function(){
if(imgIndex>1){
imgIndex=imgIndex-1;
}
for(var i=0;i<length;i++){
$("#img"+(i+1)).addClass("thumb-a-hide");
}
$("#img"+imgIndex).removeClass("thumb-a-hide");
divPageNum.html(imgIndex);
if(imgIndex===length){
$("#next").hide();
}
else{
$("#next").show();
}
if(imgIndex===1){
$("#prev").hide();
}
else{
$("#prev").show();
}
});
divNext.on("click",function(){
if(imgIndex<length){
imgIndex=imgIndex+1;
}
for(var i=0;i<length;i++){
$("#img"+(i+1)).addClass("thumb-a-hide");
}
$("#img"+imgIndex).removeClass("thumb-a-hide");
divPageNum.html(imgIndex);
if(imgIndex===length){
$("#next").hide();
}
else{
$("#next").show();
}
if(imgIndex===1){
$("#prev").hide();
}
else{
$("#prev").show();
}
});
divPrev.appendTo(divCtrl);
divNext.appendTo(divCtrl);
divCtrl.appendTo(imgList);
imgList.appendTo(container);
for(var i= 0;i<length;i++){
var aImg = $("<a></a>").attr("id","img"+(i+1)).addClass("thumb-a");
if(i>0){
aImg.addClass("thumb-a-hide");
}
var img = $("<img height='"+thumbHeight+"' width='"+thumbWidth+"'/>").addClass("thumb-img");
img .attr("src",imgUrls[i]);
img.appendTo(aImg);
aImg.appendTo(imgList);
aImg.on("click",function(){
play = clearInterval(play);
var winWidth = $(window).width(),winHeight = $(window).height();
var modalBg = $("<div></div>");
modalBg.addClass("modal-bg");
modalBg.appendTo($('body'));
var modal = $("<div></div>");
modal.addClass("modal");
modal.css("position","absolute")
.css("top",(winHeight-detailHeight)/2+"px")
.css("left",(winWidth-detailWidth)/2+"px");
var titleTipsBg = $("<div></div>").addClass("tips-bg");
var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese.");
var titleClose = $("<a></a>").addClass("close");
var title = $("<div></div>");
title.addClass("title");
title.append(titleTipsBg)
.append(titleTips)
.append(titleClose);
titleClose.on("click",function(){
modalBg.hide();
modal.hide();
});
title.appendTo(modal);
var img = $("<img />");
img.attr("width",detailWidth)
.attr("height",detailHeight)
.attr("src","img/demopage/image-"+imgIndex+".jpg");
var imgDiv = $("<div></div>").append(img);
imgDiv.appendTo(modal);
modal.appendTo($('body'));
});
}
if(autoPlay){
play = setInterval(playImg,3000);
}
function playImg(){
if(imgIndex===length){
imgIndex=0;
}
divNext.click();
}
}
})(jQuery);
3、imglist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image List</title>
<link rel="stylesheet" href="css/imglist.css">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.imglist.js"></script>
<script>
var imgUrls = new Array(
"img/demopage/thumb-1.jpg",
"img/demopage/thumb-2.jpg",
"img/demopage/thumb-3.jpg",
"img/demopage/thumb-4.jpg",
"img/demopage/thumb-5.jpg"
);
$(document).ready(function (){
$('#container').imgList({
imgurls:imgUrls,
thumbwidth:300,
thumbheight:220,
detailwidth:600,
detailheight:400,
autoplay:true
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>