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

沒有效果求解

為什么我做的就沒有動態效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切換導航欄</title>
<style>
*{padding:0; margin:0;}
body{
?? ??? ?padding:50px 0;
?? ??? ?background-color:#FFF;
?? ??? ?font-size:14px;
?? ??? ?font-family:Arial, Helvetica, sans-serif;
?? ??? ?color:#555;
?? ??? ?-webkit-font-smoothing:antialiased;/*字體抗鋸齒*/
?? ?}
?? ?.slider,.slider .main,.slider .main .main-i{
?? ??? ?width:100%;
?? ??? ?height:400px;
?? ??? ?position:relative;}
?? ?.slider .main{ overflow:hidden;}

?? ?.slider .main .main-i img{
?? ??? ?width:100%;
?? ??? ?position:absolute;
?? ??? ?top:0;
?? ??? ?left:0;
?? ??? ?z-index:1;}
?? ?.slider .main .main-i .caption{
?? ??? ?z-index:2;
?? ??? ?position:absolute;
?? ??? ?right:50%;
?? ??? ?top:30%;}
?? ?.slider .main .main-i .caption h2{
?? ??? ?font-size:40px;
?? ??? ?line-height:50px;
?? ??? ?color:#CCC;
?? ??? ?text-align:right;}
?? ?.slider .main .main-i .caption h3{
?? ??? ?font-size:70px;
?? ??? ?line-height:70px;
?? ??? ?color:#000;
?? ??? ?text-align:right;
?? ??? ?font-family:"Lucida Console", Monaco, monospace;}
?? ?.slider .ctrl{
?? ??? ?width:100%
?? ??? ?height:13px;
?? ??? ?line-height:13px;
?? ??? ?text-align:center;
?? ??? ?position:absolute;
?? ??? ?left:0;
?? ??? ?bottom:-13px;
?? ??? ?background-color:#F06;}
?? ?.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;
?? ??? ?
?? ??? ?}
?? ?.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:#666;}
?? ??? ?.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;}
?? ??? ?/*當前狀態*/
?? ??? ?.slider .ctrl .ctrl-i_active,.slider .ctrl .ctrl-i_active:hover{
?? ??? ??? ?background-color:#000;}
?? ??? ?.slider .ctrl .ctrl-i_active img{
?? ??? ??? ?opacity:0;
?? ??? ?}
?? ??? ?/*幻燈片切換樣式*/
?? ??? ?.slider .main .main-i{
?? ??? ??? ?opacity:0;
?? ??? ??? ?position:absolute;
?? ??? ??? ?right:50%;
?? ??? ??? ?top:0;
?? ??? ??? ?}
?? ??? ?.slider .main .main-i_active{opacity:1;right:0;}
?? ??? ?.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;}
?? ??? ?.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">
?? ??? ?<div class="main" id="template_main">
?????? ??? ?<div class="main-i?? main-i_active" id="main_{{index}}">
?????????? ??? ?<div class="caption">
?????????????? ??? ?<h2>{{h2}}</h2>
??????????????????? <h3>{{h3}}</h3>
??????????????? </div>
??????????????? <img src="img/{{index}}.jpg" />
??????????? </div>
?????????? ?
??????? </div>
??????? <div class="ctrl " id="template_ctrl">
?????? ??? ?<a class="ctrl-i ctrl-i_active" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
?????????? ??? ?<img src="img/{{index}}.jpg" />
??????????? </a>
??????? </div>
??? </div>
??? <script type="text/javascript">
?? ?//數據定義，應由后臺給出
?? ??? ?var data =[
?? ??? ??? ?{img:1,h1:'好',h2:'時尚'},
?? ??? ??? ?{img:2,h1:'你的好',h2:'時的尚'},
?? ??? ??? ?{img:3,h1:'你地方好',h2:'時放到尚'},
?? ??? ??? ?{img:4,h1:'你的好',h2:'讓他時尚'},
?? ??? ??? ?{img:5,h1:'你有好',h2:'與時尚'},
?? ??? ??? ?{img:6,h1:'你有好',h2:'時尚'},
?? ??? ??? ?{img:7,h1:'你UI好',h2:'i時尚'}
?? ??? ?];
?? ??? ?//同用函數g獲取dom
?? ??? ?var g = function(id){
?? ??? ??? ?if(id.substr(0,1)=='.'){return document.getElementByClassName(id.substr(1));}
?? ??? ??? ?return document.getElementById(id);
?? ??? ??? ?}
?? ??? ?//添加幻燈片的操作及對應的按鈕
?? ??? ?function addSliders(){
?? ??? ??? ?//獲取模板
?? ??? ??? ?var tpl_mian = g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
?? ??? ??? ?var tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
?? ??? ??? ?//定義輸出的變量
?? ??? ??? ?var out_main=[];
?? ??? ??? ?var out_ctrl=[];
?? ??? ??? ?//遍歷輸出的數據構建最終的輸出HTML
?? ??? ??? ?for(i in data){
?? ??? ??? ??? ?//臨時的
?? ??? ??? ??? ??? ?var _html_main = tpl_mian.replace(/{{index}}/g,data[i].img)
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?.replace(/{{h2}}/g,data[i].h1)
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?.replace(/{{h3}}/g,data[i].h2);
?? ??? ??? ??? ??? ?var _html_ctrl = tpl_ctrl.replace(/{{index}}/g,data[i].img);
?? ??? ??? ??? ??? ?out_main.push(_html_main);
?? ??? ??? ??? ??? ?out_ctrl.push(_html_ctrl);?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//把HTML 會寫到對應的Dom里
?? ??? ??? ??? ?g('template_main').innerHTML=out_main.join('');
?? ??? ??? ??? ?g('template_ctrl').innerHTML=out_ctrl.join('');
?? ??? ??? ?}
?? ??? ??? ?//幻燈片切換
?? ??? ??? ?function? switchSlider(n){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?//獲得要展現的幻燈片和控制按鈕DOM
?? ??? ??? ??? ?var main=g('main_'+n);
?? ??? ??? ??? ?var ctrl= g('ctrl_'+n);
?? ??? ??? ??? ?//獲得所有幻燈片和控制按鈕
?? ??? ??? ??? ?var clear_mian = g('.main-i');
?? ??? ??? ??? ?var clear_ctrl = g('.ctrl-i');
?? ??? ??? ??? ?//清除他們activ樣式
?? ??? ??? ??? ?for(i=0;i<clear_ctrl.length;i++)
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?clear_ctrl[i].className=clear_ctrl[i].className.replace('ctrl-i_active','');
?? ??? ??? ??? ??? ??? ?clear_main[i].className=clear_main[i].className.replace('main-i_active','');
?? ??? ??? ??? ?}
?? ??? ??? ??? ?main.className +='main-i_active';
?? ??? ??? ??? ?ctrl.className +='ctrl-i_active';
?? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ?//定義何時處理幻燈片輸出
?? ??? ?window.onload = function(){
?? ??? ??? ?addSliders();
?? ??? ??? ?switchSlider(1);
?? ??? ??? ?}
?? ?</script>
</body>
</html>

qq_fly_5

2015-11-26

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

關注問題我要回答

1076

操作

收起

1 回答

李曉健
2015-11-26

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>切換導航欄</title>
????<style>
????????*{padding:0;?margin:0;}
????????body{
????????????padding:50px?0;
????????????background-color:#FFF;
????????????font-size:14px;
????????????font-family:Arial,?Helvetica,?sans-serif;
????????????color:#555;
????????????-webkit-font-smoothing:antialiased;/*字體抗鋸齒*/
????????}
????????.slider,.slider?.main,.slider?.main?.main-i{
????????????width:100%;
????????????height:400px;
????????????position:relative;}
????????.slider?.main{?overflow:hidden;}

????????.slider?.main?.main-i?img{
????????????width:100%;
????????????position:absolute;
????????????top:0;
????????????left:0;
????????????z-index:1;}
????????.slider?.main?.main-i?.caption{
????????????z-index:2;
????????????position:absolute;
????????????right:50%;
????????????top:30%;}
????????.slider?.main?.main-i?.caption?h2{
????????????font-size:40px;
????????????line-height:50px;
????????????color:#CCC;
????????????text-align:right;}
????????.slider?.main?.main-i?.caption?h3{
????????????font-size:70px;
????????????line-height:70px;
????????????color:#000;
????????????text-align:right;
????????????font-family:"Lucida?Console",?Monaco,?monospace;}
????????.slider?.ctrl{
????????????width:100%;/*這里少分號*/
????????????height:13px;
????????????line-height:13px;
????????????text-align:center;
????????????position:absolute;
????????????left:0;
????????????bottom:-13px;
????????????background-color:#F06;}
????????.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;

????????}
????????.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:#666;}
????????.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;}
????????/*當前狀態*/
????????.slider?.ctrl?.ctrl-i_active,.slider?.ctrl?.ctrl-i_active:hover{
????????????background-color:#000;}
????????.slider?.ctrl?.ctrl-i_active?img{
????????????opacity:0;
????????}
????????/*幻燈片切換樣式*/
????????.slider?.main?.main-i{
????????????opacity:0;
????????????position:absolute;
????????????right:50%;
????????????top:0;
????????}
????????.slider?.main?.main-i_active{opacity:1;right:0;}
????????.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;}
????????.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">
????<div?class="main"?id="template_main">
????????<div?class="main-i???main-i_active"?id="main_{{index}}">
????????????<div?class="caption">
????????????????<h2>{{h2}}</h2>
????????????????<h3>{{h3}}</h3>
????????????</div>
????????????<img?src="img/{{index}}.jpg"?/>
????????</div>

