轮播图原创

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

 50829  348  查看评论 (25)
分享到微信朋友圈
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,// 左右控制
});
相关插件-幻灯片和轮播图

兼容ie7十来种3d轮播切换效果

兼容ie7十来种3d轮播切换效果,支持触摸切换,用代码给你flash的感觉
  幻灯片和轮播图
 39033  445

原生js轮播图插件Image Slider

原生js轮播图插件Image Slider 提供8种轮播特效,轻量级只有16k.
  幻灯片和轮播图
 41025  358

jQuery 3D轮播图

自适应屏幕的3D轮播图加炫酷背景
  幻灯片和轮播图
 58111  519

迅雷首页官网多图焦点图特效

模拟迅雷首页的幻灯片切换效果
  幻灯片和轮播图
 37426  349

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

    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吗!!!搞到我浪费了 好多时间,请修改一下!但是还是谢谢你分享出来!!! 回复
    全靠演技。 0
    2016/2/15 11:02:05
    用在我们网站上了,谢谢楼主! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复