Xslider演示8种滚动效果包括:

一、左右切换:每次移动固定距离

二、左右切换:最后一个显示在最右侧

三、自动切换

四、循环切换

五、文本的上下滚动

六、上下切换

七、上下自动循环切换

在线预览

下载地址

在线实例

<h2>七、上下自动循环切换</h2>
        <div class="newslistwraper">
            <div class="newslist">
                <ul>
                    <li>日本通过防卫大纲 明确提出加强钓鱼岛等防卫</li>
                    <li>菲律宾称不会对人质事件中香港遇难者作出赔偿</li>
                    <li>11月份全国楼市再度量价齐涨 可能引发第三轮调控</li>
                    <li>山西巡警队长成黑老大敛财数亿 27套房被查封</li>
                </ul>
            </div>
            <a class="abtn aleft" href="#up">上移</a>
            <a class="abtn aright" href="#down">下移</a>
        </div>
        <script type="text/javascript" src="/api/jq/5733e37510366/js/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="/api/jq/5733e37510366/js/Xslider.js"></script>
        <script type="text/javascript">
            $(function() {
                //一、左右切换:每次移动固定距离;
                $(".productshow:eq(0)").Xslider({
                    unitdisplayed: 3,
                    numtoMove: 3,
                    scrollobjSize: Math.ceil($(".productshow:eq(0)").find("li").length / 3) * 486
                });
                //二、左右切换:最后一个显示在最右侧;
                $(".productshow:eq(1)").Xslider({
                    unitdisplayed: 3,
                    numtoMove: 3
                });
                //三、自动切换;
                $(".productshow:eq(2)").Xslider({
                    unitdisplayed: 3,
                    numtoMove: 3,
                    autoscroll: 2000  //自动移动间隔时间     默认null不自动移动;
                });
                //四、循环切换;
                $(".productshow:eq(3)").Xslider({
                    unitdisplayed: 3,
                    numtoMove: 2,
                    loop: "cycle"
                });
                //五、文本的上下滚动;
                $(".vscroll").Xslider({//.productshow是要移动对象的外框;
                    unitdisplayed: 6, //可视的单位个数   必需项;
                    numtoMove: 3, //要移动的单位个数    必需项;
                    viewedSize: 120, //可视宽度或高度    默认查找要移动对象外层的宽或高度;
                    scrollobj: ".vscrollobj", //要移动的对象     默认查找productshow下的ul;
                    unitlen: 20, //移动的单位宽或高度     默认查找li的尺寸;
                    scrollobjSize: $(".vscrollobj").height(), //移动最长宽或高(要移动对象的宽度或高度)   默认由li个数乘以unitlen所得的积;
                    dir: "V"//水平移动还是垂直移动,默认H为水平移动,传入V则表示垂直移动;
                });
                //六、上下切换;
                $(".videolistwraper").Xslider({//.productshow是要移动对象的外框;
                    unitdisplayed: 2, //可视的单位个数   必需项;
                    numtoMove: 1, //要移动的单位个数    必需项;
                    //loop:"cycle",
                    dir: "V"//水平移动还是垂直移动,默认H为水平移动,传入V则表示垂直移动;
                });
                //七、上下自动循环切换;
                $(".newslistwraper").Xslider({
                    unitdisplayed: 1,
                    numtoMove: 1,
                    loop: "cycle",
                    dir: "V",
                    autoscroll: 2500,
                    speed: 300
                });
                $("a").focus(function() {
                    this.blur();
                });
            })
        </script>

  

Xslider演示8种滚动效果的更多相关文章

  1. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  2. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  3. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  4. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  5. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  6. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  7. One Page Scroll – 实现苹果风格的单页滚动效果

    单页滚动网站已经被广泛使用了有一段时间了,它们对于快速提供信息是很有用的.One Page Scroll 是一个 jQuery 插件,简化了创建此类网站的步骤,只需创建 HTML 结构,进行简单设置, ...

  8. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  9. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

随机推荐

  1. 分享一下Java写的坦克大战游戏,相信很多人小时候玩过

    写在前面 程序是五六年前读书的时候写的,里面会有一些不规范的,我已经将代码传到github上了,有时间会优化修改. 程序运行机制 定义了一个JPanel,然后每隔一小段时间重绘一遍. 重绘的内容如下: ...

  2. Codeforces Round #354 (Div. 2) ABCD

    Codeforces Round #354 (Div. 2) Problems     # Name     A Nicholas and Permutation standard input/out ...

  3. [慢查优化]联表查询注意谁是驱动表 &amp; 你搞不清楚谁join谁更好时请放手让mysql自行判定

    写在前面的话: 不要求每个人一定理解 联表查询(join/left join/inner join等)时的mysql运算过程: 不要求每个人一定知道线上(现在或未来)哪张表数据量大,哪张表数据量小: ...

  4. 【iCore3 双核心板_ uC/OS-III】例程十:消息队列

    实验指导书及代码包下载: http://pan.baidu.com/s/1sleklm1 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  5. Java Arrays 排序

    Java SDK中的排序分为两种情况: .对基础类型数组的排序,使用DualPivotQuicksort类 a.如果是对char.short数组的排序,因为byte.char.short分别为8bit ...

  6. ant 使用指南---java模块化编译【转】

    转自:http://www.cnblogs.com/hoojo/archive/2013/06/14/java_ant_project_target_task_run.html 一.概述 ant 是一 ...

  7. Linux 下常用的压缩,解压方法

    压缩命令: tar.gz 格式: tar -zcvf  自定义压缩文件名.tar.gz   被压缩文件名 zip 格式: zip -r 自定义压缩文件名.zip 被压缩文件名 如果要压缩整个文件夹,也 ...

  8. script是什么

    script是什么 scirpt就是一个命令,可以制作一份记录输出到终端的记录.对于那些想要真实记录终端会话的人来说,这很有用.该记录可以保存并在以后再打印出来. 怎么用 默认情况下,我们可以通过在终 ...

  9. 用对象型泛型和ArraysList写一个输入学员信息并展示

    题目:录入学员信息并保存,当录入学员的编号为0时结束,展示出学员信息 //student类 public class Student { public int id; public String na ...

  10. BZOJ 1735: [Usaco2005 jan]Muddy Fields 泥泞的牧场

    Description 大雨侵袭了奶牛们的牧场.牧场是一个R * C的矩形,其中1≤R,C≤50.大雨将没有长草的土地弄得泥泞不堪,可是小心的奶牛们不想在吃草的时候弄脏她们的蹄子.  为了防止她们的蹄 ...