                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS+CSS3实现带预览图幻灯片效果

源代码（第一部分）

<!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';
           }

           /*控制区域*/
           .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>