轮播图原创

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

 53019  354  查看评论 (26)
分享到微信朋友圈
X
轮播图原创 ie兼容7

更新时间:2017/9/22 下午4:50:53

更新说明:修改连续点击出现的问题,感谢网友ヅ羽ぷ寒灬提供的解决方案


简单除暴:基本参数

$('#slider').Slider({
  isAuto:        true,// 自动播放
  transTime:     3000,// 自动播放间隔
  animateSpeed:  1000,//  动画速度
  sliderMode:    'slide',// 类型//'slide | fade'
  pointerControl: true,// 指示器开关
  pointerEvent:  'click',// 指示器类型//'hover' | 'click'
  arrowControl:  true,// 左右控制
});
相关插件-幻灯片和轮播图

仿英雄杀游戏官网幻灯片JS代码

仿英雄杀游戏官网幻灯片JS代码
  幻灯片和轮播图
 36560  431

高大上的全屏自适应的banner图

这是一个自适应的全屏banner,可以用来做网站的banner效果非常好,容易修改,代码简洁,容易修改。
  幻灯片和轮播图
 55850  425

js轮播图插件slider

支持鼠标滑动以及移动端手势滑动的幻灯片播放插件
  幻灯片和轮播图
 35234  419

三种常见轮播

三种常见轮播(左右,上下,渐变)
  幻灯片和轮播图
 60741  396

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

    zhyingking 0
    2023/7/21 15:22:18
    图片有边线,能去掉嘛? 回复
    Dylan 0
    2018/7/19 17:31:00
    鼠标悬停没有啊
        oops ;)0
        2018/9/7 17:17:01
        给#slider加个onmousemovein
    回复
    一切从简 0
    2017/12/22 9:46:24

    我是作者, 先说明下,这个是我还是很菜的时候写的,现在建议不要用,没有空优化...

    回复
    笨小孩 0
    2017/12/20 13:36:45

    可以不让图片倒退回去播放吗

        山大路之狼0
        2018/3/20 14:42:14
        加上appendTo()
    回复
    公子肆 0
    2017/11/9 14:06:15

    如何自适应手机端

    回复
    ヅ羽ぷ寒灬 3
    2017/9/22 16:33:22
    $slider.on('click', '.slider-pointer > li', function(event) {
        if (currentIndex != $(this).index()) {
            sliderFun.sliderPlay($(this).index())
        }
    })
    
    if (index > currentIndex) {
        $sliderWrap.animate({
            left: '-=' + Math.abs(index - currentIndex) * sliderWidth + 'px'
        }, settings.animateSpeed, function() {
            sliderFun.stop();
            isAnimating = false;
            sliderFun.autoPlay()
        })

    已经处理两个动画叠加问题

    回复
    ヅ羽ぷ寒灬 0
    2017/9/22 16:32:01

    处理两个动画叠加问题

    回复
    Rode 0
    2017/4/30 10:21:43

    请问 怎么向图片添加点击事件并跳转呢?

        oops ;)0
        2018/9/7 16:21:45
        老哥你给它包个a标签
    回复
    崤っ?った 0
    2016/12/9 16:12:11
    火狐浏览器加载不出图片求解决 回复
    LikSun 0
    2016/3/11 10:03:35
    你知道你这个轮播图会影响很多其他JQuery吗!!!搞到我浪费了 好多时间,请修改一下!但是还是谢谢你分享出来!!! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复