qq_如鱼饮水_2
2017-08-15 11:13:50浏览 1940
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>幻灯片效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
margin: 20px 0;
font-family: "Avenir Next";
font-size: 14px;
color: #555;
background-color: #fff;
-webkit-font-smoothing:antialiased;
}
.slider .main .main-i,
.slider .main,
.slider{
width: 100%;
height: 400px;
position: relative;
z-index: 2;
}
.slider .main .main-i,
.slider .main{
overflow: hidden;
}
.slider .main .main-i .caption{
position: absolute;
left:20%;
top: 50px;
z-index: 9;
}
.slider .main .main-i .caption h2{
margin-right: 100px;
font-size: 40px;
line-height:50px;
color: #B5B5B5;
text-align: right;
}
.slider .main .main-i .caption h3{
margin-right: -100px;
font-size: 70px;
line-height:70px;
color: #000000;
text-align: right;
font-family: "Open Sans Condensed";
}
.slider .main .main-i img{
position: absolute;
top:50%;
}
.slider .ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom: -13px;
z-index: 6;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width: 150px;
height: 13px;
background-color: #999;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position: relative;
margin-right: 2px;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
bottom: 50px;
left: 0;
opacity: 0;
-webkit-transition:all .3s;
}
.slider .ctrl .ctrl-i:hover img{
opacity: 1;
-webkit-box-reflect:below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%,transparent),
to(rgba(255,255,255,.3))
);
}
.slider .ctrl .ctrl-i:hover{
background-color: #f0f0f0;
}
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active{ /*交集选择器之间的空格是必须的，否则不出效果*/
background-color: #000000;
}
.slider .main .main-i{
opacity: 0;
position: absolute;
right: 50%;
top: 0;
-webkit-transition:all .5s;
z-index: 2;
}
.slider .main .main-i_right{
right: -50%;
/*其实这个样式是在.main-i样式基础上又增加的一个样式，样式在样式表中写在后面默认z-index优先级越高*/
}
.slider .main .main-i_active{
opacity: 1;
right: 0;
}
/*注意如果把#main_background写到与main-i一起写，调试时不出现正确结果*/
#main_background{
opacity: 1;
z-index: 1;
right: 0;
}
.slider .main .main-i .caption h2,
.slider .main .main-i .caption h3{
opacity: 0;
-webkit-transition:all 1s 0.8s; /*延迟0.8秒*/
}
.slider .main .main-i_active .caption h2,
.slider .main .main-i_active .caption h3{
opacity: 1;
margin-right: 0;
}
</style>
</head>
<body>
<div class="slider">
<div class="main" id="Template_main">
<div class="main-i {{css}}" id="main_{{index}}">
<img src="images/{{index}}.jpg" alt="" class="pictures">
<div class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
</div>
</div>
<div class="ctrl" id="Template_ctrl">
<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
<img src="images/{{index}}.jpg" alt="">
</a>
</div>
<script type="text/javascript">
var data=[
{img:1,h2:"THML",h3:"DHML"},
{img:2,h2:"CSS",h3:"DCSS"},
{img:3,h2:"javascript",h3:"Dscript"},
{img:4,h2:"ajax",h3:"Dajax"},
{img:5,h2:"DOM",h3:"DDOM"},
{img:6,h2:"BOM",h3:"DBOM"},
{img:7,h2:"NS",h3:"DNS"},
];
var g=function(id){
if(id.substr(0,1)=='.'){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
function addSlider(){
var tpl_main=g('Template_main').innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
var tpl_ctrl=g('Template_ctrl').innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
var out_main=[];
var out_ctrl=[];
for(i in data){
var _out_main=tpl_main.replace(/{{index}}/g,data[i].img)
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3)
.replace(/{{css}}/g,['','main-i_right'][i%2]);//['','main-i_right'][i%2]的含义是数组中有空字符和“main-i_right”两个字符串，[i%2]是数组下标，取0是为空串，取1是为“main-i_right”
var _out_ctrl=tpl_ctrl.replace(/{{index}}/g,data[i].img);
out_main.push(_out_main);
out_ctrl.push(_out_ctrl);
}
g('Template_main').innerHTML=out_main.join('');
g('Template_ctrl').innerHTML=out_ctrl.join('');
// 增加#main_background,这时候tpl_main还是初始的那时的情况。
g('Template_main').innerHTML+=tpl_main.replace(/{{index}}/g,'{{index}}')
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3);
g('main_{{index}}').id='main_background';
}
function switchSlider(n){
var main=g('main_'+n);
var ctrl=g('ctrl_'+n);
var clear_main=g(".main-i");
var clear_ctrl=g(".ctrl-i");
// 这里只能用clear_ctrl.length作为循环条件，因为clear_main已经增加长度1了。
for (var i = 0; i < clear_ctrl.length; i++)
{
clear_main[i].className=clear_main[i].className.replace(' main-i_active','');
clear_ctrl[i].className=clear_ctrl[i].className.replace(' ctrl-i_active','');
}
main.className=main.className+" main-i_active";
ctrl.className=ctrl.className+" ctrl-i_active";
// 可以看调试代码，一下这行程序是让id为main_background的内部html代码等于“当前切换的 main-i_active ” innerHTML代码，由于设置了延迟，发现切换按钮是背景显示上一个的背景。也就是让切换完毕才执行main_bakcground背景与main-i背景一致。
setTimeout(function(){g('main_background').innerHTML=main.innerHTML;},1000);
}
// 调整所有大图向上移动
function movePictures(){
var pictures=g('.pictures');
for (var i = 0; i < pictures.length; i++) {
pictures[i].style.marginTop=(-1*pictures[i].clientHeight/2)+"px";
}
}
window.onload=function(){
addSlider();
switchSlider(1);
setTimeout(function(){
movePictures();
},100);
}
</script>
</div>
</body>
</html>