CrazyPlugin

CrazyScroll 滚动插件

CrazyScroll让网站滚动飞起来,让web开发更迅速、简单、代码更加简洁。

一个插件即可轻松解决网站所有滚动特效,这就是CrazyScroll

CrazyScroll兼容IE6等以上所有浏览器


还在为插件配置而烦恼吗?下面提供插件通用配置自动生成代码,只需复制即可!使用插件就是这么简单! 点我去看配置

1.全屏滚动

2.全屏焦点图轮播滚动

3.固定宽高焦点图轮播滚动

3.文字横向滚动

1).文字横向普通滚动 [查看配置] [下载例子]
2).文字横向循环滚动 [查看配置] [下载例子]
3).文字横向循环无缝滚动 [查看配置] [下载例子]

4.多图横行滚动

1).图片普通滚动 [查看配置] [下载例子]
    2).图片循环滚动 [查看配置] [下载例子]
    3).图片循环无缝滚动 [查看配置] [下载例子]

4.多图片纵向滚动

1).普通滚动
[查看配置] [下载例子]
2).循环滚动
[查看配置] [下载例子]
3).循环无缝滚动
[查看配置] [下载例子]

5.文字纵向滚动

1).普通文字纵向滚动 [查看配置] [下载例子]
2).循环文字纵向滚动 [查看配置] [下载例子]
3).无缝文字纵向滚动 [查看配置] [下载例子]

7.插件一键配置


下面的代码为插件的大众配置,符合90%的网站需求(只需要修改滚动个数和显示个数),如需修改其他参数或者添加参数请查看插件参数后修改 [去看参数]

通用配置

1.全屏滚动
$("#full-scroll").crazyScroll({
  effect:'top',            //滚动效果 top往上 left往左
  mainScroll: ".picList",  //挂在图片滚动ul上面的class
  dotSwitch:true,          //开启点状态导航
  mainDot : ".dotList",    //点导航ul上的class
  navMenu: "#menu",        //导航菜单控制滚动 没有导航可以去除
  pageNum:'#pageNum',      //显示数字页数的id  没有可以删除
  fullScreen:true,         //开启全屏模式
  autoPlay:false,          //关闭自动滚动,建议关闭
  resize:true              //开启响应式
});

2.全屏焦点图轮播滚动
$("#banner-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:1,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航
  mainDot : ".dotList",   //点导航ul上的class
  autoBtn :true,          //开启按钮悬浮出现 移除隐藏
  fullScreen:true,        //开启全屏 只用于全屏滚动或者全屏焦点图滚动
  mouseOverStop:true,     //开启鼠标悬浮在图片上停止滚动
})

3.固定宽高焦点图轮播滚动
$("#banner-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:1,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航
  mainDot : ".dotList",   //点导航ul上的class
  autoBtn :true,          //开启按钮悬浮出现 移除隐藏
})

4.多图片横向滚动
$("#pic-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:3,              //显示个数
  scrollNum:2,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
})

5.多图片横向循环滚动
$("#pic-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:3,              //显示个数
  scrollNum:2,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
})

6.多图片横向无缝循环滚动
$("#pic-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在文字滚动ul上面的class
  showNum:3,              //显示个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
  autoMarquee: true       //开启无缝滚动 跑马灯效果
})

7.多图片纵向滚动
$("#pic-scroll").crazyScroll({
  effect:'top',           //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:3,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
})

8.多图片纵向循环滚动
$("#pic-scroll").crazyScroll({
  effect:'top',           //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:3,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
})

9.多图片纵向无缝循环滚动
$("#pic-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在文字滚动ul上面的class
  showNum:3,              //显示个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
  autoMarquee: true       //开启无缝滚动 跑马灯效果
})

10.多文字横向滚动
$("#text-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在文字滚动ul上面的class
  showNum:3,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
})

11.多文字横向循环滚动
$("#text-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:3,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
})

12.多文字横向无缝循环滚动
$("#text-scroll").crazyScroll({
  effect:'left',          //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在文字滚动ul上面的class
  showNum:3,              //显示个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
  autoMarquee: true       //开启无缝滚动 跑马灯效果
})

13.多文字纵向滚动
$("#text-scroll").crazyScroll({
  effect:'top',           //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在文字滚动ul上面的class
  showNum:2,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
})

14.多文字纵向循环滚动
$("#text-scroll").crazyScroll({
  effect:'top',           //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在图片滚动ul上面的class
  showNum:2,              //显示个数
  scrollNum:1,            //滚动个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
})

15.多文字纵向无缝循环滚动
$("#text-scroll").crazyScroll({
  effect:'top',           //滚动效果 top往上 left往左
  mainScroll: ".picList", //挂在文字滚动ul上面的class
  showNum:2,              //显示个数
  dotSwitch:true,         //开启点状态导航 没有可以删除 
  mainDot: ".dotList"     //点导航ul上的class 没有可以删除 
  loop: true              //开启循环
  autoMarquee: true       //开启无缝滚动 跑马灯效果
})