练习三 轮播图 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container {
            position: relative;
            width: 751px;
            height: 455px;
        }

        .container .pic {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .slider-nav {
            bottom: 10px;
            height: 9px;
            position: absolute;
        }

        .slider-nav ul {
            line-height: 1;
        }

        .slider-nav li {
            background: #3e3e3e none repeat scroll 0 0;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            height: 9px;
            margin: 0 2px;
            overflow: hidden;
            text-align: center;
            width: 9px;
        }

        .slider-nav .slider-selected {
            background: #b61b1f none repeat scroll 0 0;
            color: #fff;
        }

        .slider-nav {
            height: 0;
            left: 110px;
            line-height: 0;
            text-align: center;
            top: 290px;
            width: 530px;
            font-size: 12px;
        }

        .slider-nav li {
            display: inline-block;
            height: 18px;
            line-height: 18px;
            width: 18px;
        }

        .slider-extra {
            position: absolute;
            z-index: 1000;
        }
    </style>
</head>
<body>
<!--
需求
    1.模仿京东做图片轮播
-->
<div class="container">
    <div id="allpic">
        <div class="pic" style="z-index: 5"><img src="img/1.jpg"></div>
        <div class="pic" style="z-index: 4"><img src="img/2.jpg"></div>
        <div class="pic" style="z-index: 3"><img src="img/3.jpg"></div>
        <div class="pic" style="z-index: 2"><img src="img/4.jpg"></div>
        <div class="pic" style="z-index: 1"><img src="img/5.jpg"></div>
    </div>
    <div class="slider-extra">
        <ul class="slider-nav" id="ulid">
            <li class="slider-selected">1</li>
            <!-- slider-selected 表示当前选中的颜色-->
            <li class="slider-item">2</li>
            <li class="slider-item">3</li>
            <li class="slider-item">4</li>
            <li class="slider-item">5</li>
        </ul>
    </div>
</div>
<script type="application/javascript">
    //code here



    //1.图片轮播

    var currPic = 0;
    var taskid = 0;

    var allpic = document.getElementById("allpic");
    var pics = getNodeTypeEq1(allpic);

    //2.数字跟着图片变化
    var lis = getNodeTypeEq1(document.getElementById("ulid"));

    //显示一张图片
    function changePic(pointAt) {
        if(pointAt != null){
            currPic = pointAt;
        }

        for (var i = 0; i < pics.length; i++) {
            if (currPic == i) {
                pics[i].style.zIndex = 1;
                lis[i].className = "slider-selected";
            } else {
                pics[i].style.zIndex = 0;
                lis[i].className = "slider-item";
            }
        }
        currPic++;
        if (currPic == 5) {
            currPic = 0;
        }
    }
    //每隔两秒，变换一次图片
    taskid = window.setInterval(changePic, 2000)

    //过滤掉文本结点、属性结点
    function getNodeTypeEq1(fatherNodeList) {
        var container = [];
        var fnl = fatherNodeList.childNodes;
        for (var i = 0; i < fnl.length; i++) {
            //结点的nodeType表示结点的类型：1为元素结点 2为属性结点 3为文本结点
            if (fnl[i].nodeType == 1) {
                container.push(fnl[i]);
            }
        }
        return container;
    }

    //3.指向下标以显示图片
    //1)页面加载完成，给所有li绑定事件
    window.onload = function () {
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                //2)停止图片轮播
                window.clearInterval(taskid);
                //3)显示指向图片
                changePic(this.innerText - 1);
            }
            //4.鼠标移开，继续轮播
            lis[i].onmouseout = function(){
                taskid = window.setInterval(changePic, 2000);
            }
        }
    }


</script>
</body>
</html>

 

posted @ 2019-05-08 10:58  ___mouM  阅读(202)  评论(0)  编辑  收藏  举报