欢迎来到CMS的世界,我们开始吧!
您当前的位置:首页 > seo教程

Bootstrap4轮播图js代码

2020-03-30    来源:CMS代码    浏览次数:

下面CMS代码网为大家介绍一下Bootstrap4轮播图js代码

//Bootstrap4轮播图
$(function () {
	$(window).on('resize', () => {
		//1.获取窗口宽带
		let clientW = $(window).width;
		//2.设置临界点
		let isShowBigImage = clientW >= 900;
		//3.获取div下的所有内容
		let $allItem = $("#");
		//4.遍历
		$allItem.each((index, item) => {
			//4.1取出图片的路径进行判断
			let src = isShowBigImage ? $(item).data('lg-img') : $(item).data('sm-img');
			let imgUrl = src
			//4.2设置背景
			$(item).css({
				backgroundImage: imgUrl
			})
			//创建img标签
			if(!isShowBigImage){//大屏幕
				//``中传img
				let imgEle = ``
				$(item).empty().append(imgEle)
			}else{//小屏幕
				$(item).empty()
			}
		})
	});
	//自动触发
	$(window).trigger('resize');
})

上面是关于“Bootstrap4轮播图js代码”的详细介绍,想了解更多关于seo教程内容,请继续关注CMS代码网!

最新文章

回到顶部