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>

  

最新文章

  1. JQuery中ajax的相关方法总结
  2. 关于Java中的继承和组合的一个错误使用的例子
  3. Java学习笔记 02 String类、StringBuilder类、字符串格式化和正则表达式
  4. Python(迭代器 生成器 装饰器 递归 斐波那契数列)
  5. 枚举esum20160530
  6. Android开发:彻底更改工程名
  7. HDU 5166(缺失数查找输出)
  8. Android源码下载方法详解
  9. [转]Bypassing iOS security
  10. ios 初体验&lt;UIButton 控件&gt;
  11. Python逻辑运算符
  12. 查看历史会话等待事件对应的session信息
  13. PyTorch--双向递归神经网络(B-RNN)概念,源码分析
  14. A1133. Splitting A Linked List
  15. java关于集合的遍历与增强for循环(foreach)的使用
  16. 《Linux内核设计与实现》第5章读书整理
  17. Map与Url查询参数相互转换
  18. Codeforces 847E - Packmen
  19. string 和String的区别
  20. 〖Windows〗zigbee实验之cygwin编译TestSimpleMac出错的解决方法

热门文章

  1. 12步创建高性能Web APP
  2. JSP网站开发基础总结《二》
  3. javase基础复习攻略《四》
  4. python--基础学习(四)自然字符串、重复字符串、子字符串
  5. Request 接收参数乱码原理解析二:浏览器端编码原理
  6. Linux的学习--使用PuTTY
  7. MFC 字符串类CString 源代码
  8. 机器学习&amp;数据挖掘笔记_20(PGM练习四:图模型的精确推理)
  9. web框架--flask
  10. 【转载】ASP.NET MVC Web API 学习笔记---联系人增删改查