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天

知道了
密歇根神奇彩票 www.555883.com-飞彩网邀请码| www.fy15.com-福彩出什么福彩多人| www.101229.com-京彩挂机能赚钱多| www.089575.com-台北快三下载| www.3790.cc-全国体彩排列5预测| www.19ia.com-福彩35期-| www.5714.cc-福彩3d胆码排顺| www.24855.com-体彩包括什么| www.82030.com-网络彩票骗术| www.060342.com-快三预测算法| www.535038.com-好友游戏彩票| www.124954.com-腾讯5分彩网站| www.2491.top-彩专家大牛在线| www.10133.com-福彩三d历史试机号| www.59300.com-快三棋牌-| 易彩网www.99638c.com| www.7925.xyz-七彩椒怎么种植| www.189492.com-大发快三走势图连线| www.16571.com-福彩3d奖金规则| www.163920.com-彩票太害人了| www.206143.com-买五分彩的正规平台| www.001377.com-釉彩种类-| www.531211.com-加入时时彩计划群| www.262398.com-皇都彩票登陆| www.17873.cc-彩票系统app定制| www.998241.com-中体彩票-| www.3200.vip-爱中彩票应用| www.4197.cc-中国彩票最高奖金| www.007357.com-体育彩票中了奖号码| www.zs34.com-彩票现-| www.39xr.com-巨丰彩票开奖| www.953658.cc-计算器足球竞彩网| www.821342.com-今天彩圣字谜总汇| 彩经彩票www.91954.com| www.528595.com-彩民之家免费资料| www.910398.com-全民足彩彩票电脑版| www.192220.com-568彩票app-| www.68840.com-甘肃快三最新遗漏号| www.wl34.cc-豪彩网址-| www.591993.com-新粤彩联盟彩图| www.520565.com-北京快三限号| www.032775.com-金沙国际时时彩平台| www.132414.com-埇桥区彩礼-| www.212537.com-体育彩票加盟| www.285921.com-36o彩票下载安装| www.568117.com-大发彩票提现3天| www.719229.com-彩虹比喻人生的句子| www.21631.cc-彩乐乐彩票网下载| www.692519.com-6678彩票平台下| www.8681.in-静海福彩中心地址| www.298256.com-七星彩今晚开奖视频| www.383765.com-体彩排列五太难了| www.31595.com-麒麟彩票网站| www.53tl.com-大富彩票软件下载| www.801813.com-福彩投注软件| www.761310.com-宴喜好彩妹-| www.870065.com-彩票20选8-| www.946526.com-福建官网体彩| www.cai677.cc-快三是什么游戏| www.mu7.com-彩票走势怎么分析| www.590101.com-广州体彩中心地址| www.760779.com-时时彩小鹿计划| www.881549.com-辉煌彩票h-| www.993332.com-彩神官方网网站| www.my14.com-快三软件计划| www.26zc.com-东莞长安福利彩票店| www.7279.pw-画彩虹又简单又漂亮| www.779787.com-梦书解梦七星彩码| www.875922.com-竞速快乐彩是骗局| www.949034.com-关注中彩股份| www.995569.com-竞彩北单推荐预测| www.ce50.com-优彩社优彩社区了知| www.ti74.com-百盈快三如何下载| www.5tm.com-足彩中多少起交税| www.71ca.com-时重庆市彩-| www.868966.com-今天福彩3d开机号| 熊猫彩票www.444xm.cc| www.168710.com-内蒙古快三遗漏| www.222764.com-快3彩票害死多少人| www.306601.com-澳发彩票网站| www.52939.cc-篮彩比分-| www.29vh.com-今天晚上福彩什么号| www.5818.club-彩七七苹果下载| www.629369.com-中国足彩网5o0| www.841064.com-中国福利彩票发展| www.962261.com-爱彩彩票全天计划| www.252251.com-旺彩双色球官方网站| www.065208.com-彩铅画图片简单卡通| www.gg55.com-快三大小规律怎么看| www.072809.com-九亿彩票app下载| www.168123.com-福彩3d字谜图大全| www.290258.com-彩客网胜平负| www.415817.com-贵州好彩香烟价格| www.407220.com-七星彩在线随机网上| www.vm71.com-京东彩票-| www.984164.com-香港hk免费百彩网| www.495776.com-博彩公司利记返还率| www.70ea.com-红菜苔彩票-| www.655590.com-网易七星彩开奖结果| www.761569.com-好彩跑得快-| www.iu22.com-浙江体彩网电脑版| www.7266.com-重庆时间时彩开奖| www.055432.cc-彩票app名字| www.296776.com-中福彩票开奖网| www.575834.com-6288福彩-| www.5466.com-彩虹六号价格区别| www.870458.com-网上彩票店怎么开| www.t81.net-军长14场足彩| www.73ks.com-体彩5d10玩法| www.4675.biz-中彩网三地开奖结果| www.op03.com-江苏快三一天多少期| www.26.cc-快乐双彩开奖说明| www.308806.com-彩票3b试机号| www.5905.com-定亲礼金和结婚彩礼| www.59569.cc-彩客网完整比分直潘| www.132474.com-彩妆项目加盟| www.338877.com-大发购彩大厅| www.619635.com-彩票技巧讲解视频| www.362020.com-描写彩虹下雨的诗句| www.526930.com-贝投彩票-| www.640530.com-爱彩正规吗-| www.848126.com-彩票818cp-| www.947427.com-新彩吧网络图迷画迷| 易彩集团www.25688e.com| www.6298.biz-甘肃武威福彩中心| www.0808.tv-手机买足球彩票平台| www.180013.com-江西快三玩法| www.562191.com-金富豪彩票app| www.914.cc-临沂福利彩票中奖| www.09962.com-上海体彩网官网下载| www.025316.com-多乐彩计算法| www.168627.com-江苏快三怎么玩| www.318698.com-cc彩票网投-| www.522797.com-支付宝买彩票靠谱吗| www.906573.com-好听的彩票店名字| www.524765.com-彩票开奖结果号| www.737363.com-福利彩票有专家分析| www.916415.com-篮球彩票规则视频| www.cp27.com-快三三不同号计划| www.8th.cc-天马彩票是正规的吗| www.0411.la-福彩中奖记录| www.08585.com-7128彩票-| www.049818.com-牛彩论坛首页官网| www.yb62.com-新手买彩票怎么写号| www.c92.club-七星彩09复式| www.xv99.com-苏州福彩快三| www.4305.vip-乐彩论坛1750网| www.135991.com-广西体彩官网七星彩| www.769342.com-好彩网为什提不出钱| www.5208.me-欧洲大彩票开奖号码| www.138267.com-双色球新浪彩票| www.571512.com-湖北快三杀号号技巧| www.873712.com-彩12下载-| www.107201.com-凤凰彩票开挂软件| www.615507.com-福利彩票排列3| www.81it.com-新粤彩报纸2019| www.979379.com-泰国好彩四味爆珠| www.6414.net-快三福彩网下载| www.640166.com-彩票777靠谱吗| 68彩票www.68689l.com| www.135202.com-福彩3d投注网站| www.925287.com-3d杀号彩宝贝| www.421446.com-网上去哪买彩票| www.cai1500.com福彩快三走势图今天|