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

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

 12586  112  查看评论 (7)
分享到微信朋友圈
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径向SVG滑块轮播

简单反应迅速的滑块,与采用 SVG clipPath 和遮罩元素径向过渡效果。
  幻灯片和轮播图
 20995  302

魔兽世界轮播图

很简单的一款小插件 希望大家喜欢
  幻灯片和轮播图
 19534  220

jQuery响应式全屏轮播插件royalslider.js

全屏轮播插件可放大缩小,支持触控,移动端使用,本插件为收费插件,特意整理出来的
  幻灯片和轮播图
 38489  298

可嵌入图片全屏滑动

可嵌入图片视频jQuery全屏滑块
  幻灯片和轮播图
 23813  361

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

    我家的猫咪叫英俊 0
    2020/6/9 19:43:18
    向左向右到最后一张时,需要点击两下,才能进行下去 回复
    鹤仙人 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
    左右滚动的那种效果有哪一个方法? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复