关于源码上传
老师可否把源码传上来
CR7天天向上
2016-03-11
2 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{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 .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:50%;z-index: 1;}
.slider .main .main-i .caption{position:absolute;right:50%;top:30%;z-index: 9 ;
margin-right: 13%;}
.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;position: relative;}
.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: 3;opacity: 0;transition: all .2s;
}
/*hover 到控制按钮的样式*/
.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;
}
/*active 当前展现状态*/
.slider .ctrl .ctrl-i_active:hover,.slider .ctrl .ctrl-i_active{background-color: #000;}
.slider .ctrl .ctrl-i_active:hover img{opacity: 0;}
.slider .main .main-i{opacity: 0;position: absolute;right:50%;top: 0;
transition: all .5s;z-index: }
.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;
opacity: 0;margin-left: -13%;}
.slider .main .main_i-right{right:-50%;}
.slider .main .main-i_active{right:0;opacity: 1;z-index: 2; }
#main-background{right:0;opacity: 1;z-index: 1; }
.slider .main .main-i_active h2,.slider .main .main-i_active h3
{margin-right: 0;opacity: 1;}
</style>
</head>
<body>
<div>
<!-- 0.修改VIEW ->Template（关键字替换），增加 template ID-->
<div id="template_main">
<div class="main-i {{css}}" id="main_{{index}}">
<div>
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="images/{{index}}.jpg">
</div>
</div>
<div id="ctrl_main">
<a href="javascript:switchSlider({{index}});" id="ctrl_{{index}}">
<img src="images/{{index}}.jpg"></a>
</div>
</div>
<script type="text/javascript">
// 1.数据定义（实际生成环境中，由后台给出）
var data = [
{img:1,h1:'Creative',h2:'DUET'},
{img:2,h1:'Friendly',h2:'DEVIL'},
{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
{img:4,h1:'Insecure',h2:'HUSSLER'},
{img:5,h1:'Loving',h2:'REBEL'},
{img:6,h1:'Passionate',h2:'SEEKER'},
{img:7,h1:'Crazy',h2:'FRIEND'},
];
//2.通用函数定义
var g = function (id) {
if ( id.substr(0,1) === '.' ) {//查找id下面的第一个函数如果为class
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
//3.添加幻灯片的操作
function addSliders(){
//3.1获取模板
//清除template_main下面代码的所以空白符 replace方法
var tpl_main = g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
var tpl_ctrl = g('ctrl_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
//3.2 定义最终输出HTML的变量
var out_main = [];
var out_ctrl = [];
//3.3遍历所有数据，构建最终输出 HTML
for(i in data){
var _html_main = tpl_main
.replace(/{{index}}/g,data[i].img)
.replace(/{{h2}}/g,data[i].h1)
.replace(/{{h3}}/g,data[i].h2)
.replace(/{{css}}/g,['','main_i-right'][i%2]);
//随机生成 空符号'' 或者是 css：main_i-right 概率i%2
var _html_ctrl = tpl_ctrl
.replace(/{{index}}/g,data[i].img)
out_main.push(_html_main);
out_ctrl.push(_html_ctrl);
}
//3.4 把 html 回写到 DOM 里面
g('template_main').innerHTML = out_main.join('');
g('ctrl_main').innerHTML = out_ctrl.join('');
//7.增加新的#main-background
g('template_main').innerHTML += tpl_main
.replace(/{{css}}/g,'')
.replace(/{{h2}}/g,data[i].h1)
.replace(/{{h3}}/g,data[i].h2);
g('main_{{index}}').id='main-background';
}
//5.幻灯片切换
function switchSlider(n){
//获取所以main1,main..ctrl1,ctrl2..的值
var main = g('main_'+n);
var ctrl = g('ctrl_'+n);
//当在执行切换的时候，先清除 main-i_active ctrl-i_active的值
var clear_main = g('.main-i')
var clear_ctrl = g('.ctrl-i')
for(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-i_active ctrl-i_active的值
main.className += " main-i_active";
ctrl.className +=" ctrl-i_active";
//7.2切换时复制上一张幻灯片到 main-background 里面
setTimeout(function(){
g("main-background").innerHTML = g('main_'+n).innerHTML;
},1000)
}
//6.动态调整图片高度，margin-top 使其垂直居中 switchSlider({{index}})传值
function movePictures(){
var pictures = g('.picture');
for(i=0; i<pictures.length; i++){
pictures[i].style.marginTop = -(pictures[i].clientHeight/2) + 'px';
}
}
//4.当页面加载完成之后才去执行
window.onload = function(){
addSliders();
switchSlider(1)
//图片动态插入，渲染完成后不执行
setTimeout(function(){
movePictures();
},100)
}
</script>
</body>
</html>举报
0/150
提交
取消
