.className为什么会报错Cannot read property 'className' of undefined

Question

.className为什么会报错Cannot read property 'className' of undefined

发布于
2016-10-01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css">
    <style type="text/css">    
        body{
            background: #f1f1f1;
        }
        a{
            text-decoration: none;
        }
        img{
            width: 320px;
            height: 320px;
        }
        .container1{
            width: 320px;
            height: 320px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .container1>a{
            width: 20px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 0;
            top: 150px;
            color: rgba(0,0,0,0.3);
            font-size: 30px;
            text-align: center;
        }

        .container1>a:nth-child(2){
            position: absolute;
            left: 300px;
        }
        .container1>a:hover{
            background: rgba(0,0,0,0.3);
            color: #fff;
        }
        .container1 .ui-page-item{
            width: 100px;
            height: 10px;
            position: absolute;
            bottom: 10px;
            right: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }
        .container1 .ui-page-item span{
            width: 5px;
            height: 5px;
            border: 2px solid rgba(255,255,255,0.3);
            background:rgba(0,0,0,0.4);
            border-radius: 50%;
            transition: 0.2s;
        }
        .container1 .ui-page-item span:hover{
            background: rgba(255,255,255,0.4);
            border-color: rgba(0,0,0,0.4);
        }
        .active{ 
            background: rgba(255,255,255,0.4);
            border-color: rgba(0,0,0,0.4);
        }
    </style>
</head>
<body>
    <div class="container1" id="carousel">
        <a href="#" id="oleft"><i class="fa fa-angle-left"></i></a>
        <a href="#" id="oright"><i class="fa fa-angle-right"></i></a>
        <div class="ui-page-item">
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
        </div>
        <div id="lunbo">
            <a href="#">
                <img src="imgs/3-1.jpg">
            </a>
            <!-- <a href="#">
                <img src="imgs/3-4.jpg">
            </a>
            <a href="#">
                <img src="imgs/3-7.jpg">
            </a>
            <a href="#">
                <img src="imgs/3-8.jpg">
            </a>
            <a href="#">
                <img src="imgs/3-5.png">
            </a> -->
        </div>
    </div>    

    <script>
        function getElementsByClassName(classname){
            var classobj = new Array();
            var classint = 0;
            var spans = document.getElementsByTagName('span');
            for (var i in spans){
                if (spans[i].getAttribute("class") == classnames) {
                    classobj[classint] = spans[i];
                    classint++;
                }
            }
            return classobj;
        }
        var oCar = document.getElementById('carousel');
        var oLeft = document.getElementById('oleft');
        var oRight = document.getElementById('oright');
        var oImg = document.getElementsByTagName('img')[0];
        var arrUrl = ['imgs/3-1.jpg','imgs/3-4.jpg','imgs/3-7.jpg','imgs/3-8.jpg','imgs/3-5.png'];
        var aSpan = document.getElementsByClassName('ui-page-link');
        var num = 0;
        //定時器
        function autoPlay() {
                timer = setInterval(function(){
                num++;
                num%= arrUrl.length;
                fnTab();
            },3000);
        }
        // 有用戶來操作的定時器，開啟之前一定要先關
        setTimeout(autoPlay,1000);
        oCar.onmouseover = function(){
            clearInterval(timer);
        }
        oCar.onmouseout = autoPlay;
        // 初始化
        function fnTab(){
            oImg.src = arrUrl[num];
            for (var i = 0; i < aSpan.length; i++) {
                aSpan[i].className = 'ui-page-link';
            }
            aSpan[num].className += 'active';
            alert(aSpan[num].className);
        }
        // fnTab();
        //鼠標放上去顯示本塊內容
        for (var i = 0; i < aSpan.length; i++) {
            aSpan[i].index = i;
        
            // 索引值
            aSpan[i].onmouseover = function(){
                num = this.index;
                fnTab();
            }
        }
        // 左右轮播点击事件
        oLeft.onclick = function(){
            num-- ;
            if (num == -1) {
                num = arrUrl.length - 1
            }
            fnTab();
        }
        oRight.onclick = function(){
            num ++
            if (num == arrUrl.length) {
                num = 0
            }
            fnTab();
        }
    </script>        
</body>
</html>

javascript

阅读 7k

1 个回答

得票最新

emperor_han

3131829

发布于
2016-10-01

1.没定义变量 timer