jQuery Slideshow Album CSS Style

We want to make the page look beautiful, CSS styles are indispensable. The CSS styles used in this tutorial are as follows

.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;
}

We add icons in the form of images to the CSS styles, such as the

marked in the lower right corner. There are many CSS styles. You can put them on the page separately and then quote them on the main page

Now that our style has been made, the next step is to use JS to do our playback. The effect of the previous page and the next page is