jQuery仿简书首页轮播

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

 35777  344  查看评论 (9)
分享到微信朋友圈
X
jQuery仿简书首页轮播 ie兼容9

更新时间:2017/12/25 下午5:29:00

更新说明:修改了不能自定义外部容器ID的BUG。


更新时间:2017/12/20 下午7:59:46

更新说明:增加了右侧竖向滚动动画,使之跟简书原版的轮播效果保持一致。

使用方法:同之前基本一致,唯一需要改动的是必须要给父级容器一个固定高度。具体可以见DEMO的使用。

相关插件-幻灯片和轮播图

好看的动画切换,底部带进度条

jQuery全屏进度条自动切换有随机切换轮播图
  幻灯片和轮播图
 26374  337

三种常见轮播

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

jQuery适合移动设备触摸屏的响应式幻灯片插件

jQuery适合移动设备触摸屏的响应式幻灯片插件
  幻灯片和轮播图
 37953  464

完美左右切换

完美左右切换代码简单容易修改。
  幻灯片和轮播图
 43720  460

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

    zy453891268 0
    2017/12/21 10:22:39

    楼主强大,

    这个轮播图片的顺序可以指定吗?

        Medy丶ghost0
        2017/12/21 10:45:45

        现在横向和纵向的轮播其实是独立的,自己稍微改一下源码,可以提供不同的图片源。顺序的话基本就是图片数组的逆序(自动播放时)

        zy4538912680
        2017/12/21 15:41:46

        楼主怎么联系你啊?

    回复
    Wait or Hope 0
    2017/11/4 10:55:17
    2499339044 0
    2017/11/3 15:59:00
    心上秋 0
    2017/11/3 14:49:23
    Medy丶ghost 0
    2017/11/3 13:41:41

    使用简单。引入jq和插件js文件。使用如下:

    <div class='container'>
        <div id='banner'></div>
    </div>
    <script src='./js/jquery.js'></script>
    <script src='./js/carousel.js'></script>
    <script>
        window.onload = function() {
            var banner = new Carousel();
            //图片地址数组。不要少于三张
            var imgSrcDate = ["./public/img/01.jpg", "./public/img/02.jpg", "./public/img/03.jpg", "./public/img/04.jpg", "./public/img/05.png", "./public/img/06.jpg"];
            banner.init({
                container: "#banner",
                datas: imgSrcDate,
                autoplaySpeed: 5000,
                autoplay: false
            });
        }
    </script>
        流年浮世、许你一世0
        2017/12/12 15:48:56

        楼主请问一下这个能改成右侧是上下轮播更简书那个一样的么?

        Medy丶ghost0
        2017/12/19 20:26:23
        当初就是图省事,有时间我会加上那个小特效的。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复