轮播图左右按钮和小圆点防止连点bug的设置方法和原理

轮播图左右按钮和小圆点防止连点bug的设置方法和原理

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="css/index.css">

</head>

<body>

<div id="wrap">

<div class="topAll">

<div class="top">

<div class="left">

<span>亲，请登录&nbsp;&nbsp;</span>

<span>免费注册&nbsp;&nbsp;</span>

<span>手机逛慕淘</span>

</div>

<div class="right">

<span>我的慕淘&nbsp;<img src="img/icon/21.png"></span>

<span>收藏夹&nbsp;<img src="img/icon/21.png"></span>

<span>商品分类</span>

<span>卖家中心&nbsp;<img src="img/icon/21.png"></span>

<span>联系客服&nbsp;<img src="img/icon/21.png"></span>

</div>

</div>

<div class="logo clearfloat">

<div class="logoImg">

<img src="img/logo.png">

</div>

<div class="logoInput">

<input type="text" placeholder="灵魂美食一元抢">

<input type="button" value="搜索">

</div>

<div class="shopCar">

<img src="img/icon/26.png">

<span>购物车</span>

<span>0</span>

<img src="img/icon/23.png">

</div>

</div>

</div>

<div class="nav">

<span>数码城</span>

<span>天黑黑</span>

<span>团购</span>

<span>发现</span>

<span>二手特价</span>

<span>名品汇</span>

</div>

</div>

<div id="wrapper">

<div class="con_banner">

<div class="list">

<div class="sort">

<img src="img/icon/18.png">

<span>商品分类</span>

</div>

<p>家用电器<span>></span></p>

<p>手机、运营、商数码<span>></span></p>

<p>电脑、办公<span>></span></p>

<p>家居、家具、家装、厨具<span>></span></p>

<p>男装、女装、童装、内衣<span>></span></p>

<p>化妆、清洁、宠物<span>></span></p>

<p>运动户外、钟表<span>></span></p>

<p>汽车、汽车用品<span>></span></p>

<p>母婴、玩具乐器<span>></span></p>

<p>食品、酒类、生鲜、特产<span>></span></p>

<p>医药保健<span>></span></p>

<p>图书、音像、电子书<span>></span></p>

<p>彩票、旅行、充值、票务<span>></span></p>

<p>理财、众筹、白条、保险<span>></span></p>

</div>

<div class="banner">

<div class="imgs">

<img src="img/focus-carousel/1.png">

<img src="img/focus-carousel/2.jpg">

<img src="img/focus-carousel/3.jpg">

<img src="img/focus-carousel/4.jpg">

<img src="img/focus-carousel/5.jpg">

<img src="img/focus-carousel/1.png">

</div>

<!-- 左按钮 -->

<a href="###" class="left"><img src="img/focus-carousel/pre2.png"></a>

<!-- 右按钮 -->

<a href="###" class="right"><img src="img/focus-carousel/pre.png"></a>

<!-- 系列点 -->

<ul class="dots">

<li class="active"></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

<div class="news">

<div class="news_list">

<div class="title clearfloat">

<span>慕快报</span>

<span>更多&nbsp;></span>

</div>

<p><span>[特惠]</span>&nbsp;精选图书每满150减50</p>

<p><span>[公告]</span>&nbsp;因广州图书仓搬仓升级配送延迟</p>

<p><span>[特惠]</span>&nbsp;爆款手机12期免息 抽奖赢电视</p>

<p><span>[公告]</span>&nbsp;广东、福建受台风影响配送延迟</p>

<p><span>[特惠]</span>&nbsp;大闸蟹领券满399减180</p>

</div>

<div class="list_icons">

<div><img src="img/icon/1.png"><p>话费</p></div>

<div><img src="img/icon/2.png"><p>机票</p></div>

<div><img src="img/icon/3.png"><p>电影票</p></div>

<div><img src="img/icon/4.png"><p>游戏</p></div>

</div>

<div class="list_icons">

<div><img src="img/icon/5.png"><p>彩票</p></div>

<div><img src="img/icon/6.png"><p>加油卡</p></div>

<div><img src="img/icon/7.png"><p>酒店</p></div>

<div><img src="img/icon/8.png"><p>火车票</p></div>

</div>

<div class="list_icons">

<div><img src="img/icon/9.png"><p>众筹</p></div>

<div><img src="img/icon/10.png"><p>理财</p></div>

<div><img src="img/icon/11.png"><p>礼品卡</p></div>

