还在为插件配置而烦恼吗?下面提供插件通用配置自动生成代码,只需复制即可!使用插件就是这么简单! 点我去看配置
下面的代码为插件的大众配置,符合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 //开启无缝滚动 跑马灯效果 })