沒(méi)有切換效果
為什么我的那個(gè)，顯示通用函數(shù)沒(méi)有呢
xuym許
2015-11-20
2 回答
舉報(bào)
0/150
提交
取消
2015-11-20
給完整代碼
2015-11-23
<!DOCTYPE?html> <html> <head> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/> ????<title>JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果</title> ????<style> ????????/*css樣式*/ ????????@charset?"gb2312"; ????????/*?CSS?Document?*/ ????????/* ????????*?Description:?JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果 ????????*?Update:??????20/11/2015 ????????*?Author:?????yixiaofang ????????*/ ????????body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;} ????????ul,ol{list-style:?none;} ????????body{font-size:?16px;?background:?#ffffff;??color:#333;?font-family:?"microsoft?YaHei";-webkit-font-smoothing:antialiased;/*字體抗鋸齒*/} ????????select,input,button{vertical-align:?middle;font-size:?100%;border:0;} ????????fieldset,img{border:?0?none;} ????????h1,?h2,?h3,?h4,?h5,?h6{?font-size:100%;?font-weight:normal;} ????????em,i,b{font-style:?normal;} ????????a{?color:#fff;?text-decoration:?none;} ????????a:hover{??text-decoration:none;} ????????.clear?{clear:?both;display:?block;height:?0;?visibility:?hidden;?font:?0/0?arial} ????????.clearfix:after?{content:?".";?display:?block;?height:?0;?clear:?both;?visibility:?hidden;?font-size:?0} ????????.clearfix?{*zoom:?1} ????????/*?---------------------------------分隔線---------------------------------?*/ ????????.slider,.slider?.main,.main-i{width:100%;height:400px;position:relative;} ????????.slider?.main{overflow:hidden;} ????????.main-i?img{width:100%;position:absolute;top:0;left:0;z-index:1;} ????????.main-i?.caption{position:absolute;top:30%;right:50%;z-index:9;} ????????.main-i?.caption?h2{font-size:40px;line-height:50px;color:#b5b5b5;text-align:right;} ????????.main-i?.caption?h3{font-size:70px;line-height:70px;color:#000;text-align:right;font-family:"Open?Sans?Condensed";} ????????.ctrl{width:100%;height:13px;line-height:13px;text-align:center;position:absolute;bottom:-13px;left:0;font-size:0;/*去除行內(nèi)塊的間距*/} ????????.ctrl-i{display:inline-block;width:150px;height:13px;background-color:#666;box-shadow:0?1px?1px?rgba(0,0,0,0.3);position:relative;margin-left:1px;} ????????.ctrl-i?img{width:100%;position:absolute;left:0;bottom:50px;z-index:1;opacity:0;-webkit-transition:all?.2s;} ????????/*hover?到控制按鈕的樣式*/ ????????.ctrl-i:hover{background-color:#f0f0f0;} ????????.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?當(dāng)前展現(xiàn)的狀態(tài)*/ ????????.ctrl-i_active,.ctrl-i_active:hover{background-color:#000;} ????????.ctrl-i_active:hover?img{opacity:0;} ????????/*幻燈片切換的樣式*/ ????????.main-i{opacity:0;position:absolute;right:50%;top:0;-webkit-transition:?all?.5s;} ????????.main-i?.caption?h2{margin-right:45px;} ????????.main-i?.caption?h3{margin-right:-45px;} ????????.main-i_active{opacity:1;right:0;} ????????.main-i_active?.caption?h2,.main-i_active?.caption?h3{margin-right:0;-webkit-transition:?all?.8s?1s;} ????</style> ????<script?src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script> ????<script> ????????/*js部分*/ ????????$(function()?{ ????????????//1.數(shù)據(jù)定義 ????????????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.通用函數(shù) ????????????var?g=function(id){ ????????????????if(?id.substr(0,1)?==?"."){ ????????????????????return?document.getElementsByClassName(id.substr(1)); ????????????????} ????????????????return?document.getElementById(id); ????????????} ????????????//3.添加幻燈片的操作（所有幻燈片&對(duì)應(yīng)的按鈕） ????????????function?addSliders(){ ????????????????//3.1?獲取模板 ????????????????var?tpl_main=g("template_main").innerHTML ????????????????????????.replace(/^\s*/,'')?//清楚開(kāi)頭的空白符 ????????????????????????.replace(/\s*$/,'');?//清楚結(jié)尾的空白符 ????????????????var?tpl_ctrl=g("template_ctrl").innerHTML ????????????????????????.replace(/^\s*/,'')?//清楚開(kāi)頭的空白符 ????????????????????????.replace(/\s*$/,'');?//清楚結(jié)尾的空白符 ????????????????//3.2?定義最終輸出?HTML?的變量 ????????????????var?out_main=[]; ????????????????var?out_ctrl=[]; ????????????????//3.3?遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的HTML ????????????????for(i?in?data){ ????????????????????//臨時(shí)變量 ????????????????????var?_html_main?=?tpl_main ????????????????????????????.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); ????????????????} ????????????????//3.4?把HTML?回寫(xiě)到對(duì)應(yīng)的DOM?里面 ????????????????g("template_main").innerHTML=out_main.join(''); ????????????????g("template_ctrl").innerHTML=out_ctrl.join(''); ????????????} ????????????//5?幻燈片的切換 ????????????$('body').on('click','a.ctrl-i',function(){ ????????????????var?n?=?$(this).data('index'); ????????????????//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(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?為當(dāng)前按鈕和幻燈片附加樣式 ????????????????main.className?+=?"?main-i_active"; ????????????????ctrl.className?+=?"?ctrl-i_active"; ????????????}) ????????????//4.定義何時(shí)處理幻燈片輸出 ????????????window.onload=function(){ ????????????????addSliders(); ????????????} ????????}); ????</script> </head> <body> <div?class="slider"> ????<!--修改VIEW?>Template(關(guān)鍵字替換)?增加Template?id--> ????<div?class="main"?id="template_main"> ????????<div?class="main-i"?id="main_{{index}}"> ????????????<div?class="caption"> ????????????????<h2>{{h2}}</h2> ????????????????<h3>{{h3}}</h3> ????????????</div> ????????????<img?src="images/{{index}}.jpg"/> ????????</div> ????</div> ????<div?class="ctrl"?id="template_ctrl"> ????????<a?href="javascript:;"?data-index="{{index}}"?class="ctrl-i"?id="ctrl_{{index}}"> ????????????<img?src="images/{{index}}.jpg"/> ????????</a> ????</div> </div> </body> </html>你那個(gè)切換方法寫(xiě)到j(luò)query的閉包里，在外面當(dāng)然訪問(wèn)不到了。