                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實現(xiàn)帶預覽圖幻燈片效果

源代碼（第一部分）

<!doctype html>

<html>
?? ?<head>
?? ??? ?<title>Preview SlideShow</title>
?? ??? ?<meta charset="utf-8"/>
?? ??? ?<style type="text/css">
?? ??? ??? ?*{
?? ??? ??? ??? ?padding:0;
?? ??? ??? ??? ?margin:0
?? ??? ??? ?}
?? ??? ??? ?body{
?? ??? ??? ??? ?padding:50px 0;
?? ??? ??? ??? ?background-color:#fff;
?? ??? ??? ??? ?font-size:14px;
?? ??? ??? ??? ?font-family:'Avenir Next';
?? ??? ??? ??? ?color:#555;
?? ??? ??? ??? ?/*字體抗鋸齒，字體顯示不那么模糊比較清晰*/
?? ??? ??? ??? ?-webkit-font-smoothing:antialiased
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider,
?? ??? ??? ?.slider .main,
?? ??? ??? ?.slider .main .main-i{
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?height:400px;
?? ??? ??? ??? ?position:relative
?? ??? ??? ?}
?? ??? ????
?? ??? ??? ?.slider .main{
?? ??? ??? ??? ?overflow:hidden;
?? ??? ??? ?}

?? ??? ??? ?.slider .main .main-i{
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.slider .main .main-i .caption{
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?right:50%;
?? ??? ??? ??? ?top:30%;
?? ??? ??? ??? ?z-index:9;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .main .main-i img{
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:0;
?? ??? ??? ??? ?top:50%;
?? ??? ??? ??? ?z-index:1;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .main .main-i .caption h2{
?? ??? ??? ??? ?font-size:40px;
?? ??? ??? ??? ?line-height:50px;
?? ??? ??? ??? ?color:#B5B5B5;
?? ??? ??? ??? ?text-align:right;
?? ??? ??? ?}
?? ??? ??? ?.slider .main .main-i .caption h3{
?? ??? ??? ??? ?font-size:70px;
?? ??? ??? ??? ?line-height:70px;
?? ??? ??? ??? ?color:#000000;
?? ??? ??? ??? ?text-align:right;
?? ??? ??? ??? ?font-family:'Open Sans Condensed';
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/*控制區(qū)域*/
?? ??? ??? ?.slider .ctrl{
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?height:13px;
?? ??? ??? ??? ?line-height:13px;
?? ??? ??? ??? ?text-align:center;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:0;
?? ??? ??? ??? ?bottom:-13px;
?? ??? ??? ??? ?background-color:#fff;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .ctrl .ctrl-i{
?? ??? ??? ??? ?display:inline-block;
?? ??? ??? ??? ?width:150px;
?? ??? ??? ??? ?height:13px;
?? ??? ??? ??? ?background-color:#666;
?? ??? ??? ??? ?box-shadow:0 1px 1px rgba(0,0,0,.3);
?? ??? ??? ??? ?position:relative;
?? ??? ??? ??? ?margin-left:1px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .ctrl .ctrl-i img{
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:0;
?? ??? ??? ??? ?bottom:50px;
?? ??? ??? ??? ?z-index:1;
?? ??? ??? ??? ?opacity:0;
?? ??? ??? ??? ?transition:all 0.2s;
?? ??? ??? ??? ?-o-transition:all 0.2s;
?? ??? ??? ??? ?-moz-transition:all 0.2s;
?? ??? ??? ??? ?-webkit-transition:all .2s;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .ctrl .ctrl-i:hover{
?? ??? ??? ??? ?background-color:#f0f0f0;
?? ??? ??? ?}
?? ??? ????
?? ??? ??? ?.slider .ctrl .ctrl-i:hover img{
?? ??? ??? ??? ?bottom:13px;
?? ??? ??? ??? ?-webkit-box-reflect:below 0px -webkit-gradient(
?? ??? ??? ??? ??? ?liner,
?? ??? ??? ??? ??? ?left top,
?? ??? ??? ??? ??? ?left bottom,
?? ??? ??? ??? ??? ?from(transparent),
?? ??? ??? ??? ??? ?color-stop(50%,transparent),
?? ??? ??? ??? ??? ?to(rgba(255,255,255,.3))
?? ??? ??? ??? ?);
?? ??? ??? ??? ?opacity:1;
?? ??? ??? ?}
?? ??? ????
?? ??? ??? ?.slider .ctrl .ctrl-i_active:hover,
?? ??? ??? ?.slider .ctrl .ctrl-i_active{
?? ??? ??? ??? ?background-color:#000;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .ctrl .ctrl-i_active img{
?? ??? ??? ??? ?opacity:0;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .main .main-i{
?? ??? ??? ??? ?opacity:0;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?right:50%;
?? ??? ??? ??? ?top:0;
?? ??? ??? ??? ?transition:all 0.5s;
?? ??? ??? ??? ?-o-transition:all 0.5s;
?? ??? ??? ??? ?-moz-transition:all 0.5s;
?? ??? ??? ??? ?-webkit-transition:all 0.5s;
?? ??? ??? ??? ?z-index:2;
?? ??? ??? ?}

?? ??? ??? ?.slider .main .main-i_right{
?? ??? ??? ??? ?right:-50%;
?? ??? ??? ?}
?? ??? ???
?? ??? ??? ?.slider .main .main-i h2{
?? ??? ??? ??? ?margin-right:45px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .main .main-i h3{
?? ??? ??? ??? ?margin-right:-45px;
?? ??? ??? ?}
?? ??? ????
?? ??? ??? ?.slider .main .main-i h2,
?? ??? ??? ?.slider .main .main-i h3{
?? ??? ??? ??? ?transition:all 1s 0.8s;
?? ??? ??? ??? ?-o-transition:all 1s 0.8s;
?? ??? ??? ??? ?-moz-transition:all 1s 0.8s;
?? ??? ??? ??? ?-webkit-transition:all 1s 0.8s;
?? ??? ??? ??? ?opacity:0;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?#main_background,
?? ??? ??? ?.slider .main .main-i_active{
?? ??? ??? ??? ?right:0;
?? ??? ??? ??? ?opacity:1;
?? ??? ??? ??? ?z-index:2;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?#main_background{
?? ??? ??? ??? ?z-index:1;
?? ??? ??? ?}
?? ??? ??? ?.slider .main .main-i_active h2,
?? ??? ??? ?.slider .main .main-i_active h3{
?? ??? ??? ??? ?margin-right:0px;
?? ??? ??? ??? ?opacity:1;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.slider .main .main-i .caption{
?? ??? ??? ??? ?margin-right:13%;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
???