2 zaxlctjs zaxlctjs 于 2015.07.26 17:12 提问

JS利用定时器做的滑块效果,有一个小bug,自己找不到,求教下,谢谢大家
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航条推箱子</title>
<style type="text/css">
*{margin:0; padding:0;}
.main{background:#ccc; width:100%; height:42px;}
nav{width:950px; height:42px; position:relative; top:0; left:0; margin:auto; background:black;}
ul{position:absolute; left:0; top:6px;}
li{list-style:none; width:120px; background:black; float:left; margin:0 5px;
   text-align:center; color:white; font:14px/30px 黑体; z-index:2;}
li:hover{color:lightseagreen;}
#huakuai{width:130px; height:6px; position:absolute; left:0; top:36px;
         background:url('http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA') no-repeat;}
</style>
</head>
<body>
<div class="main">
    <nav>
        <ul>
            <li onmouseover="move(0)">首页</li>
            <li onmouseover="move(1)">所有产品</li>
            <li onmouseover="move(2)">男装</li>
            <li onmouseover="move(3)">女装</li>
            <li onmouseover="move(4)">新款</li>
        </ul>
        <div id="huakuai" style="left:0px;"></div>
    </nav>
</div>
</body>
<script type="text/javascript">
var tt=document.getElementById('huakuai');
function move(a){
    if(parseInt(tt.style.left)>(a*130)){
        timer=window.setInterval(function(){moveLeft(a*130);},30);
    }else if(parseInt(tt.style.left)<(a*130)){
        timer=window.setInterval(function(){moveRight(a*130);},30);
    }
     else{}
}
function moveRight(s1){
    var dd=parseInt(tt.style.left)+15;
    if(dd>=s1){
       dd=s1;
       window.clearInterval(timer);
    }
    tt.style.left=dd+'px';
}
function moveLeft(s2){
    var m=parseInt(tt.style.left)-15;
    if(m<=s2){
        m=s2;
        window.clearInterval(timer);
    }
    tt.style.left=m+'px';
}
</script>
</html>

这是定时器的一个小练习,鼠标放在不同的li上,下面的滑块会跟着移动
但是当鼠标来来回回在不停的li上移动时, 会出现bug,
就是滑块突然会在某一个位置突然停下,鼠标再放到其他的li上,滑块不动了
不知道代码哪里出错了

不好意思代码有点长,耽误大家的时间了,
新手自学JS遇到问题只能靠这里的朋友啦
谢谢

3个回答

qq_26349351
qq_26349351   2015.07.28 10:40
已采纳

<!DOCTYPE html>



