幻灯片切换效果完全笔记-原创手记-慕课网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻灯片效果</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        body{
            margin: 20px 0;
            font-family: "Avenir Next";
            font-size: 14px;
            color: #555;
            background-color: #fff;
            -webkit-font-smoothing:antialiased;
        }
        .slider .main .main-i,
        .slider .main,
        .slider{
            width: 100%;
            height: 400px;
            position: relative;
            z-index: 2;
        }
        .slider .main .main-i,
        .slider .main{
            overflow: hidden;
        }
       .slider .main .main-i .caption{
        position: absolute;
        left:20%;
        top: 50px;
        z-index: 9;

       }
      .slider .main .main-i .caption h2{
        margin-right: 100px;
        font-size: 40px;
        line-height:50px;
        color: #B5B5B5;
        text-align: right;
      }
       .slider .main .main-i .caption h3{
        margin-right: -100px;
        font-size: 70px;
        line-height:70px;
        color: #000000;
        text-align: right;
        font-family: "Open Sans Condensed";
      }
   .slider .main .main-i img{
        position: absolute;
        top:50%;
      }
   .slider .ctrl{
    width: 100%;
    height: 13px;
    line-height: 13px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -13px;
    z-index: 6;

   }
   .slider .ctrl .ctrl-i{
    display: inline-block;
    width: 150px;
    height: 13px;
    background-color: #999;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
    position: relative;
    margin-right: 2px;

   }
   .slider .ctrl .ctrl-i img{
    width: 100%;
    position: absolute;
    bottom: 50px;
    left: 0;
    opacity: 0;
    -webkit-transition:all .3s;

   }
   .slider .ctrl .ctrl-i:hover img{
    opacity: 1;
    -webkit-box-reflect:below 0px -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(transparent),
    color-stop(50%,transparent),
    to(rgba(255,255,255,.3))
    );
   }
   .slider .ctrl .ctrl-i:hover{
            background-color: #f0f0f0;
        }
    .slider .ctrl .ctrl-i_active:hover,
    .slider .ctrl .ctrl-i_active{ /*交集选择器之间的空格是必须的，否则不出效果*/
            background-color: #000000;
        }

        .slider .main .main-i{
            opacity: 0;
            position: absolute;
            right: 50%;
            top: 0;
            -webkit-transition:all .5s;
            z-index: 2;
        }
        .slider .main .main-i_right{
            right: -50%;
            /*其实这个样式是在.main-i样式基础上又增加的一个样式，样式在样式表中写在后面默认z-index优先级越高*/
        }

        .slider .main .main-i_active{
            opacity: 1;
            right: 0;
                    }
        /*注意如果把#main_background写到与main-i一起写，调试时不出现正确结果*/
        #main_background{
            opacity: 1;
            z-index: 1;
            right: 0;

        }

        .slider .main .main-i .caption h2,
        .slider .main .main-i .caption h3{
            opacity: 0;
            -webkit-transition:all 1s 0.8s; /*延迟0.8秒*/

        }
        .slider .main .main-i_active .caption h2,
        .slider .main .main-i_active .caption h3{
            opacity: 1;
            margin-right: 0;
        }   

    </style>

</head>
<body>
    <div class="slider">
        <div class="main" id="Template_main">
            <div class="main-i {{css}}" id="main_{{index}}">
                <img src="images/{{index}}.jpg" alt="" class="pictures">
                <div class="caption">
                    <h2>{{h2}}</h2>
                    <h3>{{h3}}</h3>
                </div>
            </div>
        </div>
        <div class="ctrl" id="Template_ctrl">
            <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
                <img src="images/{{index}}.jpg" alt="">
            </a>
        </div>
        <script type="text/javascript">
            var data=[
                {img:1,h2:"THML",h3:"DHML"},
                {img:2,h2:"CSS",h3:"DCSS"},
                {img:3,h2:"javascript",h3:"Dscript"},
                {img:4,h2:"ajax",h3:"Dajax"},
                {img:5,h2:"DOM",h3:"DDOM"},
                {img:6,h2:"BOM",h3:"DBOM"},
                {img:7,h2:"NS",h3:"DNS"},
            ];
            var g=function(id){
                if(id.substr(0,1)=='.'){
                    return document.getElementsByClassName(id.substr(1));
                }

                return document.getElementById(id);

            }
            function addSlider(){
                var tpl_main=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=[];

                for(i in data){
                     var _out_main=tpl_main.replace(/{{index}}/g,data[i].img)
                                    .replace(/{{h2}}/g,data[i].h2)
                                    .replace(/{{h3}}/g,data[i].h3)
                                    .replace(/{{css}}/g,['','main-i_right'][i%2]);//['','main-i_right'][i%2]的含义是数组中有空字符和“main-i_right”两个字符串，[i%2]是数组下标，取0是为空串，取1是为“main-i_right”
                     var _out_ctrl=tpl_ctrl.replace(/{{index}}/g,data[i].img);
                        out_main.push(_out_main);
                        out_ctrl.push(_out_ctrl);
                }
                g('Template_main').innerHTML=out_main.join('');
                g('Template_ctrl').innerHTML=out_ctrl.join('');
                // 增加#main_background,这时候tpl_main还是初始的那时的情况。
                g('Template_main').innerHTML+=tpl_main.replace(/{{index}}/g,'{{index}}')
                                    .replace(/{{h2}}/g,data[i].h2)
                                    .replace(/{{h3}}/g,data[i].h3);
                g('main_{{index}}').id='main_background';
            }
                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");
                    // 这里只能用clear_ctrl.length作为循环条件，因为clear_main已经增加长度1了。
                        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','');

                    }
                    main.className=main.className+"  main-i_active";
                    ctrl.className=ctrl.className+"  ctrl-i_active";
                    // 可以看调试代码，一下这行程序是让id为main_background的内部html代码等于“当前切换的 main-i_active ” innerHTML代码，由于设置了延迟，发现切换按钮是背景显示上一个的背景。也就是让切换完毕才执行main_bakcground背景与main-i背景一致。
                    setTimeout(function(){g('main_background').innerHTML=main.innerHTML;},1000);

                }
                // 调整所有大图向上移动
                   function movePictures(){
                    var pictures=g('.pictures');
                    for (var i = 0; i < pictures.length; i++) {
                        pictures[i].style.marginTop=(-1*pictures[i].clientHeight/2)+"px";
                    }
                   }

                window.onload=function(){
                    addSlider();
                    switchSlider(1);
                    setTimeout(function(){
                        movePictures();
                    },100);

                }
        </script>
    </div>
</body>
</html>