<div><img src="img/icon/12.png"><p>白条</p></div>

</div>

<div class="list_img">

<img src="img/ad.png">

</div>

</div>

</div>

</div>

</body>

</html>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script type="text/javascript" src="js/index.js"></script>

*{

margin: 0;

padding: 0;

}

/*清除浮动代码*/

.clearfloat:after{

display:block;

clear:both;

content:"";

visibility:hidden;

height:0

}

.clearfloat{

zoom:1

}

#wrap{

width: 100%;

background-color: #f3f5f7;

}

#wrap .topAll,#wrapper .con_banner{

width: 1200px;

margin: 0 auto;

}

/*top区*/

#wrap .top{

width: 100%;

height: 44px;

line-height: 44px;

font-size: 13px;

color: #4d555d;

border-bottom: 1px solid #cdd0d4;

}

.top .left{

float: left;

}

.top .left span:first-child{

margin-left: 15px;

color: red;

}

.top .right{

float: right;

}

.top .right span{

margin-right: 40px;

}

.top .right span:nth-child(3){

margin-right: 26px;

}

.top .right img{

width: 16px;

height: 16px;

position: absolute;

top: 15px;

}

/*logo区*/

#wrap .logo{

margin-top: 36px;

margin-bottom: 40px;

}

.logo .logoImg{

float: left;

}

.logoImg img{

width: 136px;

height: 48px;

margin-left: 15px;

}

.logo .logoInput{

float: left;

font-size: 0;

margin-left: 100px;

}

.logo .logoInput input:first-child{

width: 500px;

height: 40px;

padding-left: 5px;

vertical-align: top;

}

.logo .logoInput input:last-child{

width: 73px;

height: 44px;

color: #fff;

border: none;

background-color: #07111b;

}

.logo .shopCar{

float: right;

width: 160px;

height: 42px;

color: #fff;

font-size: 15px;

line-height: 42px;

margin-right: 15px;

background-color: #f01414;

}

.logo .shopCar img:first-child{

width: 16px;

height: 16px;

margin-left: 12px;

}

.logo .shopCar span:nth-child(2){

width: 70px;

padding: 0 14px 0 12px;

border-right: 1px solid #fff;

}

.logo .shopCar span:nth-child(3){

margin-left: 10px;

}

.logo .shopCar img:nth-child(4){

width: 16px;

height: 16px;

margin-left: 3px;

}

/*nav*/

#wrap .nav{

width: 100%;

height: 48px;

color: #fff;

line-height: 48px;

background-color: #07111b;

}

.nav span{

margin-right: 54px;

}

.nav span:first-child{

margin-left: 26%;

}

/*wrapper*/

#wrapper{

width: 100%;

}

.con_banner .list{

float: left;

width: 208px;

height: 566px;

margin-top: -54px;

background-color: #f01414;

}

.list .sort{

width: 100%;

height: 54px;

line-height: 54px;

background-color: #c81414;

}

.list .sort img{

width: 18px;

height: 18px;

margin-left: 20px;

vertical-align: middle;

}

.list .sort span{

color: #fff;

font-size: 14px;

margin-left: 8px;

vertical-align: middle;

}

.list p{

color: #fff;

font-size: 13px;

margin: 0 15px 19px;

}

.list p:nth-child(2){

margin-top: 10px;

}

.list p span{

float: right;

}

/*banner轮播图*/

.con_banner .banner{

position: relative;

float: left;

width: 730px;

height: 504px;

overflow: hidden;

margin: 8px 8px 0;

}

.con_banner .banner .imgs{

position: absolute;

width: calc(730px * 6);

height: 100%;

font-size: 0;

}

.banner .imgs img{

width: 730px;

height: 504px;

}

.banner .left,.banner .right{

position: absolute;

width: 16px;

height: 30px;

top: 0;

bottom: 0;

margin: auto;

}

.banner .left{

left: 20px;

}

.banner .right{

right: 20px;

}

.banner .dots{

position: absolute;

width: 100px;

height: 10px;

list-style: none;

left: 0;

right: 0;

bottom: 15px;

margin: auto;

display: flex;

justify-content: space-between;

}

.banner .dots li{

width: 10px;

height: 10px;

border: 1px solid #fff;

border-radius: 50%;

background-color: #858b92;

/*float: left;

margin-right: 8px;*/

}

.banner .dots .active{

width: 10px;

height: 10px;

border: 1px solid #858b92;

background-color: #fff;

}

/*news*/

