为了账号安全,请及时绑定邮箱和手机立即绑定

为啥我这个幻灯片显示不出来呢~~求助~~

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>JS+CSS实现带预览图的幻灯片效果</title>

<style>

*{padding:0;margin:0;}

body{

padding:50px 0;

font-size: 14px;

background-color: #fff;

font-family:'Avenir next';

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;

left:0;

top: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:right;

}

.slider .main .main-i .caption h3{

font-size: 70px;

line-height: 70px;

color:#000000;

font-family: 'Open Sans Condensed';

text-align:right;

}

/*控制按钮区域*/

.slider .ctrl{

width:100%;

height:13px;

line-height: 13px;

text-align:center;

position: absolute;

left:0;

bottom:-13px;

}

.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;

}

.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;

}

/*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;

}

.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{

-webkit-transition:all .8s 1s;

}

.slider .main .main-i_active{

right:0;

opacity: 1;

}

.slider .main .main-i_active h2,

.slider .main .main-i_active h3{

margin-right:0;

}

</style>

</head>

<body>

<div>

<!--幻灯片区域-->

<!--0.修改 VIEW->Template(关键字替换)-->

<div id="template_main">

<div id="main_{{index}}">

<div>

<h2>h2 caption</h2>

<h3>h3 caption</h3>

</div>

<img src="images/{{index}}.jpg"/>

</div>

<div>

<div>

<h2>{{h2}}</h2>

<h3>{{h3}}</h3>

</div>

<img src="images/{{index}}.jpg"/>

</div>

</div>

<!--控制按钮区域-->

<div id="template_ctrl">

<a href="javascript:switchSlider({{index}});" id="ctrl_{{index}}">

<img src="images/{{index}}.jpg">

</a>

</div>

</div>

<script>

//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.幻灯片切换

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

</body>

</html>


正在回答

2 回答

我也和你碰到了同样的问题~~

0 回复 有任何疑惑可以回复我~

自己查出来了~~main.className+=' main-i_active';这里面引号里要前加个空格~

愁死我了~

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为啥我这个幻灯片显示不出来呢~~求助~~

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信