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>
相关推荐
实现多功能的网页元素滚动,包括水平滚动,垂直滚动等
最近想写个slider插件,发现去网上早的好多效果,都不是很满意。于是就有了自己写插件的想法(支持外调插件方法和插件回调),插件大小已压缩至4kb以内 $(function(){ $(".xpanel").xSlider(); }) 参数 var del = { ...
$(".productshow").xslider({//.productshow是要移动对象的外框; unitdisplayed:3,//可视的单位个数 必需项; movelength:1,//要移动的单位个数 必需项; maxlength:null,//可视宽度或高度 默认查找要移动对象...
jquery 图片滚动 xslider 插件制作图片自动左右滚动与上下滚动,这个图片滚动xslider插件不复制整个容器里面的内容,直接用按钮控制滚动,直到滚动图片内容到最后一个,适用在图片展示滚动和新
xSlider.js是一款小巧的jquery轮播图插件。该jquery轮播图使用简单,代码简洁,运行速度快,兼容ie8浏览器。
jquery 插件 多张图片左右移动效果,实用简单
jquery 图片滚动 xslider 插件 图片左右滚动、上下滚动
Jquery滚动插件–Xslider Jquery div、图片水平滚动到最后一张
Java版在窗体中实现滑块拖动的代码,相信这个功能大家应用熟悉,拖动滑块在滑杆上移动,可改变预设置,可应用于多种环境下。 super("滑杆演示"); //调用父类构造函数 panel=new GraphPanel(); //实例化面板 ...
插件xSlider实现轮播效果 点击书本分类实现滚动条平滑滑动 书本分类菜单的伸缩 编辑页获取书本图像 我的书架 根据数据库数据动态显示性别图标 我的书架 切换选型卡 我的书架 对书本进行选择删除操作
* 插件xSlider实现轮播效果 * 点击书本分类实现滚动条平滑滑动 * 书本分类菜单的伸缩 * 编辑页获取书本图像 * 我的书架 根据数据库数据动态显示性别图标 * 我的书架 切换选型卡 * 我的书架 对书本进行选择删除操作 #...
jquery.Xslider.js 轮播图,焦点图片切换效果
jquery 广告轮换插件 jquery_xslider广告幻灯片插件.rar
//是否循环 var isloop: boolean = this.isloopCheckBox.... var x_: number = this.xSlider.getValue(); //目标Y坐标 var y_: number = this.ySlider.getValue(); //缩放 0-1 var scaleX_: number = this.sca