一个自己写的用jQuery的轮播图，点击速度过快会出bug

qq_33440621 2016-09-21 05:09:22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src = "http://code.jquery.com/jquery-1.8.3.min.js "></script>
<style type="text/css">
*{ margin: 0; padding: 0;}
img{ display: block;}
#container{ width: 1920px; height: auto; margin: 50px auto;}
#container .banner{ width: 1920px; height: 420px; position: relative; overflow: hidden;}
#container .banner .center{ width: 818px; height: 418px; float: left;overflow: hidden; position: relative; border:1px solid #ccc}
#container .banner .center ul{ width: 5740px; height:420px; position: absolute; left:0;}
#container .banner .center ul li{ list-style: none; float: left; width:818px;
height:418px; border:1px solid red;}
.left_btn, .right_btn{
width: 70px;
height: 70px;
background: red;
position: absolute;
top: 175px;
}
.left_btn{
left: 0;
}
.right_btn{
right: 0;
}
.bottom_btn{
width: 220px;
height: 14px;
background-color: #000;
opacity: 0.5;
filter: alpha(opacity = 50);
border-radius:10px 10px 10px 10px;
padding: 3px 40px;
margin-top: 400px;
margin-left: 300px;
}
.bottom_btn div{
width: 15px;
height: 15px;
border-radius: 50%;
float: left;
margin-left: 20px;
background-color: #fff;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div class="banner">
<div class="center">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left_btn"></div>
<div class="right_btn"></div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var lis = $("li");
var ul = $("ul");
var timer;
var count = 0;
move();
$(".center").mouseenter(function(){
clearInterval(timer);
$(".left_btn").css({"backgroundPosition":"-72px 0","display":"block"});
$(".right_btn").css({"backgroundPosition":"-72px -72px","display":"block"});
}).mouseleave(function(){
move();
$(".left_btn").css({"display":"block"});
$(".right_btn").css({"display":"block"});
});

function move(){
timer = setInterval(function(){
next();
},3000);
}
//-----------------point----------------------------
/* $(".point").click(function(){
count = $(this).index()-1;
ul.animate({ left : -count * 820 - 820 + "px"},"slow");
})*/
//-----------------left_btn上一张图片---------------
$(".left_btn").mouseover(function(){
$(".left_btn").css({"backgroundPosition":"0px 0px"});
}).click(function(){
if(count == 0){
count = 6;
ul.css("left",-count * 820 + "px");
}
before();
});
//-----------------rigth_btn下一张图片---------------
$(".right_btn").mouseover(function(){
$(".right_btn").css({"backgroundPosition":"0px -72px"});
}).click(function(){
if(count == 6){
count = 0;
ul.css("left", "0px");
}
next();
});
//-----------------下一张图片---------------
function next(){
//alert(parseInt($(ul).css("left")))
ul.animate({ left : -count++ * 820 - 820 + "px"},"slow")
}
//-----------------上一张图片---------------
function before(){
//alert(parseInt($(ul).css("left")))
ul.animate({ left : -count-- * 820 + 820 + "px"},"slow");
}
})
</script>
...全文
1451 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
everccnight 2016-10-02
  • 打赏
  • 举报
 回复
加个stop（）这样 每次 点击前就取消上一次的事件 就不会出现那个bug了
qq_33440621 2016-09-30
  • 打赏
  • 举报
 回复 

  ul.css("left",-count * 820  + "px");
搞定了，将这个换成 

ul.animate({left:-count * 820  + "px"},0);
cossin2015 2016-09-24
  • 打赏
  • 举报
 回复
为什么不用jquery animation功能 var down = true; 只有当down = true动画才能开始 ..... start: function(pro){ down = false; }, complete: function() { down = true; } 点击速度再快，都没关系。
业余草 2016-09-22
  • 打赏
  • 举报
 回复
建议你看看插件源码？ 和自己的对比一下 www.xttblog.com
逝_去_的_光_阴 2016-09-21
  • 打赏
  • 举报
 回复
引用 6 楼 qq_33440621 的回复:
这个是在做轮播图下面的1,2,3,4,5,6用的，所以注释了

var isMoving=false;
        var count = 0;
        var lis = $("li");
        var ul = $("ul");
        var timer;
    $(function(){
        move();
        $(".center").mouseenter(function(){
            clearInterval(timer);
            $(".left_btn").css({"backgroundPosition":"-72px 0","display":"block"});
            $(".right_btn").css({"backgroundPosition":"-72px -72px","display":"block"});
        }).mouseleave(function(){
            move();
            $(".left_btn").css({"display":"block"});
            $(".right_btn").css({"display":"block"});
        });

        function move(){
            timer = setInterval(function(){
            	if(!isMoving){
                	next();
            	}
            },3000);
        }
        //-----------------point----------------------------
        /*  $(".point").click(function(){
         count = $(this).index()-1;
         ul.animate({ left : -count * 820 - 820 + "px"},"slow");
         })*/
        //-----------------left_btn上一张图片---------------
        $(".left_btn").mouseover(function(){
            $(".left_btn").css({"backgroundPosition":"0px 0px"});
        }).click(function(){
            if(count == 0){
                count = 6;
                ul.css("left",-count * 820  + "px");
            }else{
            before();
            	
            }
        });
        //-----------------rigth_btn下一张图片---------------
        $(".right_btn").mouseover(function(){
            $(".right_btn").css({"backgroundPosition":"0px -72px"});
        }).click(function(){
            if(count == 6){
                count = 0;
                ul.css("left", "0px");
            }else{
            next();
            	
            }
        });
    })
        //-----------------下一张图片---------------
        function next(){
            if(!isMoving){
                isMoving=true;
                ul.animate({ left : -(++count * 820) + "px"},"slow",function(){isMoving=false;});
            }
        }
        //-----------------上一张图片---------------
        function before(){
        	if(!isMoving){
                isMoving=true;
                ul.animate({ left : -(--count * 820) + "px"},"slow",function(){isMoving=false;});
            }
        }
