没有效果求解-慕课网

没有效果求解

来源：3-2 动态调整图片高度

qq_fly_5

2015-11-26 09:50

为什么我做的就没有动态效果

<!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>
*{padding:0; margin:0;}
body{
       padding:50px 0;
       background-color:#FFF;
       font-size:14px;
       font-family:Arial, Helvetica, sans-serif;
       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;
       top:0;
       left:0;
       z-index:1;}
   .slider .main .main-i .caption{
       z-index:2;
       position:absolute;
       right:50%;
       top:30%;}
   .slider .main .main-i .caption h2{
       font-size:40px;
       line-height:50px;
       color:#CCC;
       text-align:right;}
   .slider .main .main-i .caption h3{
       font-size:70px;
       line-height:70px;
       color:#000;
       text-align:right;
       font-family:"Lucida Console", Monaco, monospace;}
   .slider .ctrl{
       width:100%
       height:13px;
       line-height:13px;
       text-align:center;
       position:absolute;
       left:0;
       bottom:-13px;
       background-color:#F06;}
   .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;

       }
   .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:#666;}
       .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,.slider .ctrl .ctrl-i_active:hover{
           background-color:#000;}
       .slider .ctrl .ctrl-i_active img{
           opacity:0;
       }
       /*幻灯片切换样式*/
       .slider .main .main-i{
           opacity:0;
           position:absolute;
           right:50%;
           top:0;
           }
       .slider .main .main-i_active{opacity:1;right:0;}
       .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 h2,
       .slider .main .main-i_active h3{
           margin-right:0;
           opacity:1;}
       .slider .main .main-i .caption{

           margin-right:13%;}

</style>

</head>

<body>
   <div class="slider">
       <div class="main" id="template_main">
           <div class="main-i   main-i_active" id="main_{{index}}">
               <div class="caption">
                   <h2>{{h2}}</h2>
                    <h3>{{h3}}</h3>
                </div>
                <img src="img/{{index}}.jpg" />
            </div>

        </div>
        <div class="ctrl " id="template_ctrl">
           <a class="ctrl-i ctrl-i_active" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
               <img src="img/{{index}}.jpg" />
            </a>
        </div>
    </div>
    <script type="text/javascript">
   //数据定义，应由后台给出
       var data =[
           {img:1,h1:'好',h2:'时尚'},
           {img:2,h1:'你的好',h2:'时的尚'},
           {img:3,h1:'你地方好',h2:'时放到尚'},
           {img:4,h1:'你的好',h2:'让他时尚'},
           {img:5,h1:'你有好',h2:'与时尚'},
           {img:6,h1:'你有好',h2:'时尚'},
           {img:7,h1:'你UI好',h2:'i时尚'}
       ];
       //同用函数g获取dom
       var g = function(id){
           if(id.substr(0,1)=='.'){return document.getElementByClassName(id.substr(1));}
           return document.getElementById(id);
           }
       //添加幻灯片的操作及对应的按钮
       function addSliders(){
           //获取模板
           var tpl_mian = g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
           var tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
           //定义输出的变量
           var out_main=[];
           var out_ctrl=[];
           //遍历输出的数据构建最终的输出HTML
           for(i in data){
               //临时的
                   var _html_main = tpl_mian.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);
               }
               //把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_mian = g('.main-i');
               var clear_ctrl = g('.ctrl-i');
               //清除他们activ样式
               for(i=0;i<clear_ctrl.length;i++)
               {
                       clear_ctrl[i].className=clear_ctrl[i].className.replace('ctrl-i_active','');
                       clear_main[i].className=clear_main[i].className.replace('main-i_active','');
               }
               main.className +='main-i_active';
               ctrl.className +='ctrl-i_active';

               }
       //定义何时处理幻灯片输出
       window.onload = function(){
           addSliders();
           switchSlider(1);
           }
   </script>
</body>
</html>

写回答关注

1回答

李晓健: 2015-11-26 10:00:17

