                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS+CSS3實現帶預覽圖幻燈片效果

active 沒效果啊，代碼查了幾次都找不到問題，麻煩各位大神幫我看看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

<style>

*{ padding:0; margin:0;}

body{ padding:50px 0; background-color:#fff; font-size:14px; color:#555; -webkit-font-smoothing:antialiased;}

.slider .main .main-i,

.slider .main,

.slider{

width:100%; height:400px; position:relative;

}

.slider .main{?

overflow:hidden;

}

.slider .main .main-i{}

.slider .main .main-i img{

width:100%; position:absolute; left:0; top:0; z-index:1;

}

.slider .main .main-i .caption{ position:absolute; right:50%; top:30%; z-index:9;}

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

.slider .ctrl{

width:100%; height:13px; line-height:13px; text-align:center; position:absolute; left:0; bottom:-13px; background-color:#b5b5b5;

}

.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 .2s;

}

.slider .ctrl .ctrl-i:hover{ background-color:#f0f0f0;}

.slider .ctrl .ctrl-i:hover img{

bottom:13px;-webkit-box-reflect:below 0px -webkit-gradient(

linear,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:hover img{

opacity:0;

}

</style>

</head>

<body>

? ? <div class="main-i">

? ? ? ? <div class="caption">

? ? ? ? ? ? <h2>h2 caption</h2>

? ? ? ? ? ? ? ? <h3>h3 caption</h3>

? ? ? ? ? ? </div>

? ? ? ? ? ? <img src="file:///C|/Users/Administrator/Documents/未命名站點 2/1.jpg" />

? ? ? ? </div>

? ? ? ? <div class="main-i">

? ? ? ? <div class="caption">

? ? ? ? ? ? <h2>h2 caption</h2>

? ? ? ? ? ? ? ? <h3>h3 caption</h3>

? ? ? ? ? ? </div>

? ? ? ? ? ? <img src="file:///C|/Users/Administrator/Documents/未命名站點 2/1.jpg" />

? ? ? ? </div>

? ? </div>

? ? <div class="ctrl">

? ? <a class="ctrl-i" href="javascript:;"><img src="file:///C|/Users/Administrator/Desktop/網頁練習/image/1.jpg"</a><a class="ctrl-i" href="javascript:;"><img src="file:///C|/Users/Administrator/Desktop/網頁練習/image/1.jpg"</a>

? ? </div>

</div>

</body>

</html>