QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper实现图片案例展示响应式布局滚动代码

原创商用 swiper实现图片案例展示响应式布局滚动代码

swiper.js实现响应式的左右切换图片案例展示布局。调用方法均有备注,方面修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代码

<div class="banner-box">
	<div class="banner-top"></div>
	<div class="banner-title">
		<h1>选择一个漂亮的模板</h1>
	</div>
	<div class="banner-text">
		<p>别具一格的不仅是风景,更是您的官方网站</p>
	</div>
	<div class="banner-top-one"></div>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-slide-center none-effect">
				<a href="javascript:;">
					<img src="images/banner1.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner2.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner3.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner4.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner5.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner6.jpg" about="" title="">
				</a>
			</div>
		</div>
		<div class="banner-arrow">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
	<div class="swiper-pagination"></div>

</div>
<div class="banner-button">
	<a href="javascript:;" class="do-btn banner-button-btn"> 更多模板  </a>
</div>

<script type="text/javascript">

	window.onload = function() {
		var swiper = new Swiper('.swiper-container',{
			autoplay: false, //是否自动滚动
			speed: 500,      //滚动速速
			autoplayDisableOnInteraction: true,
			loop: true,
			centeredSlides: true,
			slidesPerView: 3, //当前选中
			pagination: '.swiper-pagination',
			paginationClickable: true,
			prevButton: '.swiper-button-prev', // 左右切换
			nextButton: '.swiper-button-next', // 左右切换
			onInit: function(swiper) {
				swiper.slides[3].className = "swiper-slide swiper-slide-active"; //当前选中 状态
			},
			breakpoints: {
				100: {
					slidesPerView: 0,
				}
			}
		});
	}

