jq全兼容自适应宽度图片轮播(新手适用)

所属分类:媒体-幻灯片和轮播图

 24073  213  查看评论 (14)
分享到微信朋友圈
X
jq全兼容自适应宽度图片轮播(新手适用) ie兼容6

更新时间:2019-12-10 00:45:09

全屏自适应轮播

$(function() {
    var num = 0;
    $('.ui-controls ul li').click(function() {
        $(this).addClass('current').siblings().removeClass('current');
        $('.banner-main-img ul li').eq($(this).index()).fadeIn(300);
        $('.banner-main-img ul li').eq($(this).index()).siblings().fadeOut(300);
        num = $(this).index();
    })
    var myfn = function() {
        $('.ui-controls ul li').eq(num).addClass('current').siblings().removeClass('current');
        $('.banner-main-img ul li').eq(num).fadeIn(300);
        $('.banner-main-img ul li').eq(num).siblings().fadeOut(300);
    }
    $('.ui-next').click(function() {
        num++;
        if (num > 4) {
            num = 0;
        }
        myfn();
    })
    $('.ui-prev').click(function() {
        num--;
        if (num < 0) {
            num = 4;
        }
        myfn();
    })
    //基本定时器功能
    var timer01 = null;
    timer01 = setInterval(function() {
        num++;
        if (num > 4) {
            num = 0;
        }
        myfn();
    }, 3000)
    //鼠标移入/暂停定时器
    $('.banner-main').hover(function() {
        clearInterval(timer01);
    }, function() {
        timer01 = setInterval(function() {
            num++;
            if (num > 4) {
                num = 0;
            }
            myfn();
        }, 3000)
    })
})

都是新手, 有什么问题, 可以相互交流。

相关插件-幻灯片和轮播图

jQuery轮播图/内容滑块插件Quake Slider

jQuery轮播图插件Quake Slider提供了24种过渡效果。
  幻灯片和轮播图
 33542  408

JS超炫切换效果焦点图代码

超炫切换效果焦点图代码,多种切换方式,兼容性好。
  幻灯片和轮播图
 39084  387

简单的jquery轮播图插件

简单的jquery轮播图插件,方便易懂
  幻灯片和轮播图
 43181  364

jQuery实现弹性TN3相册代码

jQuery实现弹性TN3相册代码
  幻灯片和轮播图
 35896  332

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    别影响我干饭 0
    2023/5/31 10:41:24
    只是想下载个源码
    回复
    红星 0
    2022/10/14 11:26:07
    只是想下个源码 回复
    Oops 0
    2022/6/29 13:39:00
    只是想下个源码 回复
    Oops 0
    2022/6/29 13:38:43
    只是想下个源码 回复
    BUTU 0
    2020/12/14 21:35:23
    我家的猫咪叫英俊 0
    2020/6/9 19:43:18
    向左向右到最后一张时,需要点击两下,才能进行下去
        远在天边ぃ1
        2020/12/23 10:00:36

        改scroll.js里的

        $('.ui-next').click(function() {
            num++;
            if (num > 2) {
                num = 0;
            }
            myfn();
        })
        $('.ui-prev').click(function() {
                    num--;
                    if (num < 0) {
                        num = 2;
                    }
                    myfn();
                }

        我的是三张banner 改的2
        用起来挺好的

        Ektu0
        2021/11/15 17:27:27
        原来如此,看懂了谢谢啦!👍
    回复
    鹤仙人 0
    2020/6/8 18:52:49
    只是想下个源码 回复
      0
    2020/6/1 13:33:20
    只是想下个源码
        心碎了,梦醒了!!!0
        2020/6/10 10:43:08
        同样的
    回复
    珍贞 0
    2020/5/15 10:45:57
    这种效果用的地方多 回复
    vegas1 0
    2020/4/27 17:16:19
    只是想下个源码 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复