一款轻量级,适配移动端的jQuery图片轮播插件

<link rel="stylesheet" href="./jquery.chBanner.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="./jquery.chBanner.js"></script> Step 2: 编写

<div class="chBanner normal"> <div data-title="test1" class="chBanner-item"><img src="images/1.jpg" alt="test1"></div> <div data-title="test2" class="chBanner-item"><img src="images/2.jpg" alt="test1"></div> <div data-title="test3" class="chBanner-item"><img src="images/3.jpg" alt="test1"></div> </div> Step 3: 调用

$('.normal').chBanner(); 配置

以下参数全部为默认值

//开始索引位置 0开始 startSlide: 0, //子元素选择器 item: ".chBanner-item", //是否自适应 isFlexible: true, //原型链内是否支持触摸 html5 transform isSupportTouch: "__proto__" in {}, //是否显示分页按钮 isShowPage: true, //是否显示标题栏 isShowTitle: false, //标题文本存放的属性 或者回调函数(需要返回值) titleAttr: "data-title", //是否显示左右控制按钮 isShowControls: false, //是否自动播放 isAuto: true, //自动播放间隔时间 intervalTime: 3000, //特效时间 affectTime: 300