导航条推箱子
<br> *{margin:0; padding:0;}<br> .main{background:#ccc; width:100%; height:42px;}<br> nav{width:950px; height:42px; position:relative; top:0; left:0; margin:auto; background:black;}<br> ul{position:absolute; left:0; top:6px;}<br> li{list-style:none; width:120px; background:black; float:left; margin:0 5px;<br> text-align:center; color:white; font:14px/30px 黑体; z-index:2;}<br> li:hover{color:lightseagreen;}<br> #huakuai{width:130px; height:6px; position:absolute; left:0; top:36px;<br> background:url(&#39;<a href="http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#x27;">http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#39;</a>) no-repeat;}<br>

  • 首页
  • 所有产品
  • 男装
  • 女装
  • 新款

var tt=document.getElementById('huakuai'); var timer = null; function move(a){ clearInterval(timer) if(parseInt(tt.style.left)>(a*130)){ timer=window.setInterval(function(){ moveLeft(a*130); },30); console.log(tt.style.left) console.log(a) }else if(parseInt(tt.style.left)<(a*130)){ timer=window.setInterval(function(){ moveRight(a*130); },30); } else{} } function moveRight(s1){ var dd=parseInt(tt.style.left)+15; if(dd>=s1){ dd=s1; window.clearInterval(timer); } tt.style.left=dd+'px'; } function moveLeft(s2){ var m=parseInt(tt.style.left)-15; if(m<=s2){ m=s2; window.clearInterval(timer); } tt.style.left=m+'px'; }


定时器还没关呢 移动之后又开了一个 冲突了啊 定时器先关再开

zaxlctjs
zaxlctjs 不好意思采纳晚了
接近 3 年之前 回复
github_30109321
github_30109321   2015.07.26 20:42

这种东西为什么不用css的动画?

zaxlctjs
zaxlctjs 在学js嘛
接近 3 年之前 回复
qq_26349351
qq_26349351   2015.07.28 10:40

<!DOCTYPE html>



导航条推箱子
<br> *{margin:0; padding:0;}<br> .main{background:#ccc; width:100%; height:42px;}<br> nav{width:950px; height:42px; position:relative; top:0; left:0; margin:auto; background:black;}<br> ul{position:absolute; left:0; top:6px;}<br> li{list-style:none; width:120px; background:black; float:left; margin:0 5px;<br> text-align:center; color:white; font:14px/30px 黑体; z-index:2;}<br> li:hover{color:lightseagreen;}<br> #huakuai{width:130px; height:6px; position:absolute; left:0; top:36px;<br> background:url(&#39;<a href="http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#x27;">http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#39;</a>) no-repeat;}<br>

  • 首页
  • 所有产品
  • 男装
  • 女装
  • 新款

var tt=document.getElementById('huakuai'); var timer = null; function move(a){ clearInterval(timer) if(parseInt(tt.style.left)>(a*130)){ timer=window.setInterval(function(){ moveLeft(a*130); },30); console.log(tt.style.left) console.log(a) }else if(parseInt(tt.style.left)<(a*130)){ timer=window.setInterval(function(){ moveRight(a*130); },30); } else{} } function moveRight(s1){ var dd=parseInt(tt.style.left)+15; if(dd>=s1){ dd=s1; window.clearInterval(timer); } tt.style.left=dd+'px'; } function moveLeft(s2){ var m=parseInt(tt.style.left)-15; if(m<=s2){ m=s2; window.clearInterval(timer); } tt.style.left=m+'px'; }


定时器还没关呢 移动之后又开了一个 冲突了啊 定时器先关再开

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
我的项目5 计时器 定时器 JS实现图片运动
计时器 定时器 JS实现图片运动
JavaScript小实例——制作页面定时弹出广告
一、学习js中的获得Dom元素、调用方法和使用setTimeout()方法。 二、实例 1、先在页面中放入广告图片,display属性设置为none,让图片隐藏。 2、创建js方法获取图片对象 getElementsByClassName("class属性值") 返回带有指定类名的对象集合。 getElementById("id值") 返回对拥有指定 id 的第一个对象的引用
一个轮播图小demo ---之js定时器的妙用
直接上demo  html文件         huadong
首先谢谢大家的关注!
首先谢谢大家的关注! 谢谢大家! 谢谢大家!! 谢谢大家!!! 重要的事情要说好几遍~ 首先做个自我介绍吧 中文名字是乔浩磊  英文名字是feiyu~ 哈哈当个玩笑就好了~ 现就读于河南某高校 正在完成小时候的梦想——步入IT 行业 本人从小酷爱计算机,接触电脑时间比较早打过无数游戏用过无数电脑系统当然~~也玩坏过无数次系统 想在大学期间利用空闲时间积
效果超棒的 jQuery 特效
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果。这篇文章挑选了8个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平。 1、学习使用 jQuery 制作超炫的快门效果的作品集。 在线演示     源码下载   2、这个实例教程将介绍如何使用
使用js的定时器setTimeout()实现加载进度条效果
效果图如下:
收集大家的想法,谢谢参与。。
  我们刚上了软件工程,老师让我们这组做个“文件检索系统”,我想用软件工程的角度去做这个,但是我觉得单纯做一个类似于windows的文件搜索,用处不是很大,用户的对这个需求不是很高。。。所以希望大家帮我想个运用到这个功能的项目,同时用户比较需求这个。。 希望大家给点建议,拜谢。。。
写了一个定时器类,以方便应用
/** * 执行计划任务 author:littlehow * 2015-04-25 * @param time --执行时间间隔或者滞后时间 * @param fname --函数名称 * @param loopflag --循环次数 -1代表无限循环 0代表不循环(即timeout) 其余正数代表循环次数 */ function Timer(time, fn
css+js 原生滑动条制作
我参考了某位大佬的网页代码,然后自己写了性能优异的滑动条UI; 1. 写的几个滑动条样式如下: 2.完全可以增加border-radius等属性,关键是js控制鼠标的设计。用到mousedown,mousemove,mouseup事件,虽然可能比较容易,但是不注意细节的话,滑动条手感会很差。 3.以下代码是普通代码风格:<!DOCTYPE html> <html>
单片机开发板原理图及PCB
自己做的开发板,供参考下,有原理图,元器件库及封装库,大家看看有没错误,指教下