学写了个JS轮播组件，应该不规范，还报了2个错误，请大伙帮忙看看谢谢

Question

学写了个JS轮播组件，应该不规范，还报了2个错误，请大伙帮忙看看谢谢

发布于
2015-11-11

更新于
2015-11-11



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta>
    <link rel="stylesheet" type="text/css" href="../../../css/common/reset.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>


        /*轮播组件-样式*/
        .MslideShow{
            float: left;
            position: relative;
            width:730px;
            height: 454px;
            background-color: #d4262e;
            overflow: hidden;

        }

        .MslideShow #list img{
            width: 730px;
            height: 454px;
        }

        .MslideShow  a {
            position: absolute;
            top: 50%;
            margin-top: -31px;
            z-index: 1;
            display: block;
            width: 28px;
            height: 62px;
            line-height: 62px;
            background: rgba(0, 0, 0, 0.2) none repeat scroll 0% 0%;
            color: #FFF;
            text-align: center;
            font-size: 22px;
            font-weight: 400;
            font-family: simsun;
        }
        .MslideShow  a:hover{
            background-color: #666;
        }
        #prev{}
        #next{

            position: absolute;
            right: 0;
            top: 50%;

        }

        #text{
            position: absolute;
            left: 0;
            bottom:20px ;
        }

        #text span {
            z-index: 200;

            width: 18px;
            height: 18px;
            line-height: 16px;
            display: none;

        }
        #text span {

            width: 500px;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            background: #3E3E3E;

            text-align: center;
            color: #FFF;
            overflow: hidden;
            cursor: pointer;
        }

        #MslideShow #text span.on{
            background-color: #d4262e;
            display: block;
        }




        #bottons{
            position: absolute;
            right: 0;
            bottom:0 ;
        }

        #bottons span {
            z-index: 200;

            width: 18px;
            height: 18px;
            line-height: 16px;


        }
        #bottons span {
            float: left;

            width: 40px;


            background: #3E3E3E;

            text-align: center;
            color: #FFF;
            overflow: hidden;
            cursor: pointer;
        }

        #MslideShow #bottons span.on{
            background-color: #d4262e;
            width: 60px;
            display: block;
        }

        #list img{ float: left; display: block}


    </style>


</head>
<body>
幻灯片模块
<!--S 轮播组件 -->
<div id="lunbo1" class="MslideShow" style="">

    <div id="list" style="margin-left: 0;">
        <img src="../../../img/lb/1.jpg" alt="1">
        <img src="../../../img/lb/2.jpg" alt="2">
        <img src="../../../img/lb/3.jpg" alt="3">
        <img src="../../../img/lb/4.jpg" alt="4">
        <img src="../../../img/lb/5.jpg" alt="5">
    </div>
    <div id="text">
        <span index="1" class="on">1文物告诉你：豆是一个象形字</span>
        <span index="2" class="">2潜水员新西兰潜水邂逅868枚金币</span>
        <span index="3" class="">3西藏古代印章收藏 价值翻倍上涨</span>
        <span index="4" class="">4乾隆朝瓷器：乱花缤纷中的盛世</span>
        <span index="5" class="">5赋绢纱以生命，施丝绸以灵性</span>
    </div>
    <div id="bottons">
        <span index="1" class="on">1</span>
        <span index="2" class="">2</span>
        <span index="3" class="">3</span>
        <span index="4" class="">4</span>
        <span index="5" class="">5</span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>

</div>
<!--E 轮播组件 -->

<!--S 轮播组件 -->
<div id="lunbo2" class="MslideShow" style="">

    <div id="list" style="margin-left: 0;">
        <img src="../../../img/lb/1.jpg" alt="1">
        <img src="../../../img/lb/2.jpg" alt="2">
        <img src="../../../img/lb/3.jpg" alt="3">
        <img src="../../../img/lb/4.jpg" alt="4">
        <img src="../../../img/lb/5.jpg" alt="5">
    </div>
    <div id="text">
        <span index="1" class="on">1好的的的 对对对 的得到</span>
        <span index="2" class="">2潜水员新西兰潜水邂逅868枚金币</span>
        <span index="3" class="">3西藏古代印章收藏 价值翻倍上涨</span>
        <span index="4" class="">4乾隆朝瓷器：乱花缤纷中的盛世</span>
        <span index="5" class="">5赋绢纱以生命，施丝绸以灵性</span>
    </div>
    <div id="bottons">
        <span index="1" class="on">1</span>
        <span index="2" class="">2</span>
        <span index="3" class="">3</span>
        <span index="4" class="">4</span>
        <span index="5" class="">5</span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>

</div>
<!--E 轮播组件 -->



<script>
    function LunboTypeA(SetId){

        var _lunboId = document.getElementById(SetId);
        var imgWidth = 730;
        var index = 0;
        var timer;
        var prev = _lunboId.childNodes[7];//上一张
        var next = _lunboId.childNodes[9];
        var text = _lunboId.childNodes[3].getElementsByTagName("span");
        var list = _lunboId.childNodes[1];
        var bottons = _lunboId.childNodes[1].getElementsByTagName("span");

        //定时自动执行轮播
        function play(){
            timer = setInterval("next.onclick()",2000);
        }

        //停止自动播放
        function stop(){
            clearInterval(timer);
        }

        //按钮颜色选中
        function showArea(obj){
            for (var i = 0; i< obj.length; i++){
                if(obj[i].className =='on'){
                    obj[i].className = '';
                    break;
                }
            }
            obj[index].className = 'on';
        }

        function change(){
            //按钮颜色选中
            showArea(bottons);

            //文字显示选中
            showArea(text);

        }

        function animate(offset){
            list.style.marginLeft = parseInt(list.style.marginLeft) + offset + 'px';
        }

        this.lunboAuto = function(){

            //下一张按钮
            next.onclick = function(){
                index++;

                if (index <5){
                    animate(-imgWidth);
                }else{
                    list.style.marginLeft = "0px";
                    index = 0;
                }

                change();

            };


            //上一张按钮
            prev.onclick = function(){
                index--;

                if ( index != -1 ){
                    this.animate(imgWidth);
                }else{
                    this.animate( -imgWidth * (listImgLength-1) );
                    index = listImgLength-1;
                }

                change();
            };

            //按钮添加点击事件
            for(var i = 0; i < bottons.length; i++){

                bottons[i].onclick = function(){

                    var myIndex = parseInt( this.getAttribute("index") ) -1;

                    if(myIndex == index){
                        return
                    }

                    var offset = -imgWidth * ( myIndex - index );

                    index = myIndex;
                    animate(offset);
                    this.change();

                }

            }


            play();

            //鼠标移动上去停止播放
            _lunboId.onmouseover = stop;

            //鼠标离开后继续播放
            _lunboId.onmouseout = play;

        }

    };




    var lunbo1 = new LunboTypeA("lunbo1");
    lunbo1.lunboAuto();
    //lunbo1



    var lunbo2= new LunboTypeA("lunbo2");
    lunbo2.lunboAuto();

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

图片描述

javascript

阅读 1.8k

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

学写了个JS轮播组件，应该不规范，还报了2个错误，请大伙帮忙看看谢谢

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？