单张滑动tab 组件 

/*
 CSS重置
 * */

body,
ul,
ol {
    margin: 0px;
    padding: 0px;
}

.flash {
    width: 300px;
    height: 420px;
    position: relative;
    overflow: hidden;
}


/*图片css*/
ul{
    width: 300%;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: 0.5s;
}
ul,
ol {
    list-style: none;
}

ul li {
    width: 300px;
    height: 420px;
    float: left;
    transition: 0.5s;
}

ul li:nth-of-type(1) {
    background: green;
}

ul li:nth-of-type(2) {
    background: blue;
}

ul li:nth-of-type(3) {
    background: red;
}

ul li.now {
    z-index: 1;
    opacity: 1;
}
 


/*箭头css*/

nav a {
    position: absolute;
    top: 100px;
    z-index: 999;
    font-size: 36px;
    width: 40px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
}

nav a:hover {
    background: #333;
    color: white;
}

nav a:nth-of-type(1) {
    left: 0px;
}

nav a:nth-of-type(2) {
    right: 0px;
}


/*原点css*/

ol {
    position: absolute;
    bottom: 50px;
    right: 50px;
    z-index: 99;
}

ol li {
    float: left;
    width: 12px;
    height: 12px;
    border: 2px solid #333;
    background: #ccc;
    border-radius: 50%;
    margin: 0px 5px;
}

ol li.nowx {
    background: white;
    border-color: red;
    box-shadow: 0px 0px 3px black;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="flash.css" />
        <style type="text/css">
            #s1,
            #s2,
            #s3 {
                float: left;
                margin-left: 10px;
            }
        </style>
    </head>

    <body>

        <!--
分析功能：
1、左右箭头切换图功能
    切换小圆点。
    onclick
    
2、单击小原点时候也能换图
    点击哪个小圆点，哪个小圆点对应图片显示。
    onclick 

3、淡入淡出效果。
   left
   transition

    
-->
        <section id="s1">
            <div class="flash">
                <ul>
                    <li class="now">A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
                <ol>
                    <li class="nowx"></li>
                    <li></li>
                    <li></li>
                </ol>
                <nav>
                    <a href="#"> &lt; </a>
                    <a href="#"> &gt; </a>
                </nav>
            </div>
        </section>

        <section id="s2">
            <div class="flash">
                <ul>
                    <li class="now">A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
                <ol>
                    <li class="nowx"></li>
                    <li></li>
                    <li></li>
                </ol>
                <nav>
                    <a href="#"> &lt; </a>
                    <a href="#"> &gt; </a>
                </nav>
            </div>
        </section>

        <section id="s3">
            <div class="flash">
                <ul>
                    <li class="now">A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
                <ol>
                    <li class="nowx"></li>
                    <li></li>
                    <li></li>
                </ol>
                <nav>
                    <a href="#"> &lt; </a>
                    <a href="#"> &gt; </a>
                </nav>
            </div>
        </section>
        <script type="text/javascript">
            function myMove(_id) {
                var arrs = document.querySelectorAll(_id + " nav a");
                var lisx = document.querySelectorAll(_id + " ol li");
                var ul = document.querySelector(_id + " ul");
                var lis = document.querySelectorAll(_id + " ul li");
                var flash = document.querySelector(_id + " .flash");
                var i = 0;
                //单击左边        
                arrs[0].onclick = Pre;
                //单击右边箭头
                arrs[1].onclick = Next

                function Next() {
                    i < (lis.length - 1) ? i++ : null;
                    ul.style.left = -i * 300 + "px";
                    MyIni(i)
                }

                function Pre() {
                    i >= 1 ? i-- : null;
                    ul.style.left = -i * 300 + "px";
                    MyIni(i)
                }

                function MyIni(k) {
                    for(var j = 0; j < lisx.length; j++) {
                        lisx[j].className = "";
                    }
                    lisx[k].className = "nowx";
                }

            }

            myMove("#s1");
            myMove("#s2");
            myMove("#s3");
        </script>
    </body>

</html>

 

posted @ 2017-09-10 11:23  ︶ㄣ鳯躌氷瀚  阅读(111)  评论(0)    收藏  举报