                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果

代碼，終于拿到了

<!DOCTYPE html>
<html>
<head>
?? ?<title>css+js預(yù)覽圖幻燈片</title>
?? ?<meta charset="utf-8">
?? ?<style type="text/css">
?? ?*{padding:0; margin: 0;}
?? ?body{
?? ??? ?padding:50px 0;/*上下邊距*/
?? ??? ?background-color: #FFF;
?? ??? ?font-size:14px;
?? ??? ?font-family:'Avenir14px;
?? ??? ?color:#555; Next';
?? ??? ?-webkit-font-smooting:antialiased;
?? ??? ?-o-font-smooting:antialiased;
??????? -moz-font-smoooting:antialiased;
??????? -ms-font-smooting:antialiased;/*字體抗鋸齒
?? ??? ?*/
?? ?}
?? ?.slider,
?? ?.slider .main,
?? ?.slider .main .main-i{
?? ??? ?width: 100%;
?? ??? ?height: 400px;
?? ??? ?position: relative;
?? ?}
?? ?/*幻燈片區(qū)域*/
?? ?.slider .main{
?? ??? ?overflow: hidden;
?? ?}
?? ?/*每一個(gè)幻燈片的樣式*/
?? ?.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;
?? ?}
?? ?.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';
?? ?}
?? ?/*控制按鈕區(qū)域*/
?? ?.slider .ctrl{
?? ??? ?width: 100%;
?? ??? ?height: 13px;
?? ??? ?line-height: 13px;
?? ??? ?text-align: center;
?? ??? ?position: absolute;
?? ??? ?left: 0;
?? ??? ?bottom: -13px;
?? ??? ?/*background-color: #f00;*/
?? ?}
?? ?.slider .ctrl .ctrl-i{
?? ??? ?display: inline-block;/*定義了該屬性，后面設(shè)置寬和高才會(huì)起作用*/
?? ??? ?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: 1;
?? ??? ?opacity: 0;
?? ??? ?-webkit-transition:all .2s;
?? ??? ?-o-transition:all 0.2s;
?? ??? ?-moz-transition:all 0.2s;
?? ??? ?transition:all 0.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))
?? ??? ??? ?) ;
?? ??? ?-o-box-reflect:below 0px -webkit-gradient(
?? ??? ??? ?? linear,
?? ??? ??? ?? left top,
?? ??? ??? ?? left bottom,
?? ??? ??? ?? from( transparent),
?? ??? ??? ?? color-stop(50%, transparent),
?? ??? ??? ?? to(rgba(255,255,255,.3))
?? ??? ??? ?) ;
??????? -moz-box-reflect:below 0px -webkit-gradient(
?? ??? ??? ?? linear,
?? ??? ??? ?? left top,
?? ??? ??? ?? left bottom,
?? ??? ??? ?? from( transparent),
?? ??? ??? ?? color-stop(50%, transparent),
?? ??? ??? ?? to(rgba(255,255,255,.3))
?? ??? ??? ?) ;
??????? -ms-box-reflect:below 0px -webkit-gradient(
?? ??? ??? ?? linear,
?? ??? ??? ?? left top,
?? ??? ??? ?? left bottom,
?? ??? ??? ?? from( transparent),
?? ??? ??? ?? color-stop(50%, transparent),
?? ??? ??? ?? to(rgba(255,255,255,.3))
?? ??? ??? ?) ;
?? ??? ?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;
?? ??? ?z-index: 20;

?? ?}
?? ?/*active 當(dāng)前展現(xiàn)的狀態(tài)*/
?? ?.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;
?? ??? ?transition:all 0.5s;
??????? -o-transition:all 0.5s;
??????? -moz-transition:all 0.5s;
?? ?}
?? ?.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{
?? ??? ?-webkit-transition:all .8s 1s;
?? ??? ?transition:all 1s 0.8s;
??????? -o-transition:all 1s 0.8s;
??????? -moz-transition:all 1s 0.8s;
?? ?}
?? ?
??? #main_background,
??? .slider .main .main-i_active{
??????????????? right:0;
??????????????? opacity:1;
??????????????? z-index:2;
??????????? }
?????????? ?
?? #main_background{
??????????????? z-index:1;
??????????? }
?? ?.slider .main .main-i_active h2,
?? ?.slider .main .main-i_active h3{
?? ??? ?margin-right: 0px;
?? ??? ?opacity: 1;
?? ?}
?? ?.slider .main .main-i .caption{
?? ??? ?margin-right: 13%;
?? ?}
?? ?</style>
</head>
<body>
<div class="slider">
??????????? <div class="main" id="template_main">