<!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>
        *{padding:0; margin:0;}
        body{
            padding:50px 0;
            background-color:#FFF;
            font-size:14px;
            font-family:Arial, Helvetica, sans-serif;
            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;
            top:0;
            left:0;
            z-index:1;}
        .slider .main .main-i .caption{
            z-index:2;
            position:absolute;
            right:50%;
            top:30%;}
        .slider .main .main-i .caption h2{
            font-size:40px;
            line-height:50px;
            color:#CCC;
            text-align:right;}
        .slider .main .main-i .caption h3{
            font-size:70px;
            line-height:70px;
            color:#000;
            text-align:right;
            font-family:"Lucida Console", Monaco, monospace;}
        .slider .ctrl{
            width:100%;/*这里少分号*/
            height:13px;
            line-height:13px;
            text-align:center;
            position:absolute;
            left:0;
            bottom:-13px;
            background-color:#F06;}
        .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;

        }
        .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:#666;}
        .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,.slider .ctrl .ctrl-i_active:hover{
            background-color:#000;}
        .slider .ctrl .ctrl-i_active img{
            opacity:0;
        }
        /*幻灯片切换样式*/
        .slider .main .main-i{
            opacity:0;
            position:absolute;
            right:50%;
            top:0;
        }
        .slider .main .main-i_active{opacity:1;right:0;}
        .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 h2,
        .slider .main .main-i_active h3{
            margin-right:0;
            opacity:1;}
        .slider .main .main-i .caption{

            margin-right:13%;}

    </style>

</head>

<body>
<div class="slider">
    <div class="main" id="template_main">
        <div class="main-i   main-i_active" id="main_{{index}}">
            <div class="caption">
                <h2>{{h2}}</h2>
                <h3>{{h3}}</h3>
            </div>
            <img src="img/{{index}}.jpg" />
        </div>

    </div>
    <div class="ctrl " id="template_ctrl">
        <a class="ctrl-i ctrl-i_active" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
            <img src="img/{{index}}.jpg" />
        </a>
    </div>
</div>
<script type="text/javascript">
    //数据定义，应由后台给出
    var data =[
        {img:1,h1:'好',h2:'时尚'},
        {img:2,h1:'你的好',h2:'时的尚'},
        {img:3,h1:'你地方好',h2:'时放到尚'},
        {img:4,h1:'你的好',h2:'让他时尚'},
        {img:5,h1:'你有好',h2:'与时尚'},
        {img:6,h1:'你有好',h2:'时尚'},
        {img:7,h1:'你UI好',h2:'i时尚'}
    ];
    //同用函数g获取dom
    var g = function(id){
        if(id.substr(0,1)=='.'){return document.getElementsByClassName(id.substr(1));} /*getElementsByClassName写错了*/
        return document.getElementById(id);
    }
    //添加幻灯片的操作及对应的按钮
    function addSliders(){
        //获取模板
        var tpl_mian = g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
        var tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
        //定义输出的变量
        var out_main=[];
        var out_ctrl=[];
        //遍历输出的数据构建最终的输出HTML
        for(i in data){
            //临时的
            var _html_main = tpl_mian.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);
        }
        //把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_mian = g('.main-i');
        var clear_ctrl = g('.ctrl-i');
        //清除他们activ样式
        for(var i=0;i<clear_ctrl.length;i++) /*这里少var*/
        {
            clear_ctrl[i].className=clear_ctrl[i].className.replace('ctrl-i_active','');
            clear_mian[i].className=clear_mian[i].className.replace('main-i_active',''); /*clear_mian写成了clear_main*/
        }
        main.className +='main-i_active';
        ctrl.className +='ctrl-i_active';

    }
    //定义何时处理幻灯片输出
    window.onload = function(){
        addSliders();
        switchSlider(1);
    }
</script>
</body>
</html>

看注释我的注释全是用 /* */ 来注释的

0 0

JS+CSS3实现带预览图幻灯片效果

同样的幻灯片，不一样的切换，学会实现思路，操作很简单

53758 学习 · 265 问题

查看课程

相似问题

没有切换效果

回答 3

文字没有动画效果

回答 1

求解惑，为什么显示状态没有效果，就是显示时底部的颜色没变化

回答 1

求帮忙看一下，为什么文字没有动画效果啊？

回答 3

运行结果不对，求解，中间红线没了

回答 1

打开慕课网App查看更多内容