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.607181.com-直播彩播是什么| www.58508.com-釉上彩餐具-| www.992.cm-研究彩票趋势图| www.9137.online四川体彩金七乐玩法| www.635061.com-好彩客599-| www.46299.com-看时时彩走势app| www.671261.com-乐盈彩软件下载| www.783549.com-福豪彩彩票可信吗| www.864188.com-体彩任选14场胜负| www.933047.com-网络快三能玩吗| www.987958.com-全能中彩app| www.ph5.com-派彩网江苏快三| www.530001.com-彩8论坛-| www.626354.com-彩生财-| www.723052.com-彩票指南报电子报| www.822228.com-湖北快三早知道| www.913391.com-足彩比分彩客网| www.978412.com-全部彩票网站788| www.pz1.com-福彩3d走势图势图| www.ri27.com-中国福彩下注| www.52qk.com-彩虹网秒赞-| www.2267.cm-彩票快开游戏如何改| www.265468.com-新昌双彩乡下塘村| www.3230.com-齐中网彩天下| www.858579.com-竞彩规律-| www.314522.com-买彩票压大小稳赢| www.66629.cc-红五3d新彩吧图库| www.481577.com-彩票亿乐平台| 彩票控www.7777hv.com| www.859709.com-泉州体彩音乐聊天| www.pw22.cc-珠江彩票app| www.103754.com-体彩排列三定胆方法| www.255130.com-中华彩票快三app| www.130286.com-易彩网能提现吗| www.373078.com-九宫图测彩票实战| www.594676.com-鸿翔彩票-| www.297251.com-快三有哪些规律| www.947957.com-正规购彩票平台| www.id95.com-拿一生赌彩票| www.07593.com-19彩票-| www.95dq.com-金手指彩狗捕鱼客服| www.688590.cc-933彩票苹果版| www.859101.com-6762彩票app| www.47ql.com-丢彩票开抢自杀| www.b54.org-江西快三每天多少期| www.853997.com-五分时时彩走势分析| www.974911.com-安微快三开奖果| www.ha61.com-福利彩票快3怎么样| www.2pt.cc-完美彩票合法吗| www.035318.com-彩票电视软件| www.37ke.com-福彩双色球售卖时间| www.pk11.com-推导彩票-| www.9yd.cc-买体彩犯法吗| www.90ql.com-球赛博彩-| www.2836.cc-用ip代玩彩票| www.7865.vip-十四场胜负彩贴吧| www.28356.com-南京竞彩彩票大奖| www.72504.com-彩票开奖查询29期| www.389906.com-御彩轩计划ios| www.008535.com-wps做彩票走势| www.563459.com-彩票机器人计划| www.702928.com-职业竞彩人的一天| www.949988.com-金誉彩票手机app| www.cai7622.com甘肃快三重点号预测| www.196708.com-彩票开奖情况| www.096647.com-双色球神彩福牛| www.294873.com-重庆英皇快三查询| www.977883.com-足彩买不了-| www.ad8.com-怎样算出快三豹子| www.md29.com-爱乐彩平台下载| www.656380.com-云彩厅合法吗| www.775205.com-七星彩怎样看三等奖| www.860941.com-好彩1开奖记录| www.917957.com-必赢彩票吧-| www.982563.com-一分时时彩计划软件| www.cp8468.com-快三计划手机版| www.721596.com-彩客网北京单场比分| www.66cn.cc-幽默彩票图片| www.272264.com-苏州快三什么意思| www.524727.com-彩票中的数学查可文| www.73pz.com-万彩吧字谜总汇| www.730213.com-新彩吧字谜汇总| www.hx76.com-福彩3d组选走势图| www.253286.com-好彩二-| www.1055.in-安徽快三和值5| www.948167.com-中彩网专家推荐| www.b51.org-彩票308期-| www.930028.com-彩票专用计划网| www.tb4.com-松原快三-| www.87hg.cc-七乐彩奖池是多少| www.220692.com-安装彩中彩-| www.409398.com-1000彩票app| www.49wz.com-体彩6十丨开奖结果| www.717971.com-中国体彩报牛亮最新| www.757500.com-福建省福利彩票工会| www.826198.com-超级彩票代打| www.917305.com-赢彩彩票骗局| www.987693.com-乐优炫彩下载安装| www.nj5.cc-精彩十分-| www.we87.com-彩票体彩开奖结果| www.389953.com-体彩字谜总汇| www.8zt.cc-彩票中奖团队qq群| www.95rp.com-竞彩胆什么意思| www.42686.com-下载彩票彩宝贝导航| www.026501.com-高频彩怎么突破概率| www.246058.com-河北彩票中奖| www.99701.com-彩客化学戈弋照片| www.092513.com-9号彩票app-| www.587831.com-万彩吧246-| www.940.in-双色球彩票怎么玩| www.67068.com-冮苏老快三-| www.71212.com-天禧彩票投注网站| www.126255.com-快捷彩票网投可靠吗| www.261308.com-北京3分彩开奖规律| www.35351.com-8亿彩票交流群| www.75516.cc-彩吧网预测总汇| www.380901.com-云南彩王-| www.528053.com-重庆时时彩透视软件| www.84519.com-福彩刮刮乐领奖流程| www.703346.com-lol彩票广告| www.296310.com-福彩三d开将结果| www.964993.com-微彩票骗人-| www.cl30.com-5分快3是什么彩票| www.338415.com-体彩大乐透复式| www.458163.com-体彩竞技彩欧冠| www.553171.com-张家口体彩中心电话| www.93527.com-足彩无风险对冲套利| www.67048.cc-彩票中奖了怎么联系| www.243666.cc-下载玩彩app| www.28gv.com-福彩3d位积和公式| www.406897.com-北京快三亏-| www.09ym.com-双色球彩票封机时间| www.845776.com-穷人中彩票-| www.903561.com-星光彩票官网| www.959558.com-幸运分分彩怎么分析| 99彩票www.99340.cc| www.am69.cc-内蒙快三推荐号查询| www.pj34.cc-快三彩票有什么技巧| www.731223.com-易彩堂app怎么样| www.897122.com-凯发彩票-| www.962216.com-山东体彩排三论坛| 中彩www.zc35.com| www.885910.com-体彩分析软件哪个好| www.958574.com-七星彩够力奖规律图| www.997402.com-彩票2元网首页首页| www.aj47.com-七星彩购买网站| www.dv69.com-易彩彩票软件| www.vm41.com-牛彩网排列三试机号| www.2gi.com-竞彩足球输了怎么办| www.1462.vip-水彩森林鹿教程画法| www.31973.com-永辉彩票-| www.80084.cc-河内1分彩规则| www.035150.com-彩票平台倍数高| 500万彩票www.35155j.com| 彩票坊www.022hn.cc| www.89551.cc-排三新彩网手机站| www.485460.com-分分彩有几种| www.592521.com-9w彩票新版本| www.669702.com-手机买彩票哪个正规| www.752212.com-快三微信群大小单双| www.857371.com-足彩竞彩比分网| www.921226.com-3d福彩跨度和制图| www.981009.com-七彩寓意-| www.cc90.com-福彩排5开奖号|