更新时间:2019-12-01 22:35:48
1、在页面引入picture-carousel.min.css和picture-carousel.min.js
<link rel="stylesheet" href="picture-carousel.min.css" /> <script type="text/javascript" src="picture-carousel.min.js"></script>
2、在页面新建一个div,设置宽度高度
<div id="box"></div>
3、调用生成图片轮播容器
var box = new PictureCarousel('#box', { direction: 'left', //轮播方向:left,right interval: 4000, //单位ms,轮播持续时间 duration: 50, //单位ms,自动切换时间间隔,最佳速度:容器宽度/duration = 25 autoplay: true, //是否自动播放 display: 1, //同时显示的滑块数量 arrow: true, //是否显示左右箭头 dots: true, //是否显示指示点 listData: [ //插入图片等的数据 { src: 't1.png', alt: '1' }, { src: 't2.png', alt: '2' }, { src: 't3.png', alt: '3' }, { src: 't4.png', alt: '4' } ] }); box.init();
4、注意
duration: 这个时间的设置很重要,一般是---容器(如#box所代表的容器)的宽度 / duration = 20左右,商最好保证余数为0。
所以你可以这样求值 duration(整数)=容器宽度/20(或上下)。
5、想改动的解压缩两个文件自己改吧,都是很简单的知识