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天

知道了
彩票123现在叫什么名字 www.90gl.com-博彩怎么推广有效| www.8129.biz-体育彩票还是福彩| www.38810.cc-中彩最佳计划网| www.92953.com-岩棉彩钢板工厂| www.062383.com-彩乐园官方网站| www.199591.com-彩票开奖网-| www.279468.com-彩500下载网页| www.372220.com-巢湖彩票中奖| www.484830.com-分分彩五分彩| www.566338.com-4567彩票首页| www.644767.com-彩九直播-| www.823772.com-360彩票不能用了| www.904018.com-u9彩票下载安装| www.973837.com-大乐透彩票中奖结果| www.cb97.com-赢钱彩app官网| www.vx78.com-贵州省福彩中心领导| www.19sg.com-胜负彩190344| www.627.in-手机淘宝在哪买彩票| www.4950.net-4567彩票主页| www.05551.cc-体彩升级竞彩不批| www.54854.com-天际彩票登录| www.004372.com-福彩开奖36期| www.080610.com-幸运彩票679| www.155017.com-足彩拉力是什么意思| www.308849.com-彩计划高手福彩| www.382666.cc-彩票可以连着买十期| www.517861.com-7乐彩精确杀号推荐| www.589502.com-南国体彩论坛41| www.666049.com-上海快三往期回顾| www.743904.com-华人彩注册-| www.817850.com-新彩票走势下载| www.893559.com-红牛彩票网-| www.962703.com-彩钢瓦漏水-| 网易彩票www.506931.com| www.lx43.com-下载竞彩足球| www.p15.cc-体彩怎么玩-| www.52ie.cc-猜骰子彩票软件| www.0304.me-彩票能伪造吗| www.9307.top-吉隆坡时时彩| www.50972.com-快8彩票彩民乐园| www.96117.com-彩票归谁管-| www.061315.com-我去彩票站倒闭了吗| www.165168.com-众购彩票zg606| www.254477.com-旺彩彩票预测高手| www.330021.com-天牛图库中国彩吧| www.403520.com-彩票开奖勇士争先| www.518363.com-乐彩关注码历史记录| www.582253.com-双色球彩票凤彩网谜| www.682352.com-福彩3d香港快报| www.756445.com-竞彩网官方app| www.930374.com-彩票打税-| www.986348.com-567时时彩票下载| www.cp1052.com-快三分析软件下载| www.mk39.com-内蒙时时彩开奖| www.3au.cc-注册彩票网址| www.62wm.com-淮安市福利彩票网| www.0500.cn-福彩大家乐游戏规则| www.8456.cm-福彩3d和值点| www.37658.com-彩票管理条例快三| www.85014.com-聚象彩骗人套路| www.038041.com-彩双色球工具大全| www.142948.com-彩8娱乐网站| www.218281.com-有正规的网络彩票吗| www.288588.com-彩票对望码形式| www.393115.com-9亿9彩票网-| www.513722.com-体彩排列3预测字迷| www.585397.com-首充1元送34彩金| www.657967.com-新利彩票登录| www.761408.com-网上打彩票-| www.833976.com-日景彩烟价格| www.891847.com-分分中彩票2018| www.953479.com-体彩排列3预测汇总| www.996460.com-龙江彩票-| www.my.cc-彩票单双大小规律| www.ni57.com-福建体育彩票爱彩乐| www.3xy.cc-亚洲足彩公司有哪些| www.61kk.com-心脏彩超讲解| www.0073.org-福彩1d怎么买| www.7691.pw-美宝莲彩妆加盟| www.24041.cc-足球彩票妙招| www.66070.cc-青海福彩双色球开奖| www.094818.com-彩票3d图谜第三版| www.158423.com-竞彩比分直播有料| www.252970.com-广东福彩好彩一遗漏| www.320062.com-彩票306网址| www.387709.com-七星彩守号30年| www.523155.com-体彩36期大乐透| www.603172.com-彩95平台下载| www.670519.com-星彩网网址是多少| www.744013.com-福彩三d跨度对照表| www.811178.cc-九州彩票靠谱吗| www.872991.com-秋业说彩专栏| www.985237.com-竞彩单场保本对冲| www.et67.com-彩神官网登录| www.uy34.com-甘肃快三彩控| www.03md.com-彩裤宝典ios| www.68fl.com-分分彩追钱-| www.0516.wang-江苏快三豹子多少钱| www.8710.love-澳彩风情现场开奖| www.37170.com-彩票好运来-| www.77291.cc-彩客网网页版| www.024175.com-彩票历史开奖大全| www.092011.com-一分时时彩计划人工| www.155748.com-ios版好彩客| www.274675.com-时时彩斗牛怎么玩法| www.356726.com-竞彩足球怎么看| www.434729.com-体彩店位置-| www.522053.com-网上不能买彩票吗| www.586210.com-七乐彩杀号定胆澳客| www.655603.com-七星彩结果开出| www.772415.com-博彩套利骗局| www.853579.com-彩6精华版网站| www.909754.com-南京彩虹关爱中心| www.968272.com-8828彩票真骗局| www.cai8411.com体彩开奖结果| www.jr26.com-腾讯快三真的假的| www.zd68.com-福彩周刊电子报| www.16om.com-投福彩是什么意思| www.427.me-乐盈彩票骗局| www.3598.bid-釉下彩的餐具| www.8532.biz-彩票奖池金额多少| www.46026.com-3分时时彩开奖官网| www.87978.cc-中国体育彩票胜平负| www.033177.com-大发快三计划回血| www.099661.com-炫乐彩票六年实力| www.155237.com-胜负彩开奖规则| www.271189.com-c59彩票-| www.347347.cc-易点彩票一手机版| www.414484.com-建盏七彩光加水| www.509821.com-彩神交流吧-| www.569152.com-天天存款送礼金彩票| www.631034.com-如何查看彩票中奖| www.689665.com-新浪爱彩不能用了| www.758856.com-2019彩票新闻| www.884619.com-高频彩真的能赚钱吗| www.956354.com-彩票学-| 华夏彩票www.hx1183.com| www.xv3.cc-有靠玩彩票生活的么| www.of95.com-足彩网比分直播| www.7rj.com-体彩门头标准图片| www.54jv.com-沈阳福彩发行中心| www.462.bid-彩票是穷人改变命运| www.3376.com-人人中彩票管理员| www.8152.shop-中国彩票竞彩网| www.21491.cc-彩票网站忽然打不开| www.56172.com-掌中彩骗局-| www.92973.com-广东手机体彩客户端| www.037272.com-时时彩5星缩水| www.237542.com-体彩竞彩网比分网| www.304018.com-甘肃福彩中心官网| www.362704.com-中彩大乐透开奖结果| www.437499.com-下载上海福利彩票| www.520164.com-cl李彩琳崩溃| www.578378.com-彩票网大转盘| www.635418.com-七彩阳光视频全集| www.768698.com-常州体育彩票| www.839585.com-竞彩收米动态图| www.897007.com-美国兆彩-| www.953141.com-七乐彩机选2注| www.984407.com-神童免费资料中彩网| www.dp98.com-哪个省的快三比较真| www.sh28.com-竞彩500万app| www.9gm.com-天天乐彩票网登录| www.54rf.com-体彩金孔雀中奖率|