jQuery仿简书首页轮播

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

 8341  34  查看评论 (9)
jQuery仿简书首页轮播 ie兼容9

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

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


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

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

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

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

jQuery响应式全屏轮播图插件

jQuery响应式全屏轮播图插件,支持移动端触屏切换。
  幻灯片和轮播图
 16025  147

不规则图片切换特效

TweenMax不规则图片切换特效
  幻灯片和轮播图
 16654  225

jQuery 3D旋转轮播jquery.roundabout.js

3D轮播图,每张图都有标题,并且可以附加链接,点击最上层的图片可跳转对应的链接
  幻灯片和轮播图
 18841  132

讨论这个项目(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
        当初就是图省事,有时间我会加上那个小特效的。
    回复
取消回复