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

查看演示立即下载

插件描述：简单的jq逻辑，方便引用，易看懂，兼容性好

更新时间：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)
    })
})

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery左侧导航，三级菜单(原创)
下一个特效： jQuery四边伸缩可拖拽