QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper软件产品列表左右滚动代码

原创商用 swiper软件产品列表左右滚动代码

jQuery基于swiper.js制作响应式的主机商城软件产品项目列表布局,通过左右按钮控制产品列表滚动。默认支持自动滚动效果代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<!--swiper框架样式-->
<link rel="stylesheet" type="text/css" href="statics/css/swiper-3.4.2.min.css" />

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<!--jquery框架-->
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="pc-bg-container">
	<div class="home-market-section">
		<li class="section-title">
			<a href="#">主机商城</a>
		</li>
		<div class="section-inner">
			<div class="swiper-container swiper-container-horizontal">
				<div class="swiper-wrapper">
					<!--下文中的data-swiper-parallax属性是swiper的视差效果,如果觉得污染代码,可以删除-->
					<div class="swiper-slide">
						<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020340_20340.png" width="75">
								<h3>企业云盘</h3>
								<p>企业文件存储管理与协作云平台</p>
								<div class="time"><span>¥1155</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20181207091159_89245.png" width="75">
								<h3>泰克双创实践云平台</h3>
								<p>基于云主机建设的多功能实训平台</p>
								<div class="time"><span>¥1550000</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020451_45996.png" width="75">
								<h3>视频云服务套餐</h3>
								<p>快速开启直播,引燃商业价值</p>
								<div class="time"><span>¥3600</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020526_82811.png" width="75">
								<h3>迅响响应式定制建站</h3>
								<p>开年大吉,建站立减2000</p>
								<div class="time"><span>¥800</span>/年</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20180921020703_68805.png" width="75">
								<h3>智迅云客服</h3>
								<p>新一代的云客服解决方案</p>
								<div class="time"><span>¥180</span>/月</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117112043_63875.png" width="75">
								<h3>云匣子</h3>
								<p>多终端运维的云堡垒机</p>
								<div class="time"><span>¥360</span>/月</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117112001_88334.png" width="75">
								<h3>交管局满分学习系统</h3>
								<p>文件上传、在线转码、存储管理</p>
								<div class="time"><span>¥200000</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117111422_72284.png" width="75">
								<h3>金华威云视频会议</h3>
								<p>新一代云视频会议解决方案</p>
								<div class="time"><span>¥800</span>/年</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117111315_56863.png" width="75">
								<h3>虚拟化下一代防火墙</h3>
								<p>All in One设计的虚拟防火墙</p>
								<div class="time"><span>¥1600</span>/年</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117111227_50389.png" width="75">
								<h3>云图管家</h3>
								<p>简单高效地保障企业文件资料安全</p>
								<div class="time"><span>¥5000</span>/次</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190223102649_33013.png" width="75">
								<h3>永洪敏捷BI</h3>
								<p>云上的数据展示分析工具</p>
								<div class="time"><span>¥200</span>/月</div>
							</div>
						</a>
						<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
							<div class="inner-content">
								<img src="statics/images/20190117110258_76566.png" width="75">
								<h3>网银混合云咨询实施服务</h3>
								<p>提供咨询、规划、设计和实施服务</p>
								<div class="time"><span>¥1050000</span>/次</div>
							</div>
						</a>
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</div>

