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 Python时间序列如何拟合疏系数模型
  • ¥15 求学软件的前人们指明方向🥺
  • ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接
  • ¥15 MCNP里如何定义多个源?
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控:网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 STM32驱动继电器