我按照您的步驟寫的，但是沒有出現效果
現在就是沒有預覽圖這塊有了，但是幻燈片這塊的圖片和標題都不顯示
qq_Agoni軒_0
2016-04-12
1 回答
舉報
0/150
提交
取消
2017-04-14
給你看我的代碼，可以運行
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-Type" content="text/html">
?? ?<title>Preview 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;
?? ???? }
?? ???? .slider .main .main-i,
?? ???? .slider .main,
?? ???? .slider{
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: 400px;
?? ??? ??? ?position: relative;
?? ???? }
?? ???? /*幻燈片區域*/
?? ???? .slider .main{
?? ??? ??? ?overflow: hidden;
?? ???? }
?? ???? /*每一個幻燈片的樣式*/
??????? .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;
??????? }
??????? .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;
?? ???? }
?? ???? .slider .ctrl .ctrl-i{
?? ??? ??? ?position: relative;
?? ??? ??? ?display: inline-block;
?? ??? ??? ?width: 150px;
?? ??? ??? ?height: 13px;
?? ??? ??? ?background-color: #666;
?? ??? ??? ?box-shadow: 0 1px 1px rgba(0,0,0,.3);
?? ??? ??? ?margin-left: 1px;
?? ???? }
?? ??? ?
?? ???? .slider .ctrl .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{
?? ??? ??? ?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;
?? ??? ??? ?-webkit-transition: all .5s;
?? ??? ??? ?z-index: 2;
?? ???? }
?? ???? .slider .main .main-i_right{
?? ??? ??? ?right: -50%;
?? ???? }
?? ???? .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{
?? ??? ??? ?opacity: 0;
?? ??? ??? ?-webkit-transition: all 1s .8s;
?? ???? }
?? ???? #main_background,
?? ???? .slider .main .main-i_active{
?? ??? ??? ?opacity: 1;
?? ??? ??? ?right: 0;
?? ??? ??? ?z-index: 2;
?? ???? }
?? ???? #main_background{
?? ??? ??? ?z-index: 1;
?? ???? }
?? ???? .slider .main .main-i_active h2,
?? ???? .slider .main .main-i_active h3{
?? ??? ??? ?margin-right: 0;
?? ??? ??? ?opacity: 1;
?? ???? }
?? ???? .slider .main .main-i .caption{
?? ??? ??? ?margin-right: 13%;
?? ???? }
?? ?</style>
</head>
<body>
<div class="slider">
<!--0.修改VIEW->Temolate(關鍵字替換)，增加template id-->
?? ?<div class="main" id="template_main">
?? ??? ?<div class="main-i main-i_active {{css}}" id="main_{{index}}">
?? ??? ??? ?<div class="caption">
?? ??? ??? ??? ?<h2>{{h2}}</h2>
?? ??? ??? ??? ?<h3>{{h3}}</h3>
?? ??? ??? ?</div>
?? ??? ??? ?<img src="img/{{index}}.jpg" class="picture">
?? ??? ?</div>
?? ?</div>
?? ?<div class="ctrl" id="template_ctrl">
?? ??? ?<a href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}">
?? ??? ??? ?<img src="img/{{index}}.jpg">
?? ??? ?</a>
?? ?</div>
</div>
<script type="text/javascript">
??? //1.數據定義（實際生產環境中，應由后臺給出）
?? ?var data = [
??????? {img:1,h2:'Creative',h3:'DUET'},
??????? {img:2,h2:'Friendly',h3:'DEVIL'},
??????? {img:3,h2:'Tranquilent',h3:'COMPATRIOT'},
??????? {img:4,h2:'Insecure',h3:'HUSSLER'},
??????? {img:5,h2:'loving',h3:'REBEL'},
??????? {img:6,h2:'Passionate',h3:'SEEKER'},
??????? {img:7,h2:'Crazy',h3:'PRIEND'}
?? ?];
?? ?
??? //2.通用函數
??? var g = function(id){
?? ??? ?if (id.substr(0,1)=='.') {
?? ??? ??? ?return document.getElementsByClassName(id.substr(1));
?? ??? ?};
?? ??? ?return document.getElementById(id);
??? }
??? //3.添加幻燈片的操作，（所有幻燈片&對應的按鈕）
??? function addSliders(){
?? ??? ?//3.1 獲取模板
?? ??? ?var tpl_main = g('template_main').innerHTML.replace(/^\s*/, '').replace(/\s*$/, '');
?? ??? ?var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/, '').replace(/\s*$/, '');
?? ??? ?//3.2 定義最終輸出HTML的變量
?? ??? ?var out_main = [];
?? ??? ?var out_ctrl = [];
?? ??? ?//3.3 遍歷所有數據，構建最終輸出的HTML
?? ??? ?for(var i =0;i<data.length;i++){
?? ??? ??? ?var _html_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]);
?? ??? ??? ?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('template_ctrl').innerHTML = out_ctrl.join('');
?? ??? ?//7.增加#main_background
?? ??? ?g('template_main').innerHTML +=tpl_main
?? ??? ??? ?.replace(/{{index}}/g,'{{index}}' )
?? ??? ??? ?.replace(/{{h2}}/g,'')
?? ??? ??? ?.replace(/{{h3}}/g,' ' );;
??????? g('main_{{index}}').id = 'main_background';
??? }
??? //5.幻燈片切換
??? function switchSlider (n) {
?? ??? ?//5.1獲得要展現的幻燈片&控制按鈕 DOM
?? ??? ?var main = g('main_'+n);
?? ??? ?var ctrl = g('ctrl_'+n);
?????? ?
??????? //5.2獲得所有的幻燈片以及控制按鈕
??????? var clear_main = g('.main-i');
??????? var clear_ctrl = g('.ctrl-i');
??????? //5.3清除他們的樣式
??????? 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', '');
??????? }
??????? //5.4為當前按鈕和幻燈片附加樣式
?? ??? ?main.className +=' main-i_active';
?? ??? ?ctrl.className +=' ctrl-i_active';
?? ??? ?//7.2切換時，復制上一張幻燈片到main_background中
?? ??? ?setTimeout(function(){
?? ??? ??? ?g('main_background').innerHTML = main.innerHTML;
?? ??? ?},1000);
?? ??? ?
??? }
??? //6.動態調整圖片的margin-top使其垂直居中
??? function movePictures(){
?? ??? ?var pictures = g('.picture');
?? ??? ?for(var i = 0;i < pictures.length;i++){
?? ??? ??? ?pictures[i].style.marginTop = (-1*pictures[i].clientHeight/2)+'px';
?? ??? ?}
??? }
??? //4.定義何時處理幻燈片輸出
??? window.onload = function(){
?? ??? ?addSliders();
?? ??? ?switchSlider(1);
?? ??? ?setTimeout(function(){
?? ??? ??? ?movePictures();
?? ??? ?},100);
?? ??? ?
??? }
</script>
</body>
</html>