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