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

重覆再重覆三天驗(yàn)證這些代碼有兩個(gè)問題

第一個(gè)問題：作者使用另類的開發(fā)工具

第二個(gè)問題：部分代碼是不是隱藏

我使用IDEA 一直報(bào)錯(cuò)一直無效

智能優(yōu)化作者中的代碼一樣OK，可是JS還沒找到辦法（關(guān)鍵字無效）

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Slideshow</title>
? ?<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;
? ? ? ?}
? ? ? ?.main-i,
? ? ? ?.main,
? ? ? ?.slider{
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 400px;
? ? ? ? ? ?position: relative;
? ? ? ?}
? ? ? ?/*幻燈片區(qū)域*!/*/
.slider .main{overflow: hidden;
? ? ? ?}
? ? ? ?/*每一個(gè)幻燈片的樣式**/
? ? ? ?/*.slider .main .main-i img*/
? ? ? ?/*.main-i,*/
? ? ? ?/*.main-i img{*/
? ? ? ? ? ?/*width: 40%;*/
? ? ? ? ? ?/*width: 100%;*/
? ? ? ? ? ?/*position: absolute;*/
? ? ? ? ? ?/*position: fixed;*/
? ? ? ? ? ?/*left: 45%;*/
? ? ? ? ? ?/*left: 0;*/
? ? ? ? ? ?/*top: 50%;*/
? ? ? ? ? ?/*top: 0;*/
? ? ? ? ? ?/*z-index: 1;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i .caption*/
.caption{
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?right: 50%;
? ? ? ? ? ?top: 50%;
? ? ? ? ? ?/*z-index: 2;*/
z-index: 9;
? ? ? ?}
? ? ? ?/*.slider .main .main-i .caption h2*/
.caption h2{
? ? ? ? ? ?font-size: 40px;
? ? ? ? ? ?line-height: 50px;
? ? ? ? ? ?/*line-height: 75px;*/
color: #B5B5B5;
? ? ? ? ? ?text-align: right;
? ? ? ?}
? ? ? ?/*.slider .main .main-i .caption h3*/
.caption h3{
? ? ? ? ? ?font-size: 50px;
? ? ? ? ? ?line-height: 70px;
? ? ? ? ? ?color: #000000;
? ? ? ? ? ?text-align: right;
? ? ? ?@font-family: 'Open Sans Condensed';
? ? ? ?}
? ? ? ?/*控制按鈕區(qū)域*/
? ? ? ?/*.slider .ctrl*/
.ctrl{
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 13px;
? ? ? ? ? ?line-height: 13px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?left: 0;
? ? ? ? ? ?bottom: -13px;
? ? ? ?}
? ? ? ?/*.slider .ctrl .ctrl-i*/
.ctrl-i{
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?width: 140px;
? ? ? ? ? ?height: 13px;
? ? ? ? ? ?background-color: #666;
? ? ? ? ? ?box-shadow: 0 1px 1px rgba(0,0,0,.3);
? ? ? ? ? ?position: relative;
? ? ? ? ? ?margin-left: -6px;
? ? ? ?}
? ? ? ?/*.slider .ctrl .ctrl-i img*/
.ctrl-i img{
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?left: 0;
? ? ? ? ? ?bottom: 50px;
? ? ? ? ? ?z-index: 1;
? ? ? ? ? ?opacity:0;
? ? ? ? ? ?-webkit-transition:all .2s;
? ? ? ?}

? ? ? ?/*hover 到控制按鈕的樣式*/
? ? ? ?/*.slider .ctrl .ctrl-i:hover*/
.ctrl-i:hover{
? ? ? ? ? ?background-color: #F0f0f0;
? ? ? ?}
? ? ? ?/*.slider .ctrl .ctrl-i:hover img*/
.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;
? ? ? ?}
? ? ? ?.caption{
? ? ? ? ? ?margin-right: 13%;
? ? ? ?}
? ? ? ?/*active 當(dāng)前展現(xiàn)的狀態(tài)*/

? ? ? ?/*a:first-child {*/
? ? ? ? ? ?/*background-color: #000000;*/
? ? ? ?/*}*/