</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
亚洲28 www.67bt.com-信彩票是真的吗| www.0098.biz-中彩网开奖号| www.920255.com-福彩三d组六魔图| www.lo91.com-中彩网彩票是真的吗| www.4555.net-七星彩历史同期数据| www.005644.com-彩一预测-| www.839994.com-pc彩票app下载| www.cp540.com-大发快三很假| www.17429.com-20选5彩票网| www.54510.com-微信玩重庆时彩的群| www.9550.in-粤海七星彩票网| www.78571.com-七乐彩4拖6-| www.120489.com-彩票提成-| www.ck47.com-福利彩票选四开奖| www.033766.com-如意彩票官网下| www.53229.cc-福彩举报中心| www.116588.com-网上彩票买是真假| www.702125.com-如何注册爱彩乐| www.hm53.com-旺彩双色球软件下载| www.509066.com-足彩票下载-| www.657674.com-彩票软件杀号| www.796001.com-福彩10分钟大转盘| www.932942.com-118彩票平台下载| www.t38.top-湖北彩票中奖未领| www.99gg.com-乐彩双色球字谜来区| www.7043.cc-篮球博彩2串1规则| www.52195.cc-今天足彩十四场比分| www.87685.com-唯彩会专家预测| www.201342.com-易彩网下载安装| www.319591.com-博友彩票安卓下载| www.838882.com-福彩三地乐彩网首页| www.971846.com-分分彩挂机平刷方案| www.ma45.com-青海快三的研究| www.769122.com-好彩网钻石团队| www.897379.com-彩王布阵专栏| 中国福利彩票www.6364x.com| www.115780.com-盘点河南各地彩礼钱| www.690571.com-彩票3加1中多少钱| 天朝彩票www.98599.cc| www.z87.cc-李彩桦单身部落| www.519226.com-有盈彩票违法嘛| www.828958.com-1888彩票中心| www.i96.net-永利皇宫注册送彩金| www.74407.com-蓝彩总分有算加时吗| www.32932.cc-体育彩票19050| www.074470.com-北京快三中奖助手下| www.656886.com-七彩金龙鱼-| www.767695.com-3d字谜新彩网吧| www.857559.com-全民彩票暂停销售| www.774409.com-福彩代理犯法吗| www.871409.com-强强彩票破解软件| www.966762.com-宝马彩票可以玩吗| www.cai7511.com经典快三开奖| www.975982.com-官方购彩软件下载| www.ew61.com-江苏快三神器app| www.e44.shop-凤凰彩票提现限制| www.799273.com-人人中彩票多久到账| www.888128.cc-香港赛马排位派彩| www.961711.com-58福彩app下载| 彩多多www.78949s.com| www.676664.com-下载彩吧图库第一版| www.833778.com-日免软好彩-| www.910003.com-昆明亮彩光电| www.wl57.com-彩票开奖源码手机版| www.24uu.com-体彩改革-| www.487487.com-彩票代打靠谱吗| www.587082.com-87彩店最新版下载| www.659779.com-盛皇彩票-| www.737755.com-福彩3d摇奖机设置| www.814601.com-排列三预测彩吧| www.890034.com-花生彩票软件是真吗| www.961482.com-彩票3000万-| www.104005.com-中国篮球体彩| www.220273.com-辽宁福彩双色球玩法| www.320258.com-福彩开奖号3d| www.277116.com-时时彩是杀大赔小吗| www.380570.com-体彩苏宁智慧门店| www.095060.com-手机购彩平台3d| www.244112.com-网上怎么样买快三| www.352978.com-幸运彩票有没有问题| www.455432.com-福乐彩票-| www.79nx.com-体彩排列5开奖时间| www.7125.cm-建盏出彩骗局| www.37838.com-45彩票app-| www.91446.com-193彩票网-| www.066009.com-彩虹代刷网app| www.150477.com-体彩大乐-| www.261660.com-体彩河南游泳夺金| www.ay9.cc-五百万彩票网| www.298703.com-福彩怎么算-| www.730724.com-彩坛毒药-| www.909093.com-彩吧3d第三版| 全民彩票www.qm26.com| www.237735.com-爱彩乐彩票数据| www.916493.com-靠谱的彩票app| www.62.me-彩票交多少税公式| www.9333.me-彩球软件-| www.339164.com-3d福彩藏机图迷| www.450525.com-如何代理七星彩| www.542765.com-彩拾彩票正不正规| www.858451.com-彩世界苹果版下载| www.cp986.cc-中国快三网官网| www.275655.com-云南时彩开-| www.775299.com-香港电脑彩彩报网址| www.988179.com-中国福利彩票积分网| www.59ub.com-五州彩票官网| www.32676.cc-河南省体育彩票电话| www.383437.com-福利彩票今晚| www.79904.cc-福彩已亥猪-| www.120396.com-彩票大案-| www.206850.com-凤凰彩票下载app| www.27ig.com-657彩票客户端| www.8472.cn-博友彩是真的吗| www.931056.com-南洋彩哪里看开奖| www.hn12.com-上海时时彩开奖记录| www.3695.wang-五彩连珠单机版下载| www.36419.com-福彩3d澳门-| www.009758.com-女生说玩彩什么意思| www.131467.com-安阳农村彩礼| www.264977.com-大发快三导师| www.394258.com-新浪彩票电脑板| www.535094.com-彩票种类及奖金| www.950974.com-足球胜负彩预测捷报| www.cp882.com-手机快三投注可靠吗| www.60117.com-福彩开店哪里申请| www.68883.com-算卦能算出彩票吗| www.060308.com-快三数链-| www.198477.com-湖北福彩快三统计表| www.52533.com-好彩店彩票苹果版| www.022951.com-私彩代理怎么拉人| www.10cs.com-彩票最大的骗局| www.234528.com-彩票x-| www.344400.cc-天天体彩视频| www.430815.com-泰州彩礼标准| www.525152.com-圣地彩怎么下载| www.591688.com-彩界九哥就赌一个胆| www.656705.com-彩票平台bug破解| www.723127.com-快三属于违法么| www.799535.com-oe彩票娱乐-| www.865776.com-彩票做庄-| www.921127.com-彩神大发官网| www.971451.com-今曰体彩开奖公告| www.bk29.com-利彩彩票合法吗| www.507531.com-九号彩票捷豹| www.568541.com-体彩篮琪儿短租| www.652332.com-上海分分彩-| www.713611.com-重生中彩票低调买房| www.779639.com-福彩3d定位技巧| www.839316.com-竞彩论坛哪个好| www.888895.com-快三怎么砍龙顺龙| www.943335.com-博应用时时彩下载| www.984965.com-快快彩票-| www.cp9557.com-中彩网是正规网站吗| www.692187.com-福彩3d彩乐乐杀号| www.783915.com-彩99下载网站| www.866149.com-玩快三大小稳赚技巧| www.945120.com-福建省福利彩票开奖| www.n31.cn-京彩怎么下载呀| www.793458.com-彩霸王心水资料| www.869357.com-南海七星彩投注网| www.940897.com-台北快三全天计划| www.984706.com-体彩分析预测软件| www.355804.com-英国彩票税收| www.608966.com-红牛彩票用户注册|