你试试这个呢，你的定时器产生了一定影响
逝_去_的_光_阴 2016-09-21
  • 打赏
  • 举报
 回复
引用 4 楼 qq_33440621 的回复:
你输出一下count的值，看一下吧 试试 -count-- * 820 + 820 改成-(--count* 820)
qq_33440621 2016-09-21
  • 打赏
  • 举报
 回复
引用 5 楼 u011376884 的回复:
[quote=引用 4 楼 qq_33440621 的回复:]
你的count 值有改动吗？$(".point").click这方法让你注释了[/quote] 这个是在做轮播图下面的1,2,3,4,5,6用的，所以注释了
逝_去_的_光_阴 2016-09-21
  • 打赏
  • 举报
 回复
引用 4 楼 qq_33440621 的回复:
你的count 值有改动吗？$(".point").click这方法让你注释了
qq_33440621 2016-09-21
  • 打赏
  • 举报
 回复
引用 2 楼 u011376884 的回复:

var isMoving=false;
 function before(){
            if(!isMoving){
                isMoving=true;
                ul.animate({ left : -count-- * 820 + 820 + "px"},"slow",function(){isMoving=false;});
            }
        }
加上判断值，判断一下是否正在移动就行了
没有用，当点击快了还是会出现bug，打断点会发现，当点击过快时（也就是说运动还没有做完的时候再次点击，刚好在最后一张图片的时候），ul.css("left", "0px");这个css（）方法并没有执行；列如在ul.css("left", "0px");后加alert（“ok”）;运行的时候并不弹出ok;
快跑蜗牛哥 2016-09-21
  • 打赏
  • 举报
 回复
逝_去_的_光_阴 2016-09-21
  • 打赏
  • 举报
 回复 

var isMoving=false;
 function before(){
            if(!isMoving){
                isMoving=true;
                ul.animate({ left : -count-- * 820 + 820 + "px"},"slow",function(){isMoving=false;});
            }
        }
加上判断值，判断一下是否正在移动就行了
原生jQuery轮播图.html，可放入循环
原生jQuery编写轮播图，自己封装的的一个，只要引入一个类似于jQuery.min.js这样的文件驱动即可，简单易懂，上面的图片自己下载几张，改改路径，我引入了一个jquery-3.4.1.min.js的文件驱动，上网搜或者官网上下载都可以，找朋友发给你也行，这个轮播图刚进入的时候自行播放，点击左键上一张图片，点击右键下一张图片，鼠标悬停的时候看轮播图停止播放，鼠标离开轮播图继续播放，本轮播图很简单，也有一点点的小bug，一般人看不出来，不影响正常使用，很多地方都通用，原生jQuery还是很简单的，虽然现在很多都用vue或者react，但是有的也会继续使用jQuery，语法什么的都比较通俗易懂，写代码很简单，逻辑清晰了，思路清晰了，就好办了，大脑一定要清醒，代码格式要整齐，原生jQuery不难，这样的轮播图只是一个固定的，真正放到项目里面，要自己去改里面的值，调接口上面的相信大家都很厉害，写在方法里面，怎么实现都好写，我用的最多的就是自己写一个循环，图片就是后端传过来的数据，vscode，hbuilder，idea都能用，不是为了赚钱，只是为了大家一起开源，给祖国争光！哈哈哈哈哈哈哈
ASP.NET写的轮播图代码页面
ASP.NET写的轮播图代码页面，可以参考这个写法设计自己的asp.net页面或者网站，可以用于实验或者课程报告等
JqueryMobile + photoswipe4.1.1 实现图片轮播
photoswipe4系列以前有一些BUG，比如不支持手势缩放，必须用第三方插件，但是会经常出问题。 为了解决这些问题，做了一个DEMO，利用photoswipe4.1.1 + JQM 实现了图片轮播。 同时也修改了一些photoswipe4.1.1的源码和样式，供参考。 Demo花了半天精力才解决。 Tips:图片最好不要大于2000像素，推荐1800以内，因photoswipe存在一些BUG依旧没解决。android系统出现问题不多，多少是IOS系统的浏览器问题~~ 有问题联系我，邮箱hahalgj@126.com
一款自己编写的jquery相册
自己写的，细心的童鞋可以发现一点点bug，不过拿来练练手还是不错啦。不想改的话也可以直接用，高手就不用下了，对您来说肯定是小菜了。小弟在此就不卖弄了
轮播图的实现
用面向对象的方式实现对图片的轮播，功能完善。没有bug
HTML5

39,118

社区成员

5,568

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章