????</div>
????<div?class="ctrl?"?id="template_ctrl">
????????<a?class="ctrl-i?ctrl-i_active"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});">
????????????<img?src="img/{{index}}.jpg"?/>
????????</a>
????</div>
</div>
<script?type="text/javascript">
????//數據定義，應由后臺給出
????var?data?=[
????????{img:1,h1:'好',h2:'時尚'},
????????{img:2,h1:'你的好',h2:'時的尚'},
????????{img:3,h1:'你地方好',h2:'時放到尚'},
????????{img:4,h1:'你的好',h2:'讓他時尚'},
????????{img:5,h1:'你有好',h2:'與時尚'},
????????{img:6,h1:'你有好',h2:'時尚'},
????????{img:7,h1:'你UI好',h2:'i時尚'}
????];
????//同用函數g獲取dom
????var?g?=?function(id){
????????if(id.substr(0,1)=='.'){return?document.getElementsByClassName(id.substr(1));}?/*getElementsByClassName寫錯了*/
????????return?document.getElementById(id);
????}
????//添加幻燈片的操作及對應的按鈕
????function?addSliders(){
????????//獲取模板
????????var?tpl_mian?=?g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
????????var?tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
????????//定義輸出的變量
????????var?out_main=[];
????????var?out_ctrl=[];
????????//遍歷輸出的數據構建最終的輸出HTML
????????for(i?in?data){
????????????//臨時的
????????????var?_html_main?=?tpl_mian.replace(/{{index}}/g,data[i].img)
????????????????????.replace(/{{h2}}/g,data[i].h1)
????????????????????.replace(/{{h3}}/g,data[i].h2);
????????????var?_html_ctrl?=?tpl_ctrl.replace(/{{index}}/g,data[i].img);
????????????out_main.push(_html_main);
????????????out_ctrl.push(_html_ctrl);
????????}
????????//把HTML?會寫到對應的Dom里
????????g('template_main').innerHTML=out_main.join('');
????????g('template_ctrl').innerHTML=out_ctrl.join('');
????}
????//幻燈片切換
????function??switchSlider(n){

????????//獲得要展現的幻燈片和控制按鈕DOM
????????var?main=g('main_'+n);
????????var?ctrl=?g('ctrl_'+n);
????????//獲得所有幻燈片和控制按鈕
????????var?clear_mian?=?g('.main-i');
????????var?clear_ctrl?=?g('.ctrl-i');
????????//清除他們activ樣式
????????for(var?i=0;i<clear_ctrl.length;i++)?/*這里少var*/
????????{
????????????clear_ctrl[i].className=clear_ctrl[i].className.replace('ctrl-i_active','');
????????????clear_mian[i].className=clear_mian[i].className.replace('main-i_active','');?/*clear_mian寫成了clear_main*/
????????}
????????main.className?+='main-i_active';
????????ctrl.className?+='ctrl-i_active';

????}
????//定義何時處理幻燈片輸出
????window.onload?=?function(){
????????addSliders();
????????switchSlider(1);
????}
</script>
</body>
</html>

看注釋 ?我的注釋全是用 /* ?*/ 來注釋的