css+js 控制幻灯片效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>幻灯片效果</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        body{

           padding: 50px 10%;

        }

        .slider .main,.slider{

            width: 100%;

            height: 400px;

            position: relative;

        }

        /*幻灯片*/

        .slider .main{

            overflow: hidden;

        }

        .slider .main .main_i{

            width: 100%;

            position: absolute;

            right: 50%;

            top:0px;

            -webkit-transition:all 0.5s;

            opacity: 0;

        }

        .slider .main .main_i img{

            width: 100%;

            position: absolute;

            left: 0;

            top: 0;

            z-index: 1;

        }

        /*控制*/

        .slider .ctrl {

            width: 100%;

            height: 13px;

            line-height: 13px;

            text-align: center;

            position: absolute;

            left: 0;

            bottom: -13px;

            background: #ccc;

        }

        .slider .ctrl .ctrl_i{

            display: inline-block;

            width: 150px;

            height: 13px;

            background: #ccc;

            border: 1px solid;

            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 0.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,

                0 0,

                0 100%,

                from(transparent),

                color-stop(50%,transparent),

                to(rgba(255, 255, 255, 0.3))

            );

            opacity: 1;

        }

        /*active 当前状态*/

        .slider .ctrl .ctrl_i_active img:hover,

        .slider .ctrl .ctrl_i_active{

            background-color: #ccc;

        }

        .slider .ctrl .ctrl_i_active:hover img{

            opacity: 0;

        }

        .slider .main .main_i_active{

            right: 0;

            opacity:1;

        }

    </style>

</head>

<body>

    <div class="slider">

        <div class="main" id="template_main">

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

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

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

    </div>

</body>

<script>

    //1. 数据定义

    var data = [

        {img:1},

        {img:2},

        {img:3},

        {img:4},

        {img:5}

    ]

    //定义通用函数

    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;

       var tpl_ctrl = g('template_ctrl').innerHTML;

        var out_main = [];

        var out_ctrl = [];

        for(i in data){

            var _html_main = tpl_main

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

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

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

        // 获得要展现的幻灯片& 控制按钮

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

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

        //  获得所有的幻灯片&控制按钮 dom

        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");

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

        addslider();

        switchSlider(1)

    }

</script>

</html>

  

你可能感兴趣的:(css)