ScrollPic.js——图片左右滚动插件
遇到了图片做左右滚动的项目,发现ScrollPic.js这个插件还是很好用的,一般的浏览器都支持,也可以做成bootstrap样式;
首先需要下载ScrollPic.js这个插件;
效果如图所示:
使用方法:
<script type="text/javascript">
var scrollPic_01 = new ScrollPic();
scrollPic_01.scrollContId = "demo9_f"; //内容容器ID
scrollPic_01.arrLeftId = "rdemo5left";//左箭头ID
scrollPic_01.arrRightId = "rdemo5right"; //右箭头ID
scrollPic_01.frameWidth = 940;//显示框宽度
scrollPic_01.frameHeight = 297;//显示框高度
scrollPic_01.pageWidth = 330; //每张图片宽度
scrollPic_01.speed = 50; //移动速度(单位毫秒,越小越快)
scrollPic_01.space = 330; //每次移动像素(单位px,越大越快)
scrollPic_01.autoPlay = true; //自动播放false
scrollPic_01.autoPlayTime = 3; //自动播放间隔时间(秒)
scrollPic_01.initialize(); //初始化
</script>
//为了实现无缝滚动:设置图片容器的宽度=每张图片宽度*n 设置每张图片的容器的宽度为:移动距离 也就是说移动距离=每张图片容器宽度