jQuery幻灯片相册CSS样式

我们要向让页面看起开美观,CSS样式是少不了的,本教程运用的CSS样式如下

.msg_slideshow{
   width:500px;
   height:500px;
   padding:10px;
   position:relative;
   overflow:hidden;
   background:#101010 url(../icons/loading.gif) no-repeat center center;      /*没有图片加载时显示的图片*/
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
}
.msg_slideshow a{
   outline:none;
}
.msg_slideshow a img{
   border:none;
}
.msg_wrapper{
   width:500px;
   height:500px;
   position:relative;
   margin:0;
   padding:0;
   display:table-cell;
   text-align:center;
   vertical-align:middle;
}
.msg_wrapper img{
   display: inline-block!important;
   vertical-align:middle;
   -moz-box-shadow:0px 0px 10px #000;
   -webkit-box-shadow:0px 0px 10px #000;
   box-shadow:0px 0px 10px #000;
}
.msg_controls{
   position:absolute;
   bottom:15px;
   right:-110px;
   width:104px;
   height:26px;
   z-index: 20;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   background-color:#000;
   opacity:0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
.msg_controls a{
   float:left;
   background-color:#000;
   width:20px;
   height:20px;
   margin:3px 3px;
   opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   background-repeat:no-repeat;
   background-position: center center;
}
.msg_controls a:hover{
   opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_controls a.msg_grid{
   background-image:url(../icons/grid.png);      /*右下角的网格图片*/
}
.msg_controls a.msg_prev{
   background-image:url(../icons/prev.png);       /*上一页图标的图片*/
}
.msg_controls a.msg_next{
   background-image:url(../icons/next.png);       /*下一页图标的图片*/
}
.msg_controls a.msg_pause{
   background-image:url(../icons/pause.png);      /*暂停图标的图片*/
}
.msg_controls a.msg_play{
   background-image:url(../icons/play.png);       /*播放图标的图片*/
}
.msg_thumbs{
   background:#000;
   position:absolute;
   width:250px;
   height:166px;
   top:-230px;
   left:50%;
   padding:30px;
   margin:0 0 0 -155px;
   -moz-border-radius:0px 0px 10px 10px;
   -webkit-border-bottom-left-radius:10px;
   -webkit-border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
   -moz-box-shadow:1px 1px 5px #000;
   -webkit-box-shadow:1px 1px 5px #000;
   box-shadow:1px 1px 5px #000;
   opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
   overflow:hidden;
}
.msg_thumb_wrapper{
   position:absolute;
   width:250px;
   height:166px;
   top:30px;
   left:30px;
   z-index:30;
}
.msg_thumb_wrapper a{
   display:block;
   width:75px;
   height:75px;
   float:left;
   margin:4px;
   opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.msg_thumbs a.msg_thumb_next,
.msg_thumbs a.msg_thumb_prev{
   width:18px;
   height:20px;
   background-repeat:no-repeat;
   background-position: center center;
   position:absolute;
   top:50%;
   margin-top:-10px;
   opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.msg_thumbs a.msg_thumb_next:hover,
.msg_thumbs a.msg_thumb_prev:hover{
   opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_thumbs a.msg_thumb_next{
   background-image:url(../icons/next_thumb.png);     /*点击右下角网格的按钮出现在页面中的下一页图标图片*/
   right:5px;
}
.msg_thumbs a.msg_thumb_prev{
   background-image:url(../icons/prev_thumb.png);       /*点击右下角网格的按钮出现在页面中的上一页图标图片*/
   left:5px;
}
.msg_thumbs a.msg_thumb_close{
   position:absolute;
   bottom:0px;
   width:50px;
   left:50%;
   margin:0 0 0 -25px;
   background:#202020 url(../icons/up.png) no-repeat center center;    /*点击右下角网格的按钮出现在页面中的收起图标图片*/
   height:16px;
   opacity:0.7;
   -moz-border-radius:5px 5px 0 0;
   -webkit-border-top-left-radius:5px;
   -webkit-border-top-right-radius:5px;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
}
.msg_thumbs a.msg_thumb_close:hover{
   opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_loading{
   position:absolute;
   background:transparent url(../icons/loading.gif) no-repeat center center;        /*没有图片加载时显示的图片*/
   top:50%;
   left:50%;
   width:50px;
   height:50px;
   margin:-25px 0 0 -25px;
   z-index:25;
   display:none;
}

0.jpg

我们在CSS样式中加入图片形式的图标,如右下角标注的

CSS样式比较多,你可以单独放到页面,再在主页面引用


现在我们的样式也做出来了,下面就是要用JS来做我们的播放,上一页下一页效果了



继续学习
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery幻灯片相册</title> </head> <body> <h1>jQuery幻灯片相册CSS样式</h1> <!-- .msg_slideshow{ width:500px; height:500px; padding:10px; position:relative; overflow:hidden; background:#101010 url(../icons/loading.gif) no-repeat center center; /*没有图片加载时显示的图片*/ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .msg_slideshow a{ outline:none; } .msg_slideshow a img{ border:none; } .msg_wrapper{ width:500px; height:500px; position:relative; margin:0; padding:0; display:table-cell; text-align:center; vertical-align:middle; } .msg_wrapper img{ display: inline-block!important; vertical-align:middle; -moz-box-shadow:0px 0px 10px #000; -webkit-box-shadow:0px 0px 10px #000; box-shadow:0px 0px 10px #000; } .msg_controls{ position:absolute; bottom:15px; right:-110px; width:104px; height:26px; z-index: 20; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#000; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } .msg_controls a{ float:left; background-color:#000; width:20px; height:20px; margin:3px 3px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); background-repeat:no-repeat; background-position: center center; } .msg_controls a:hover{ opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99); } .msg_controls a.msg_grid{ background-image:url(../icons/grid.png); /*右下角的网格图片*/ } .msg_controls a.msg_prev{ background-image:url(../icons/prev.png); /*上一页图标的图片*/ } .msg_controls a.msg_next{ background-image:url(../icons/next.png); /*下一页图标的图片*/ } .msg_controls a.msg_pause{ background-image:url(../icons/pause.png); /*暂停图标的图片*/ } .msg_controls a.msg_play{ background-image:url(../icons/play.png); /*播放图标的图片*/ } .msg_thumbs{ background:#000; position:absolute; width:250px; height:166px; top:-230px; left:50%; padding:30px; margin:0 0 0 -155px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; opacity:0.9; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); overflow:hidden; } .msg_thumb_wrapper{ position:absolute; width:250px; height:166px; top:30px; left:30px; z-index:30; } .msg_thumb_wrapper a{ display:block; width:75px; height:75px; float:left; margin:4px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } .msg_thumbs a.msg_thumb_next, .msg_thumbs a.msg_thumb_prev{ width:18px; height:20px; background-repeat:no-repeat; background-position: center center; position:absolute; top:50%; margin-top:-10px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } .msg_thumbs a.msg_thumb_next:hover, .msg_thumbs a.msg_thumb_prev:hover{ opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99); } .msg_thumbs a.msg_thumb_next{ background-image:url(../icons/next_thumb.png); /*点击右下角网格的按钮出现在页面中的下一页图标图片*/ right:5px; } .msg_thumbs a.msg_thumb_prev{ background-image:url(../icons/prev_thumb.png); /*点击右下角网格的按钮出现在页面中的上一页图标图片*/ left:5px; } .msg_thumbs a.msg_thumb_close{ position:absolute; bottom:0px; width:50px; left:50%; margin:0 0 0 -25px; background:#202020 url(../icons/up.png) no-repeat center center; /*点击右下角网格的按钮出现在页面中的收起图标图片*/ height:16px; opacity:0.7; -moz-border-radius:5px 5px 0 0; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px; } .msg_thumbs a.msg_thumb_close:hover{ opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99); } .msg_loading{ position:absolute; background:transparent url(../icons/loading.gif) no-repeat center center; /*没有图片加载时显示的图片*/ top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; z-index:25; display:none; } --> </body> </html>
提交重置代码