关注F2E-UED-SEO

一杯茶的功夫…原来部门的两位同事离职了…
原来的小业务部门也散了…
正所谓物事人非…
好吧不提这些往事…
今天分享的是mootools的switchable效果，这些效果我一个月以前已经整理好放到了ShopEx官方的wiki上…
现在就同步到我的私人blog里。

先说一下引用switchable的方法：（switchable基于Mootools1.3版本以上）

• 1.完成html+css代码的编写，依次加入mootools.js和switchable.js，注意先后顺序
• 2.最外层的父元素必须声明类名class为”Auto_Widget”!!!
• 3.在外层的父元素上写上属性data-widget-type,选择效果名称,例如Tabs,Switchable,Accordion,Popup
• 4.如有必要,在外层的父元素上写上属性data-widget-config,选择你想要的参数配置实现不同的效果。

下面放出各种效果：
具体的各种效果引用方法和参数配置，请点击这里。
全部实例打包下载，请点击这里。

• 一、Slide卡盘效果
  数字图片轮播 文字图片轮播 大图小图轮播 滚动公告
• 二、Tab标签页效果
  简单的Tab标签页 标签页延迟展示 3
• 三、Accordion手风琴效果
  手风琴效果 手风琴-支持多面板展开 基础的在线客服效果
• 四、Carousel旋转木马效果
  点击上下滚动一组内容 点击文字左右滚动 点击图片左右滚动
• 五、Popup 弹出层效果
  弹出层原理剖析实例 竖向弹出菜单实例
• 六、Lazyload 延迟加载机制
  延迟加载实例展示
• 七、倒计时效果
  倒计时实例一 倒计时实例二 经典团购流程实例

jCarousel是一款JQuery 插件， 用来控制水平或垂直排列的列表项. 这些项目（可以是静态HTML内容或是Ajax加载内容）内容是可以来回滚动的（可以有动画效果）。

相关配置文件和一些基本介绍：请点击这里查看
废话不多说,上效果：
Demo:

• 静态实例
  • 最简单基本的滚动切换效果
  • 垂直滚动切换
  • 自动滚动的传送切换
  • 含回调函数的滚动切换举例
  • 含外部控制的滚动切换
  • 有自定义起始位置的滚动切换
  • 一个页面上同时出现多个滚动切换
• 动态实例
  • 通过JavaScript加载滚动切换的动态内容
  • 通过Ajax加载滚动切换的动态内容
  • 通过Ajax从PHP脚本加载滚动切换的动态内容
  • 通过Ajax从Flickr照片订阅中加载滚动切换的动态内容
  • 通过Ajax从Flickr API中加载滚动切换的动态内容
• 特别的实例
  • 循环滚动切换
  • 使用jCarousel进行文本滚动
  • 更灵活的滚动切换
  • jCarousel 和 Thickbox 3插件相结合
  • 含自定义动画效果的滚动切换

简单的拿example举例： —-含外部控制的滚动切换

jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null   //注意这里不能带标点符号 兼容(IE)
    });
});

这里非常需要注意的一点是：
配置的参数的最后1个不能带有逗号或者是分号！否则IE下是会显示JS报错！从而导致JS失效！

Example里的一些东西都可以经过修改转成各种效果，很实用！
这里提供了打包下载！ 欢迎分享！