关于源码上传
来源：3-3 优化与扩展
CR7天天向上
2016-03-11 15:00
老师可否把源码传上来
写回答
关注
2回答
-
- 乔布斯的布斯
- 2017-02-13 17:27:05
太谢谢了，弄懂了问题
-
- ID_9527
- 2016-08-25 11:08:11
<!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>
JS+CSS3实现带预览图幻灯片效果
同样的幻灯片，不一样的切换，学会实现思路，操作很简单
53759 学习 · 265 问题
相似问题