layui轮播图切换会有跳动_Layui中轮播图切换函数说明
### Layui中輪播圖切換函數說明 ###
##### 官方文檔 [鏈接][Link 1] #####
![在這里插入圖片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bmFuOTYx_size_16_color_FFFFFF_t_70]
關于輪播圖的使用和講解,官方文檔例子都說的夠了。
##### 切換函數說明 #####
除了主動切換函數沒有作說明(比如我覺得切換箭頭不好看,想換成自己的圖片/按鈕)
其實也很簡單,如果debug js函數也可以找到
layui.use(['carousel','form'], function(){
var carousel = layui.carousel;
var layer = layui.layer;
var form = layui.form;
//建造實例
var ins = carousel.render({
elem: '#container'
,arrow: 'hover' //始終顯示箭頭
,anim: 'default' //切換動畫方式
,autoplay: false
,indicator: 'none'
,height: '800px'
});
//上一張
$('.above').click(function(){
ins.slide('sub');
});
//下一張
$('.next').click(function(){
ins.slide('add');
});
})
##### 其他 #####
其他的按照官方文檔都是比較好理解使用的,另外切換的監聽函數和reload方法可以重置ins的各種參數
比如更改高度
layui.use(['carousel','form'], function(){
var carousel = layui.carousel;
var layer = layui.layer;
var form = layui.form;
//建造實例
var ins = carousel.render({
elem: '#container'
,arrow: 'hover' //始終顯示箭頭
,anim: 'default' //切換動畫方式
,autoplay: false
,indicator: 'none'
,height: '800px'
});
carousel.on('change(test)', function(obj){ //test1來源于對應HTML容器的 lay-filter="test1" 屬性值
var options;
if (obj.index === 0 && obj.prevIndex === 1) {
options = {
height: '800px'
};
ins.reload(options);
} else if (obj.prevIndex === 0) {
options = {
height: '260px'
};
ins.reload(options);
}
});
)}
[Link 1]: https://www.layui.com/doc/modules/carousel.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bmFuOTYx_size_16_color_FFFFFF_t_70]: /images/1606542562176.png
總結
以上是生活随笔為你收集整理的layui轮播图切换会有跳动_Layui中轮播图切换函数说明的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hid编程 qt_hidapi-0.7.
- 下一篇: linux中进程优先级,linux下调整