jQuery SimpleCarousel Plugin

Examples > Scroll News, Vertical Switch

Scroll News, Vertical Switch

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.SimpleCarousel.js"></script>
<script type="text/javascript">
(function($){
    // JavaScript 调用代码
    $("#carousel-v").SimpleCarousel({
        // 单纯实现滚动特效时，container 和 carousel 为必选配置项
        container: "#carousel-v-container",
        carousel: '#carousel-v-list',

        // V - 纵向（默认值）
        // H - 横向
        playDirection: 'V',

        // 默认显示第几页（可选）
        defaultPage: 3,

        // 滚动一屏动画所有的时间（可选）
        animateDuration: 1000,

        // easing 动画特效（可选）
        // 可选的特效名称：swing,linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic...
        // @see http://gsgd.co.uk/sandbox/jquery/easing/
        // @see http://easings.net/zh-cn/
        easing: "easeOutBounce",

        // 滚动一次的Item数量（默认值：itemsPerPage）
        itemsPerStep: 3,

        // 是否自动滚动（可选）
        autoPlay: true,

        // 循环播放的方向
        pageDirection: "back",

        // 美屏切换的时间间隔（可选）
        pageSwitchDelay: 4000,

        // 是否无间断连续滚动（可选）
        cyclePlay: true
    });
})(jQuery);
</script>