??????????????? <div class="main-i {{css}}" id="main_{{index}}">

??????????????????? <div class="caption">
??????????????????????? <h2>{{h2}}</h2>
??????????????????????? <h3>{{h3}}</h3>
??????????????????? </div>

??????????????????? <img src="./img/{{index}}.png" class="picture"/>
??????????????? </div>
??????????? </div>
?????????? ?
??????????? 
??????????? <div class="ctrl" id="template_ctrl">
??????????????? <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
??????????????????? <img src="./img/{{index}}.png"/>
??????????????? </a>
??????????? </div>
???????????

ZXSVVV

2015-07-23

源自：JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果 1-1

關(guān)注問題我要回答

1296

操作

收起

3 回答

芙蓉tuotuo
2015-12-23

//6.動(dòng)態(tài)調(diào)整圖片的margin-top以使其垂直居中

function movePictures(){

var pictures = g('.picture');

for(i=0;i<pictures.length;i++){

pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2 ) + 'px'

}

//4.定義何時(shí)處理幻燈片輸出

window.onload = function(){

addSliders();

switchSlider(2);

setTimeout(function(){

movePictures()

},100)

}

這是我寫的，實(shí)現(xiàn)了，你可以試一試

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

CNSDHH
2015-09-18

這是我的CSS源碼：

@charset?"utf-8";

/*?幻燈片顯示區(qū)域?*/
#SliderArea?{
????height:?600px;
????width:?1000px;
????position:?relative;
????margin:10px;
????float:?left;
}
/*?幻燈片主體區(qū)域?*/
#SliderArea?.Main?{
????height:?600px;
????width:?100%;
????position:?relative;
????overflow:?hidden;
}
/*?每一個(gè)幻燈片的樣式?*/
#SliderArea?.Main?.main-i?{
????height:?600px;
????width:?100%;
????position:?relative;
}
#SliderArea?.Main?.main-i?img?{
????width:?100%;
????position:?absolute;
????left:?0;
????top:?0;
}
#SliderArea?.Main?.main-i?.caption?{
????width:?100%;
????height:?100%;
????position:?absolute;
????right:?54%;
????top:?60%;
}
#SliderArea?.Main?.main-i?.caption?h2{
????background-color:?rgba(245,?51,?23,?0.82);
????font-size:?30px;
????line-height:?50px;
????color:?#ffffff;
????text-align:?right;
????padding:?0px?5px;

????border-radius:?22px;
????-ms-border-radius:?22px;
????-moz-border-radius:?22px;
????-webkit-border-radius:?22px;
????-o-border-radius:?22px;
}
#SliderArea?.Main?.main-i?.caption?h3{
????background-color:?rgba(27,?27,?27,?0.75);
????font-family:?YouYuan;
????font-size:?70px;
????line-height:?70px;
????color:?#ffffff;
????text-align:?right;
????padding:?0px?5px;

????border-radius:?5px;
????-ms-border-radius:?5px;
????-moz-border-radius:?5px;
????-webkit-border-radius:?5px;
????-o-border-radius:?5px;
}
#SliderArea?.Main?.main-i?{
????opacity:?0;
????position:?absolute;
????right:?50%;
????top:?0;
????-webkit-transition:?all?.5s;
}
#SliderArea?.Main?.main-i?h2?{
????margin-right:?45px;
}
#SliderArea?.Main?.main-i?h3?{
????margin-right:?-45px;
}
#SliderArea?.Main?.main-i?h2,
#SliderArea?.Main?.main-i?h3?{
????opacity:?0;
????-webkit-transition:?all?.8s?1s;
}
#SliderArea?.Main?.main-i_active?{
????opacity:?1;
????right:?0;
}
#SliderArea?.Main?.main-i_active?h2,
#SliderArea?.Main?.main-i_active?h3?{
????margin-right:?0;
????opacity:?1;
}

