jQuery Tayangan Slaid Album Gaya CSS

Kami ingin menjadikan halaman kelihatan cantik, gaya CSS amat diperlukan, gaya CSS yang digunakan dalam tutorial ini adalah seperti berikut

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

Kami menambah ikon dalam bentuk gambar pada gaya CSS, seperti

ditandakan di sudut kanan bawah. Anda boleh meletakkannya di halaman secara berasingan dan kemudian merujuknya pada halaman utama

Sekarang gaya kami telah dibuat, langkah seterusnya ialah menggunakan JS untuk melakukan main balik kami Halaman sebelumnya dan halaman seterusnya mempunyai kesan