为了账号安全,请及时绑定邮箱和手机立即绑定

图片滑过后是空白,然后才是另一张图片??为什么??

<link rel="stylesheet" href="header.css" ></link>
<script>
window.onload = function(){
    //获取各个标签
    var slide = document.getElementById("slide");
    var list = document.getElementById("list");
    var buttons = document.getElementById("buttons").getElementsByTagName("span");
    var next = document.getElementById("next");
    var prev = document.getElementById("prev");
    
    var index = 1;
    var animated = false;
    //原点按钮样式变换
    function showButtons(){
        for (var i = 0;i<buttons.length;i++){
            if(buttons[i].className =='on'){
                buttons[i].className = '';
                break;
            }
        }
        buttons[index-1].className = 'on';
        
    }
    //点击前进按钮
    next.onclick = function(){
        if(index==3){
            index =1;
        }
        else{
            index +=1;
        }
        showButtons();
        if(animated == false){
            Move(-1899);
        }//list.style.left只能获取在标签内的style ,放在css中则不能
    }
    //点击后退按钮
    prev.onclick = function(){
        if(index==0){
            index = 3;
        }
        else{
            index =index-1;
        }
        showButtons();
        if(!animated){
            Move(1899);
        }
    }
    //点击原点按钮滑动图片
    for(var i = 0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            if(this.className == 'on'){
            return;
            }
            var myIndex = parseInt(this.getAttribute('index'));
            var offset = -1899 * (myIndex - index);
            
            index = myIndex;
            showButtons();
            if(!animated){
                Move(offset);
            }
        }
    }
    //图片定时滚动
    slide.onmouseover = iStop();
    slide.onmouseout = play();
    play();
}

function Move(offset){
    var newLeft = parseInt(list.style.left) + offset;
    var time = 300;//位移总时间;
    var interval = 1;//位移间隔时间
    var speed = offset/(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{
            animated = false;
            list.style.left = newLeft + 'px';
            list.style.left = newLeft + 'px';
            if(newLeft < -7596){
              list.style.left =  0+ 'px';
            }
            if(newLeft> 0){
            list.style.left = -7596 + 'px';
            }
         }
    
    }
    go();
}

function play(){
    var timer = null;
    timer = setInterval(function(){
        next.onclick();
        },3000);
    }
function iStop(){
    clearInterval(timer);
    }
</script>
</head>

<body>
<div id="header">
</div>
<div id="wrap">
<div id="head">
<!--滑动的图片 -->
<div id="slide">
  <div id="list" style="left:0px;">
    <img src="images/60M58PICWFD_1024.jpg" width="1899" height="625" />
    <img src="images/8952533_120845629000_2.jpg" width="1899" height="625" />
    <img src="images/full_562_11922.jpg" width="1899" height="625" />
    <img src="images/60M58PICWFD_1024.jpg" width="1899" height="625" />
    <img src="images/8952533_120845629000_2.jpg" width="1899" height="625" />
  </div>
  <div id="buttons">
     <span index="1" class="on"></span>
     <span index="2"></span>
     <span index="3"></span>
  </div>
  <a href="javascript:;" class="arrow" id="prev"> < </a>
  <a href="javascript:;" class="arrow" id="next"> > </a>
  <!-- more equipment adapter -->
</div><!--slide -->

</div><!-- head -->

ps:我把图片换成全屏滚动了

求大神帮忙

正在回答

2 回答

我的是 五张图,前四个显示。第五个显示空白。后来发现是宽度设了五张图,没有加两张辅助图的 

0 回复 有任何疑惑可以回复我~

我不知道我有没有理解错你的意思,不过你的按钮背景颜色的切换应该是有问题的。      

  if(index==0){
            index = 3;
        }
        else{
            index =index-1;
        }

点击后退时,当 index = 1,此时执行 减 1 ,会变成 0 ,然后执行 showButton 函数, buttons[index - 1] 也就是 buttons[-1],此时没有按钮会有背景颜色,当再点击后退,index = 0,才会执行 index = 3 语句,然后。。。你懂的

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

图片滑过后是空白,然后才是另一张图片??为什么??

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信