.con_banner .news{

float: right;

width: 243px;

height: 504px;

margin-top: 8px;

border: 1px solid #d9dde1;

}

.con_banner .news .news_list{

width: 208px;

height: 160px;

padding: 16px;

border-bottom: 1px solid #d9dde1;

}

.news_list .title span:first-child{

float: left;

color: #f01414;

}

.news_list .title span:last-child{

float: right;

color: #93999f;

font-size: 9px;

margin-top: 3px;

}

.news_list p{

font-size: 12px;

margin-top: 12px;

color: #4d555d;

}

.news_list p span{

font-weight: bold;

}

.list_icons div{

float: left;

width: 24.6%;

height: 70px;

text-align: center;

border-right: 1px solid #d9dde1;

border-bottom: 1px solid #d9dde1;

}

.list_icons div:nth-child(4){

border-right: none;

}

.list_icons div img{

width: 22px;

height: 22px;

padding: 15px 0 2px;

}

.list_icons div p{

font-size: 12px;

}

.list_img{

width: 100%;

}

.list_img img{

width: 100%;

height: 98px;

}

$(document).ready(function(){

var oLeft = $('.left');

var oRight = $('.right');

var oImg = $('.imgs img');

var imgWidth = $('.banner').width();


//标记下一张要显示图片的下标

var _index = 0;

//防止连点

var flag = true;

//左箭头

oLeft.click(function(){

if(_index == 0){

_index = oImg.length - 1;

$('.imgs').css('left',-(oImg.length - 1) * imgWidth);

}

_index--;

selectPic(_index);

});

//右箭头

oRight.click(function(){

_index++;

selectPic(_index);

});

//导航切换

$('.dots li').click(function(){

_index = $('.dots li').index($(this));

selectPic(_index);

});

//鼠标移入移出

$('.banner').hover(function(){

//鼠标移入

clearInterval(timer);

},function(){

//鼠标移出

timer = setInterval(go,3000);

});

//自动行走

function autoGo(){

timer = setInterval(go,3000);

};

autoGo();

//自动行走函数

function go(){

_index++;

selectPic(_index);

}


//选择图片

function selectPic(num){

$('.dots li').eq(num).addClass('active').siblings().removeClass('active');

$('.imgs').animate({

left: -num * imgWidth,

},1000,function(){

//检查是否到最后一张

if(_index == oImg.length - 1){

_index = 0;

$('.imgs').css('left','0px');

$('.dots li').eq(0).addClass('active').siblings().removeClass('active');

}

})

}

})
慕盖茨9092533 2019-05-05
源自：项目：JQ实现瀑布流   5-2 作业题
0
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
bbbboom 回答被采纳获得+3积分 2019-05-08 10:43:22

兄弟，我昨天用的你的代码改了改，

连续点击图片轮换的速度越来越快是你使用jq中animate的bug.因为在动画执行完成之前这个右边的单击事件会叠加。使用清除定时器都取消不了

至于连续点击出现空白 你可以加我第一次给你发的那个判断条件写在右点击事件中就可以

如果你真的想实现没有这bug的效果，建议你换一个写法，用显示和隐藏，或者是css的动画能实现你想要的效果。

0
收起回答
bbbboom 2019-05-05 19:07:16

亲，我试了一下~
连续点击会出现空白的图片，这是你指的按个bug吗？

使用这个animate方法不行，检测不到你鼠标点击了几回，需要添加限制条件，

我在这里加了一个条件倒是不出来空白图片了,但是还是会有一些问题，你可以测试一下

http://img1.sycdn.imooc.com//climg/5ccec3d50001a57003650249.jpg

这个轮播使用隐藏和显示来实现更加简单哦~

这里有一个链接不错，是解决js实现轮播图无缝轮播的，你可以看一下http://www.cnblogs.com/linqb/p/9375197.html


0
收起回答
  • 提问者 慕盖茨9092533 #1
    老师,我说的bug是连续点击出现的空白页面和出现的不均匀跳转，正常是连续点击在几秒内是无效的，以实现一个正常的均匀轮播画面。我在原生处理过这个问题，jq用的不熟，你给的例子能看明白，就是不知道怎么运用到我写的jq的例子上，老师帮我修改一下
    2019-05-07 14:29:18
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么停止的时候点击成播放，图标要换成停止的呢
16 0 7
请老师看下，关于两个右按钮的问题。
14 0 4
轮播图上下按钮 点击问题
229 0 5
轮播图圆点中间选中，能禁止吗？
21 0 6
轮播图里的日期设置
26 0 3

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师