<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(function() {

	new Swiper(".pc-bg-container .home-market-section .swiper-container", {
		loop: !0,
		speed: 500,
		autoplay: {
			delay: 3e3,
			disableOnInteraction: false
		},
		slidesOffsetBefore: 0,
		parallax: !0,
		pagination: {
			el: ".pc-bg-container .swiper-pagination",
			clickable: true
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev"
		}
	})

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

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
亚洲28 www.139173.com-华盈彩票-| www.84np.com-正规网彩平台| www.982130.com-信彩是什么软件| www.672590.com-湖南彩票论坛首页| www.640089.com-南国七星彩精选论坛| www.314798.com-七彩视界-| www.450633.com-彩票数字3多少钱| www.719992.com-七星彩选号助手| www.805403.com-七色彩开奖结果规则| www.987966.com-全能彩票-| www.215920.com-七星彩几个号算中奖| www.799811.com-谁有天际彩票邀请码| www.894940.com-网页版体彩天下| www.976253.com-河南体育彩票中心| www.dv5.com-十分钟彩-| www.601234.com-七星彩守号中奖概率| www.31816.cc-胜负彩任九开奖结果| www.209228.com-爱彩乐中奖助手| www.409990.com-葡萄牙彩票开奖结果| www.878211.com-500彩集团-| www.xq9.com-北京快三群拉我| www.0033.tv-很好的彩票选择号码| www.027048.com-中福快三五分钟全天| www.975948.com-安阳市区彩礼怎么要| www.09wa.com-五位数彩票叫什么| www.3306.vip-彩票选冷号还是热号| www.3070.biz-彩神计划江苏快3| www.74417.com-彩票12选5浙江| www.877062.com-5d彩超机的售价| www.940523.com-彩6彩票苹果版本| www.cm12.com-彩界过客-| www.171236.com-上海快三漏-| www.rr19.com-致富彩票骗局| www.430982.com-彩虹网代刷-| www.et00.com-旺彩彩票手机版下载| www.j41.me-皇马彩票网站| www.72hb.com-今日篮彩专家推荐号| www.4289.vip-七乐彩七等奖多少钱| www.762394.com-彩票红包雨聊天室| www.859073.com-快三追号-| www.948630.com-体彩排列三组远| www.999225.com-下彩网骗人-| www.fc55.com-五分钟开一次的彩票| www.28sy.com-哪个官网可以买彩票| www.980617.com-彩票投注站提成| www.ia6.cc-福建福彩快三遗漏及| www.pm29.com-湖北快三一定牛走图| www.101527.com-彩票lv-| www.074737.com-彩6下载安装ios| www.161623.com-大小单双彩票网| www.2315.net-我要下载七彩捞腌菜| www.8010.biz-开奖速度最快的彩票| www.25655.com-彩库女装-| www.689840.com-福彩三d试机号今天| www.784998.com-天天红单彩票安全吗| www.864662.com-老时彩开奖号码| www.940937.com-彩票培训课程| www.987835.com-甘肃张掖快三| www.nz1.cc-苏州福彩快3| www.nw89.com-江苏福彩三开奖结果| www.190040.com-快三吉林玩法| www.397413.com-网上彩票平台举报| www.517378.com-七星彩彩民论坛首页| www.599855.com-彩票要不要守号| www.132034.com-彩礼证据-| www.263028.com-体彩19083-| www.504202.com-十选一是什么彩票| www.576905.com-鸿运彩票苹果版下载| www.683518.com-义乌福彩兑奖地址| www.m80.top-彩票站买一张挣多少| www.70hj.com-7k彩平台中心| www.086676.com-南京福彩自助彩票机| www.253908.com-广西福彩快3走势| www.345692.com-1福彩中奖号码| www.435836.com-重庆七星彩-| www.525322.com-重庆14彩玩法| www.610115.com-彩票快三合法吗| www.693386.com-最新手机买彩票| www.792167.com-福利彩票43-| www.874754.com-博亚官方彩票平台| www.938133.com-福利彩票号码查询| www.993615.com-足彩兑奖规则| www.qw3.com-中彩票的真实故事| www.vv00.com-如何看彩票的k线| www.35yb.com-拉人进彩票群话术| www.3884.in-福彩3d报喜字谜| www.14166.com-体彩虚拟足球技巧| www.743343.com-中彩网彩票预测| www.634768.com-博大彩票真的假的| www.456287.com-巴厘岛国际彩票| www.583912.com-彩88.com-| www.665775.com-福利彩用户注册| www.756612.com-全民中彩下载| www.878792.com-足彩判断平局公式| www.984927.com-788彩票网-| www.ex31.com-博大彩票app| www.m30.org-体彩足球彩票怎么买| www.79qd.com-拉萨福彩快3| www.449955.com-爱尚彩平台怎么样| www.18683.com-永盛彩票老版| www.72ft.com-跑马彩票网站| www.6672.com-双色球彩票几位数字| www.78198.com-彩票平台投诉电话| www.026092.com-淘宝有彩票吗| www.193977.com-极速快三是真是假| www.331032.com-有彩票的棋牌游戏| www.2879.cn-天空与彩票免费大全| www.50305.com-七星彩加急一夜谈| www.050538.com-福彩3d黑彩-| www.695069.com-竞彩篮球开奖查| www.993358.com-足彩竞猜胜负规则| www.4iu.com-我爱彩票开奖结果| www.622.in-时时彩必赢技术| www.8118.space-葡京彩票平台靠谱吗| www.038578.com-快三在线过滤工具| www.167440.com-快三有官方网站| www.346429.com-福、彩3d走势图| www.689665.com-新浪爱彩不能用了| www.237044.com-彩票软件下载中彩网| www.435352.com-中国福利彩票14人| www.654001.com-江西快三和值推荐号| www.780455.com-彩铅画风景作品| www.59729.com-热门彩票开奖| www.080974.com-皇冠彩票网被骗了| www.320147.com-体肓彩票开奖结果| www.kn27.com-足彩竞彩资讯中心| www.25gz.com-华彩注册-| www.3242.org-最近快三中奖达人| www.24692.com-水彩星空鲸鱼| www.008323.com-3d开奖七乐彩开奖| www.220134.com-快三大彩鲸助手| www.062127.com-江苏快三可以提现吗| www.192234.com-彩7app下载-| www.344514.com-彩票预测公司| www.511114.com-遇到彩虹是那首歌| www.815400.com-即时开彩2-| www.ir77.com-竞彩足球胜平负| www.3963.org-中彩堂原創料| www.zx23.com-东方亮彩怎么样| www.7465.xyz-余姚体彩销量| www.66781.cc-一定牛彩票直接下载| www.066092.com-体育彩票私彩| www.155174.com-足彩有哪几种玩法| www.236127.com-体彩61中奖规则| www.322576.com-竞彩中大奖新闻| www.392076.com-5场2关足彩-| www.593279.com-彩虹6号干员| www.678891.com-竞彩足球胜负平计算| www.770268.com-好彩香烟60万图片| www.890601.com-反水最多的彩票网| www.338626.com-武汉彩票中大奖| www.777648.com-彩票app在线| www.919836.com-彩票打印软件| www.401819.com-彩客彩票网官网| www.625433.com-7乐彩专家杀号| www.885425.com-19042期胜负彩| www.310411.com-吉林省彩票十一选5| www.110453.com-福彩3d有几种买法| www.zl40.com-福彩快3能赚钱吗| www.028489.com-乐彩17500-| www.806061.com-黑龙江正好彩票网| www.753069.com-彩神彩票平台| www.be95.com-网络彩票时时彩骗局| www.251868.com-彩票送彩金的平台|