为什么我图片还是显示不出来，不能完成幻灯片效果

<!DOCTYPE html>

<html>

<head>

<style>

*{padding: 0; margin: 0;}

body{padding: 50px 0; background-color: #FFF; font-size: 14px; font-family: "微软雅黑"; color: #555;

-webkit-font-smoothing: antialiased;/*字体抗锯齿*/}

.slider .main,

.slider{width: 100%; height: 400px; position: relative;}

.slider .main{overflow: hidden;}

.slider .main .main-i{}

.slider .main .main-i img{width: 100%; position: absolute; left: 0; top: 50%; z-index: 1;}

.slider .main .main-i .caption{position: absolute; right: 60%; top: 10%; 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; text-align: right; font-family: arial;}

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

.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{opacity: 0;

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

.slider .main .main-i_active{opacity: 1; right: 0;}

.slider .main .main-i_active h2,

.slider .main .main-i_active h3{margin-right: 0px; opacity: 1;}

.slider .main .main-i .active{

margin-right: 13%;

}

</style>

</head>

<body>

</div>

</div>

</div>

var date = [

{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'},

];

//通用函数

var g = function (id) {

if( id.substr(0,1) == '.' ){

return document.getElementsByClassName(id.substr(1));

}

return document.getElementById(id);

}

//添加幻灯片的操作

function addSliders(){

//获取所有模板

var tpl_main = g('template_main').innerHTML

.replace(/^\s*/,'')

.replace(/\s*$/,'');

var tpl_ctrl = g('template_ctrl').innerHTML

.replace(/^\s*/,'')

.replace(/\s*$/,'');

//定义最终输出HTML变量

var out_main = [];

var out_ctrl = [];

遍历所有数据,构建最终输出的HTML

for( i in date ){

var _html_main = tpl_main

.replace(/{{index}}/g,date[i].img)

.replace(/{{h2}}/g,date[i].h1)

.replace(/{{h3}}/g,date[i].h2);

var _html_ctrl = tpl_ctrl

.replace(/{{index}}/g,date[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_main = g('.main-i');

var clear_ctrl = g('.ctrl-i');

//清除他们的active样式

for(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','');

}

//为当前控制按钮和幻灯片附加样式

main.className += ' main-i_active';

ctrl.className += ' ctrl-i_active';

}

//动态调整图片的margin-top 以使其垂直居中

function movePictures(){

var pictures = g('.picture');

for(i=0;i<pictures.length;i++){

pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2) + 'px'

}

//定义何时处理幻灯片输出

window.onload = function(){

addSliders();

switchSlider(2);

setTimeout(function(){

movePictures();

},100)

}

</script>

</div>

</body>

</html>

蝎子阿呆

浏览 2499回答 1

为什么我图片还是显示不出来，不能完成幻灯片效果

1回答