没有切换效果
来源：3-1 输出以及切换
xuym许
2015-11-20 17:48
为什么我的那个，显示通用函数没有呢
写回答
关注
2回答
-
- 李晓健
- 2015-11-20 20:10:47
给完整代码
-
- 李晓健
- 2015-11-23 12:46:07
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS+CSS3实现带预览图幻灯片效果</title> <style> /*css样式*/ @charset "gb2312"; /* CSS Document */ /* * Description: JS+CSS3实现带预览图幻灯片效果 * 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;/*去除行内块的间距*/} .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 当前展现的状态*/ .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.数据定义 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.通用函数 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].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 回写到对应的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 获取要展现的幻灯片&控制按钮 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 为当前按钮和幻灯片附加样式 main.className += " main-i_active"; ctrl.className += " ctrl-i_active"; }) //4.定义何时处理幻灯片输出 window.onload=function(){ addSliders(); } }); </script> </head> <body> <div class="slider"> <!--修改VIEW >Template(关键字替换) 增加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>你那个切换方法写到jquery的闭包里，在外面当然访问不到了。
JS+CSS3实现带预览图幻灯片效果
同样的幻灯片，不一样的切换，学会实现思路，操作很简单
53759 学习 · 265 问题
相似问题