/*?幻燈片控制按鈕區(qū)域?*/
#SliderArea?.Ctrl?{
????height:?15px;
????width:?100%;
????line-height:?15px;
????text-align:?center;
????position:?absolute;
????left:?0;
????bottom:?-17px;
}
#SliderArea?.Ctrl?.ctrl-i?{
????display:?inline-block;
????height:?15px;
????width:?120px;
????background-color:?#a3a3a3;
????box-shadow:?rgba(0,0,0,.3)?0?1px?1px;
????position:?relative;
????margin-left:?1px;
}
#SliderArea?.Ctrl?.ctrl-i?img?{
????width:?100%;
????position:?absolute;
????left:?0;
????bottom:?50px;
????z-index:?1;
????opacity:?0;
????-webkit-transition:?all?.2s;
}
#SliderArea?.Ctrl?.ctrl-i:hover?{
????background-color:?#d1d1d1;
}
#SliderArea?.Ctrl?.ctrl-i:hover?img?{
????bottom:?17px;

????-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;
}
#SliderArea?.Ctrl?.ctrl-i_active:hover,
#SliderArea?.Ctrl?.ctrl-i_active?{
????background-color:?#000000;
}
#SliderArea?.Ctrl?.ctrl-i_active:hover?img?{
????opacity:?0;
}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

CNSDHH
2015-09-18

我來把腳本這塊補(bǔ)充完整：

//?1.?數(shù)據(jù)定義（實(shí)際生產(chǎn)環(huán)境中，應(yīng)由后臺(tái)給出）
var?data?=?[
????{?img:?1,?h2:?'Virtual?Interactive?System',?h3:?'V?I?S'?},
????{?img:?2,?h2:?'Computer?/?Network?/?Security',?h3:?'C?N?S'?},
????{?img:?3,?h2:?'Global?Positioning?System',?h3:?'G?P?S'?},
????{?img:?4,?h2:?'Super?Hacker',?h3:?'S?H'?},
????{?img:?5,?h2:?'Data?Protection',?h3:?'D?P'?},
????{?img:?6,?h2:?'Romote?Interconnection',?h3:?'R?I'?},
????{?img:?7,?h2:?'Mad?Network?Engineer',?h3:?'S?and?R'?},
????{?img:?8,?h2:?'Social?Network?Site',?h3:?'S?N?S'?}
];

//?2.?通用函數(shù)
var?g?=?function?(id)?{
????if?(id.substr(0,?1)?==?'.')?{
????????return?document.getElementsByClassName(id.substr(1));
????}
????return?document.getElementById(id);
}

//?3.?添加幻燈片的操作（所有幻燈片?和?對應(yīng)的按鈕）
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?遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的?HTML
????for?(i?in?data)?{
????????var?_html_main?=?tpl_main
????????????????????.replace(/{{index}}/g,?data[i].img)
????????????????????.replace(/{{h2}}/g,?data[i].?h2)
????????????????????.replace(/{{h3}}/g,?data[i].?h3);
????????var?_html_ctrl?=?tpl_ctrl
????????????????????.replace(/{{index}}/g,?data[i].img);
????????out_main.push(_html_main);
????????out_ctrl.push(_html_ctrl);
????}
????//?3.4?把?HTML?回寫到對應(yīng)的?DOM?里面
????g('template_main').innerHTML?=?out_main.join('');
????g('template_ctrl').innerHTML?=?out_ctrl.join('');
}

//?4.?定義何時(shí)處理幻燈片輸出
window.onload?=?function?()?{
????addSliders();
????switchSlider(2);
}

//?5.?幻燈片切換
function?switchSlider(n)?{
????//?5.1?獲得要展現(xiàn)的幻燈片?和?控制按鈕?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?清除它們的?active?樣式
????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',?'');
????}
????//?5.4?為當(dāng)前幻燈片和控制按鈕附加樣式
????main.className?+=?'main-i_active';
????ctrl.className?+=?'ctrl-i_active';
}

當(dāng)然，后面的垂直居中、不顯示白底還有隨機(jī)切換效果那塊我沒能實(shí)現(xiàn)，搞了半天就是不知道問題出現(xiàn)在哪里！

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答