利用js實現Swiper全屏自適應圖片輪播代碼



33 129 44



特效描述:利用js實現 Swiper 全屏自適應 圖片輪播代碼,利用js實現Swiper全屏自適應圖片輪播代碼

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/swiper.min.js"></script>

3. HTML代碼

<section class="pc-banner">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-slide-center none-effect">
				<a href="#">
					<img src="img/banner001.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/banner002.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/banner003.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/banner004.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/banner005.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
		</div>
		<div class="button">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</section>
<script type="text/javascript">
	window.onload = function() {
		var swiper = new Swiper('.swiper-container',{
			autoplay: false,
			speed: 1000,
			autoplayDisableOnInteraction: false,
			loop: true,
			centeredSlides: true,
			slidesPerView: 2,
			pagination: '.swiper-pagination',
			paginationClickable: true,
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',
			onInit: function(swiper) {
				swiper.slides[2].className = "swiper-slide swiper-slide-active";
			},
			breakpoints: {
				668: {
					slidesPerView: 1,
				}
			}
		});
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片滑動 圖片滑塊 純圖片輪播 圖片輪播 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 快乐扑克3走势图表 AG鬼马小丑预测 长春麻将胡牌示意图 工作室如何利用页游赚钱 腾讯欢乐麻将开挂作弊方法 陕西快乐十分复式玩法 江苏老快3开奖号码查询 葡京娱乐场官网 躺着赚钱怎么弄 足彩购买平台 牙科耗材赚钱吗 娱乐棋牌大厅下载安装 今天湖北30选5开奖 排列三质合走势图 360篮彩 附近的人美女麻将