                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS+CSS3實現帶預覽圖幻燈片效果

關于源碼上傳

老師可否把源碼傳上來

CR7天天向上

2016-03-11

源自：JS+CSS3實現帶預覽圖幻燈片效果 3-3

關注問題我要回答

833

操作

收起

2 回答

喬布斯的布斯
2017-02-13

太謝謝了，弄懂了問題

0 回復有任何疑惑可以回復我~

收起回答

ID_9527
2016-08-25

<!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>