? ? ? ?/*.ctrl-i_active{*/
? ? ? ? ? ?/*background-color: #000;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .ctrl .ctrl-i_active:hover img*/
? ? ? ?/*.ctrl-i_active:hover img{*/
? ? ? ? ? ?/*opacity:0;*/
? ? ? ?/*}*/
? ? ? ?/*幻燈片切換的樣式*/
? ? ? ?/*.slider .main .main-i*/
? ? ? ?/*.main-i{*/
? ? ? ? ? ?/*opacity: 1;*/
? ? ? ? ? ?/*position:absolute;*/
? ? ? ? ? ?/*right: 0;*/
? ? ? ? ? ?/*top: -233px;*/
? ? ? ? ? ?/*-webkit-transition:all .5s;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i h2*/
? ? ? ?/*.main-i h2{*/
? ? ? ? ? ?/*margin-right: auto;*/
? ? ? ? ? ?/*margin-right: 45px;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i h3*/
? ? ? ?/*.main-i h3{*/
? ? ? ? ? ?/*margin-right: auto;*/
? ? ? ? ? ?/*margin-right: 45px;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i h2,*/
? ? ? ?/*.slider .main .main-i h3*/
? ? ? ?/*.main-i h2,*/
? ? ? ?/*.main-i h3 {*/
? ? ? ? ? ?/*opacity:1;*/
? ? ? ? ? ?/*-webkit-transition:all 1s .8s;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i_active*/
? ? ? ?/*.main-i_active{*/
? ? ? ? ? ?/*right: 0;*/
? ? ? ? ? ?/*opacity:1;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i_active h2,*/
? ? ? ?/*.slider .main .main-i_active h3*/
? ? ? ?/*.main-i_active h2,*/
? ? ? ?/*.main-i_active h3{*/
? ? ? ? ? ?/*margin-right: 0;*/
? ? ? ? ? ?/*opacity:1;*/
? ? ? ?/*}*/
? ? ? ?/*.slider .main .main-i .caption{ ?}*/
? ? ? ?/*.caption{*/
? ? ? ? ? ?/*margin-right: 13%;*/
? ? ? ?/*}*/
.ctrl {

? ? ? ? ? ?transition: background-color 3s linear;
? ? ? ?}
? ?</style>
</head>
<body>
<div class="slider">
? ?
<div class="main" id="template_main">
? ? ? ?
<div class="caption">
? ? ? ? ? ? ? ?<h2>不同編譯工具</h2>
? ? ? ? ? ? ? ?<h3>不同編譯效果</h3>
? ? ? ? ? ?</div>
? ? ? ? ? ?<img src="imgs/{{index}}.jpg" alt="我第一" class="picture">
? ? ? ?</div>
? ?
<div class="ctrl" id="template_ctrl">
? ? ? ?<a class="ctrl-i" id="ctrl_{{index}}">
? ? ? ? ? ?<img src="imgs/{{index}}.jpg" alt="我第二"/>
? ? ? ?</a>
? ? ? ?<a class="ctrl-i" id="ctrl_2">
? ? ? ? ? ?<img src="imgs/2.jpg" alt="我第二"/>
? ? ? ?</a>
? ? ? ?<a class="ctrl-i" id="ctrl_3">
? ? ? ? ? ?<img src="imgs/3.jpg" alt="我第二"/>
? ? ? ?</a>
? ? ? ?<a class="ctrl-i" id="ctrl_4">
? ? ? ? ? ?<img src="imgs/4.jpg" alt="我第二"/>
? ? ? ?</a>
? ? ? ?<a class="ctrl-i" id="ctrl_5">
? ? ? ? ? ?<img src="imgs/5.jpg" alt="我第二"/>
? ? ? ?</a>
? ? ? ?<a class="ctrl-i" id="ctrl_6">
? ? ? ? ? ?<img src="imgs/6.jpg" alt="我第二"/>
? ? ? ?</a>
? ? ? ?<a class="ctrl-i" id="ctrl_7">
? ? ? ? ? ?<img src="imgs/7.jpg" alt="我第二"/>
? ? ? ?</a>
? ?</div>
</div>

</body>

</html>