问答详情
源自：-

求大神看下哪里的问题，我搞了两天了，都没有弄出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
}
body{
    padding:50px 0;
    background-color:#FFF;
    font-size:14px;
    color:#555;
    }
 .slider .main .main-i,
    .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: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;
    text-align:right;
    font-family:'Open Sans Condensed';
}
/*控制按钮区域样式*/
.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;
    transition:all .2s;
   
    }
/*hover到控制按钮*/
 .slider .ctrl .ctrl-i:hover {
     background-color:#f0f0f0;
    }
 .slider .ctrl .ctrl-i:hover img {
     bottom:13px;
     -webkit-box-reflect:above 0px
      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;
     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{
     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:0px;
  }
</style>
</head>

<body>
<div class="slider">
        <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="../系统/{{index}}.jpg"/>
            </div>
        </div>
        <div class="ctrl" id="template_ctrl">
            <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"> <img src="../系统/{{index}}.jpg"/></a>
        </div>
        <script type="text/javascript">
            //数据定义，实际生产环境中，后台给出。
            var date = [
                { img: 1, h2: 'Creative', h3: 'beatufil' },
                { img: 2, h2: 'Friendly', h3: 'Devil' },
                { img: 3, h2: 'Crazy', h3: 'Friend' },
                { img: 4, h2: 'Creative', h3: 'beatufil' },
                { img: 5, h2: 'Friendly', h3: 'Devil' },
                { img: 6, h2: 'Crazy', h3: 'Friend' },
                { img: 7, h2: 'Crazy', h3: '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].h2)
                                            .replace(/{{h3}}/g, date[i].h3);
                    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) {
                //获得要展现的幻灯片及控制按钮
                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';
            }
            //定义何时处理幻灯片输出
            window.onload = function () {
                addSliders();
                switchSlider(1);
            }
    </script>
    </div>
    </body>
</html>


提问者：Scorpio_leo 2016-04-07 10:37

个回答

  • weibo_火柴呵_0
    2016-06-14 15:19:12

    我也是这样，请问解决了吗？

    0
  • 稳稳1990
    2016-05-13 17:30:15

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>幻灯片预览</title>

    <!-- <link rel="stylesheet" href="css/index.css"> -->

    <style>

    *{padding: 0;margin: 0;}

    body{

    padding: 50px 0;

    background-color: #fff;

    font-size: 14px;

    font-family: 'Avenir Next'

    color:#555;

    -webkit-font-smoothing:antialiased;

    }

    .slider,.slider .main,.slider .main-i{

    width: 100%;

    height: 600px;

    position: relative;

    }

    /*幻灯片的样式*/

    .slider .main{

    overflow: hidden;

    }

    .slider .main-i{

    opacity: 0;

    position: absolute;

    right: 50%;

    top: 0;

    transition:all .5s;

    z-index: 1;

    }

    .slider .main-i img{

    width: 100%;

    /*height: 100%;*/

    position: absolute;

    left: 0;

    top: 50%;

    z-index: 1;

    }

    .slider .main-i .caption{

    position: absolute;

    right: 50%;

    top: 30%;

    z-index: 9;

    }

    .slider .main-i .caption h2{

    font-size: 40px;

    line-height: 50px;

    color: #b5b5b5;

    text-align: center;

    margin-right: 45px;

    transition:all .8s .5s;

    }

    .slider .main-i .caption h3{

    font-size: 60px;

    line-height: 70px;

    color: #000;

    text-align: center;

    font-family: 'Open Sans Condensed';

    margin-right: -45px;

    transition:all .8s .5s;

    }

    /*控制按钮区域*/

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

    text-align: center;

    background-color: #666;

    box-shadow: 0 1px 1px rgba(0,0,0,.3);

    position: relative;

    margin-left: 1px; 

    z-index: 3;

    }

    .slider .ctrl .ctrl-i img{

    width: 100%;

    position: absolute;

    left: 0;

    bottom: 50px;

    z-index: 1;

    opacity: 0;

    transition:all .2s;

    }

    /*hover控制按钮样式*/

    .slider .ctrl .ctrl-i:hover{

    background-color: #f0f0f0;

    }

    .slider .ctrl .ctrl-i:hover img{

    opacity: 1;

    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;

    }

    .slider .main .main-i h2,.slider .main .main-i h3{

    opacity: 0;

    transition:all 1s .8s;

    }

    .slider .main .main-i .caption{

    margin-right: 10%;

    }

    #mian_bg,

    .slider .main .main-i-active{

    opacity: 1;

    right: 0;

    z-index: 2;

    }

    #mian_bg{

    z-index: 1;

    right: 0;

    }

    .slider .main .main-i-active h2,.slider .main .main-i-active h3{

    margin-right: 0;

    opacity: 1;

    }

    </style>

    </head>

    <body>

    <div>

    <!--0 修改view 转换为模板 关键字替换-->

    <div id="template_main">

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

    <div>

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

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

    </div>

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

    </div>

    </div>

    <div id="template_ctrl">

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

    class="ctrl-i" id="ctrl_{{index}}">

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

    </a>

    </div>

    </div>


    <script>

    //1 数据定义  （实际开发过程中由后台做） 

    var data = [

    {img:1,h2:'Creative',h3:'DUET'},

    {img:2,h2:'Creative',h3:'DUET'},

    {img:3,h2:'Creative',h3:'DUET'},

    {img:4,h2:'Creative',h3:'DUET'},

    {img:5,h2:'Creative',h3:'DUET'},

    {img:6,h2:'Creative',h3:'DUET'},

    {img:7,h2:'Creative',h3:'DUET'}

    ];


    //2 定义通用函数

    var g = function(id){

    // id的第一个字符为.(实际传入的是类名)

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

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

    }

    return document.getElementById(id);

    }


    // 3添加幻灯片的操作(所有的幻灯片及其按钮)

    function addSliders(){

    // 3.1 获取模板（模板template_main内所有的内容，包括空行和html）

    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 (var i = 0; i < data.length; i++) {

    // 幻灯片模板字符串替换

    //{{index}}为data[i].img {{h2}}为data[i].h2 {{h3}}为data[i].h3

    var _html_main = tpl_main.replace(/{{index}}/g,data[i].img)

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

    .replace(/{{h3}}/g,data[i].h3),

       _html_ctrl = tpl_ctrl.replace(/{{index}}/g,data[i].img);


    //将_html_ctrl _html_main添加到模板

    out_main.push(_html_main);

    out_ctrl.push(_html_ctrl);

    };


    // 3.4把html回写到对应的DOM里面 

    g('template_main').innerHTML = out_main.join('');//join('')是为了输出格式好看

    g('template_ctrl').innerHTML = out_ctrl.join('');


    };

    // 5 幻灯片切换

    function switchSlider(n){

    // 5.1 获得要展现的幻灯片&控制按钮 DOM  通过id

    var main = g('main_'+n);

    var ctrl = g('ctrl_'+n);


    // 5.2删除其他幻灯片和按钮的切换样式

    // 获得全部 幻灯片和按钮(通过类名)

    var clear_main = g('.main-i');

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

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

    clear_main[i].className = clear_main[i].className.replace(' main-i-active','');

    };

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

    clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i-active','');

    };


    // 5.3 为当前幻灯片和按钮添加样式

    main.className += ' main-i-active';

    ctrl.className += ' ctrl-i-active';


    }


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

    function movePictures(){

    var pictures = g('.picture');

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

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

    };

    }




    // 4 定义页面元素加载完成后处理幻灯片输出

    window.onload = function(){

    addSliders();

    switchSlider(1);

    setTimeout(function(){

    movePictures();

    }, 100);

    }


    </script>

    </body>

    </html>

    看了下你的代码 问题很多 贴下我的代码 你看看吧  仅供参考吧   js代码最好写在</body>前面  

    0
  • Scorpio_leo
    2016-04-07 10:51:47

    http://img.mukewang.com/5705cb3000016c2513370550.jpg

    下面是这个样子

    0
  • Scorpio_leo
    2016-04-07 10:42:33

    http://img.mukewang.com/5705c903000154ec13480669.jpg

    情况就像这个样子。。。

    0