重覆再重覆三天验证这些代码有两个问题
第一个问题：作者使用另类的开发工具
第二个问题：部分代码是不是隐藏
我使用IDEA 一直报错一直无效
智能优化作者中的代码一样OK，可是JS还没找到办法（关键字无效）
<!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;
}
/*幻灯片区域*!/*/
.slider .main{overflow: hidden;
}
/*每一个幻灯片的样式**/
/*.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';
}
/*控制按钮区域*/
/*.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 当前展现的状态*/
/*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">
<!--0.修改 VIEW->Template(关键字替换)，增加 teplate id-->
<div class="main" id="template_main">
<!--<div class="main-i{{css}}"id="main_{{index}}">-->
<div class="caption">
<h2>不同编译工具</h2>
<h3>不同编译效果</h3>
</div>
<img src="imgs/{{index}}.jpg" alt="我第一" class="picture">
</div>
<!--</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>
