无尽旋转木马
来源:互联网 发布:java.lang.reflect 包 编辑:程序博客网 时间:2024/04/29 09:26
今天在逛论坛时,发现很多新人在问用jquery如何编写一个”旋转木马”的切图效果。所以自己特意去写了一个demo,希望能帮到一些新人。
思路:
- 创建显示框DIV,设置overflow:hidden。
- 在显示框中创建元素ul,将所有图片放在ul的li中,给元素li添加float:left。
- 通过点击左右方向图标,改变显示框的scrollLeft。
如下图:
Jquery代码
为了以后能重复使用这代码,我将效果写成了一个插件。
插件的格式:
- $.fn.infiniteCarousel=function() {
- return this.each(function()
- //要执行的代码
- });
- }
$.fn.infiniteCarousel=function() {return this.each(function() //要执行的代码});}调用插件:
- $(function(){
- $(".infiniteCarousel").infiniteCarousel();
- });
- 注意:outerWidth=padding+width+border
- //一个图片所占的宽度
- singleWidth = $wrapperLis.filter(":first").outerWidth()
- 注意:innerWidth=padding+width
- //每页图片个数
- pageCount = Math.ceil($wrapper.innerWidth() / singleWidth)
$(function(){$(".infiniteCarousel").infiniteCarousel();});注意:outerWidth=padding+width+border//一个图片所占的宽度singleWidth = $wrapperLis.filter(":first").outerWidth()注意:innerWidth=padding+width//每页图片个数pageCount = Math.ceil($wrapper.innerWidth() / singleWidth)无尽选择木马动画效果:
- //判断是否还在执行动画中
- if($wrapper.is(':not(:animated)')){
- //执行动画效果
- $wrapper.animate({"scrollLeft":"+="+ scrolleft},200,function() {
- currentPage = page;
- //在复制页第一页
- if(page == 0){
- $wrapper.scrollLeft(pageTotal*$wrapper.width());
- currentPage = pageTotal;
- //在复制页最后一页
- }else if(page > pageTotal){
- $wrapper.scrollLeft($wrapper.width());
- currentPage = 1;
- }
- });
- }
//判断是否还在执行动画中if($wrapper.is(':not(:animated)')){//执行动画效果$wrapper.animate({"scrollLeft":"+="+ scrolleft},200,function() { currentPage = page;//在复制页第一页if(page == 0){$wrapper.scrollLeft(pageTotal*$wrapper.width());currentPage = pageTotal;//在复制页最后一页}else if(page > pageTotal){$wrapper.scrollLeft($wrapper.width());currentPage = 1;}});}
代码下载地址:https://github.com/yeahzan/whirligig
博客地址:http://www.yeahzan.com/blog/item/42-2.html
- 无尽旋转木马
- 旋转木马
- 无尽
- 旋转木马第三方
- 旋转木马插件代码
- tx5-旋转木马轮播图
- 旋转木马-轮播
- 旋转木马轮播图
- 木马旋转轮播图
- 原生js旋转木马
- js旋转木马特效
- 旋转木马轮播图JS
- 会声会影旋转木马制作要点
- 我们爱情是旋转木马?
- ACM题目:字符旋转木马
- jquery旋转木马插件SLICK
- CSS3 正方体 旋转木马动画
- js写一个旋转木马
- 【代码系列】POJ 1273( 单纯形解最大流 )
- 不要让例会成为鸡肋
- java、Collection接口集合和泛型<T>
- android 语音识别
- JS日期比较 2013-01-31大于2013-02-01
- 无尽旋转木马
- factor因子
- frameSet和iframe的基本理解
- jquery实现页面滚动到最下方自动按分页的形式加载内容效果
- 笔记通过查询创建表
- 多线程编程2 - NSOperation
- Eclipse使用过程中出现java.lang.NoClassDefFoundError的解决方案
- JMS调用IBM MQ监听模式
- Excel 在测试中的应用(二)--添加功能键