?<script type="text/javascript">

? /*1.定義數據*/

? var data = [

? {img:1,h2:'Caption',h3:'COMPATAIOT'},

? {img:2,h2:'Fridently',h3:'Duct'},

? {img:3,h2:'Caption',h3:'REBEL'},

? {img:4,h2:'Loving',h3:'Duct'},

? {img:5,h2:'Crazy',h3:'SEEKER'},

? {img:6,h2:'Caption',h3:'Duct'},

? {img:7,h2:'Shopping',h3:'FRIEND'},

? ];

? /*2g通用函數--獲取DOM*/

? 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( 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)

? ? ? .replace(/{{css}}/g,['','main-i_right'][i%2]); ? //隨機的添加main-i_right樣式

? ? 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,data[i].h2)

? ? ? .replace(/{{h3}}/g,data[i].h3);

? ? ? 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清楚他們的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為當前的控制按鈕和幻燈片添加樣式

? ? 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 以使其2垂直居中

? ?function movePictures(){

? ? var pictures = g('.picture');

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

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

? ? }

? ?}

? ?

? ?//4 定義何時處理幻燈片輸出

? ?window.onload = function(){

? ? addSliders();

? ? switchSlider(2);

? ? setTimeout(function(){

? ? ?movePictures();

? ? },100)

? ?}

?</script>

??*{?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{? overflow: hidden;?}

? ?.slider,? .slider .main,?.slider .main .main-i{?width:100%;?height:400px;?position:relative;?}

? ?.slider .main .main-i img{? width:100%;?position: absolute；?top:70%;?left:0;?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: center;? ?}

? ?.slider .main .main-i .caption .h3{?font-size:70px;?line-height:70px;?color:#000;?text-align: right;

? ?font-family: "times new roman";?}??

? ?/*控制區域*/

? ?.slider .ctrl{

? ? width:100%;

? ? height:13px;

? ? line-height: 13px;

? ? text-align: center;

? ? position: absolute;

? ? left: 0;

? ? bottom:-13px;

? ? background-color: #fff;

? ?}

? ?.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: 1;

? ? opacity: 0;

? ? -webkit-transition: all .2s;

? ?}

? ?/*hover 到控制按鈕的樣式*/

? ?.slider .ctrl .ctrl-i:hover{

? ? background-color: #f0f0f0;

? ? z-index: 2;

? ?}

? ?.slider .ctrl .ctrl-i:hover img{

? ? bottom:13px;

? ? -webkit-box-reflect: below 0px -webkit-gradient(

? ? linear,

? ? left top,

? ? right 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{

? ? 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%;

? ?}

我加了.后還是沒有動態效果

問題解決了，是因為，h2,h3是類，前邊沒加.

你是不是h2有動畫效果，h3沒有

和老師的代碼一樣啊，我不知道為什么了