最全轮播图---jq

轮播图
实现功能
1.自动轮播
2.点击小圆点和箭头实现跳转
3.防止多次点击造成的bug
4.进入进出定时器功能
5.bug修复
6.老铁给个赞呗

其他想法
1.可以试试用stop来实现防点击,但是这里没用
2.delay也能防点击

代码如下


$(function () {
    var count=0
    var isclick=1
    var imgList=$('.imgbox li')
    var dotList=$('.dot>ul li')
    imgList.eq(0).show().siblings().hide()
    dotList.eq(0).addClass('act').siblings().removeClass()
     //。。。。。。。。。。time
      var timeId=setInterval(function () {
        count++
        if(count>imgList.length-1){
            count=0
        }
        imgList.eq(count).fadeIn().siblings().fadeOut()
        dotList.eq(count).addClass('act').siblings().removeClass()

      },1000)
      //。。。。。。。。。。。mouseenter
      $('.wrapper').mouseenter(function () {
          clearInterval(timeId)
  })
      //。。。。。。。。。。。。mouseleave
      $(".wrapper").mouseleave(function () {
    timeId=setInterval(fn1,1000)
         })
      //。。。。。。。。next
         $('.next').click(function () {
          if(isclick){//。。。。。。。。定时器解决快速点击问题
            isclick=0
            count++
            if(count==imgList.length){
                count=0
            }
            imgList.eq(count).fadeIn().siblings().fadeOut()
            dotList.eq(count).addClass('act').siblings().removeClass()
            setTimeout(function () {
              isclick=1
              },1000)
          }
          })
     //。。。。。。。。。。last
      $('.last').click(function () {
            if(isclick){
              isclick=0
              count--
          if(count==-1){
              count=imgList.length-1
          }
          imgList.eq(count).fadeIn().siblings().fadeOut();
          dotList.eq(count).addClass('act').siblings().removeClass()
          setTimeout(function () {
            isclick=1
            },1000)
            }
          })
     //。。。。。。。。。。dot 
          dotList.click(function () {
            count=dotList.index(this)
            imgList.eq(count).fadeIn().siblings().fadeOut();
          dotList.eq(count).addClass('act').siblings().removeClass()
            })
    //。。。。。。。。。。。function 封装
  function fn1() {
    count++
  if(count>imgList.length-1){
      count=0
  }
  imgList.eq(count).fadeIn().siblings().fadeOut()
  dotList.eq(count).addClass('act').siblings().removeClass()
  }
})
//点击事件不要放在定时器里面,会出bug乱跳
//有箭头的时候,注意移入移出的盒子时最外面的盒子,不然会有bug
//jq中ture居然不能用,用1和0代替

页面代码如下
在这里插入图片描述
代码不易,来个赞呐

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值