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

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

 15297  148  查看评论 (9)
分享到微信朋友圈
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响应式幻灯片

jquery响应式幻灯片
  幻灯片和轮播图
 38192  298

jquery适合风景展现的图片切换特效

图片切换,带有标题和缩略图,效果很好,修改非常简单,兼容各大浏览器
  幻灯片和轮播图
 26141  271

简洁优雅,与众不同的轮播图插件

代码简洁优雅,与其他插件不同,包括各样式轮播图
  幻灯片和轮播图
 25886  349

支持手机触摸滑动图片轮播

支持手机触摸滑动图片幻灯片轮播切换代码
  幻灯片和轮播图
 69810  821

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

    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
        用起来挺好的

    回复
    鹤仙人 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
    只是想下个源码 回复
    清风是你 0
    2020/1/14 12:04:39
    左右滚动的那种效果有哪一个方法? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复