qianqian_blog 2018-10-30 03:05 采纳率: 50%
浏览 509

轮播效果,自动播放那里有问题,求大神解答

 var container = document.getElementById("container");
            var list = document.getElementById("list");
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var index = 1;//显示小圆点
            var animated = false;
            var interval=2000;
            var timer;
            //小圆点的切换
            function animate(change){
                animated=true;
                var newleft=parseInt(list.style.left)+change;
                var time=100;//位移总时间
                var interval=50;//位移间隔时间
                var speed=change/(time/interval);//每次位移量
                function go(){
                    if((speed < 0 && parseInt(list.style.left)>newleft)||(speed > 0&&parseInt(list.style.left)<newleft)){
                        list.style.left=parseInt(list.style.left)+speed+"px";   
                        setTimeout(go,interval);
                    }

                    else{

                        list.style.left=newleft+"px";
                        if(newleft>-590)
                        {
                            list.style.left= -5310+"px";
                        }
                        if(newleft<-5310)
                        {
                            list.style.left=-590+"px";
                        }
                        animated=false;
                    }   

                } go();
            }

            function showbutton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == "on"){
                        buttons[i].className = "";
                        break;
                    }
                }
                buttons[index - 1].className = "on";
            }
            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }
            //左箭头
            prev.onclick=function(){
                if(index==1){
                    index=8;
                }
                else{
                    index -=1;
                }
                showbutton();
                if(animated==false){
                    animate(590);
                }
            }
            //右箭头
            next.onclick=function(){
                if(index==8){
                    index=1;
                 }
                else{
                    index +=1;
                }
                showbutton();
                if(animated==false){
                animate(-590);
            }
            }
            //小圆点点击事件
             for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (animated) {
                        return;
                    }
                    if(this.className == "on") {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute("index"));
                    var change= -590 * (myIndex - index);

                    animate(change);
                    index = myIndex;
                    showbutton();
                }
            }

            container.onmouseover = stop;
            container.onmouseout = play;

            play();

        }

    </script>

一直报这个错误
Uncaught TypeError: Cannot set property 'onmouseover' of null
谢谢

  • 写回答

3条回答 默认 最新

  • qq_40056417 2018-10-30 08:11
    关注

    container有onmouseover方法吗?

    评论

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)