没有切换效果
为什么我的那个，显示通用函数没有呢
xuym许
2015-11-20
2 回答
<!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的闭包里，在外面当然访问不到了。
查看1条回复
举报
0/150
提交
取消
