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.964071.com-彩票数据分析合法吗| www.fc20.com-官方时时彩是真的吗| www.276725.com-快三两不同概率计算| www.126470.com-网络上的彩票被骗| www.576509.com-可乐的彩票专栏| www.655873.com-中国足彩票竞彩官网| www.731363.com-易彩堂是什么网站| www.801505.com-能猫彩票-| www.871103.com-彩票投注计算器胆拖| www.933806.com-彩票可以网上兑奖吗| www.984450.com-彩运网cy553| www.un5.com-六彩彩票123| www.239700.com-福州快三查询| www.8015.top-彩票指南彩搜网结果| www.8721.xyz-明发彩票平台| www.ec85.com-大发快三怎么稳赢| www.3tk.com-菠菜公司官网博彩| www.347.bid-双色球福彩中彩| www.7754.cm-胜负彩最新伤停| www.53452.com-好彩堂总论坛| www.414040.com-挂彩了-| www.076917.com-跟彩票计划的技巧| www.452.me-大发快三怎么计算| www.26088.com-彩虹是条虫-| www.819757.com-关于买彩票的电影| www.959734.com-盈彩网官方下载| www.703958.com-彩票那期中奖人最多| www.936575.com-彩客彩票老版本| www.1fy.cc-五彩缤纷福满天| www.5239.xyz-能挂机的彩票网站| www.706352.com-福彩3d坐标走势图| www.882719.com-购买易彩彩票靠谱吗| www.gu77.com-开福利彩票店| www.14vt.com-黑苍蝇福彩3d图厍| www.0770.loan-彩票137app-| www.664866.com-彩票复式怎么买| www.771492.com-时时彩五星单式漏洞| www.868303.com-九亿彩票骗局| www.963830.com-6701彩票导航| www.cai4848.com武汉快三走势图今天| www.r37.cn-万达彩票平台可信吗| www.4955.biz-超级大乐彩开奖视频| www.919632.com-开发一个彩票软件| www.787183.com-两元彩票网走势| www.934095.com-福利彩票预测对准| 顶尖彩票www.168153.com| www.0439.org-懂球帝可以买足彩吗| www.26649.com-足彩那个网可以买吗| www.026982.com-韩国彩票制度| www.749738.com-分分彩票软件下载| www.3698.shop-苹果网彩票-| www.632905.com-竟彩蓝球让分胜负| www.110528.com-四川省快三-| www.61ok.com-体彩p3跨度遗漏| www.749748.com-犀牛彩票下载| www.059920.com-中央对福彩作弊事件| www.xf8.com-福彩双色球彩摘网| www.644053.com-发型彩票要求| www.33544.com-古代彩票公式| www.84460.com-安装彩钢瓦价格表| www.039569.com-天天乐彩票合买大厅| www.122900.com-海南天天中彩票| www.909916.com-最新双色球彩民乐| www.970651.com-彩票高手带计划| www.kw89.com-手机彩票计划软件| www.639614.com-推店竞彩-| www.732597.com-竞彩足球比分彩客| www.854384.com-pp彩票在哪里下载| www.947416.com-排列3彩吧图库| www.01788.cc-04100期彩票| www.947731.com-中国彩吧一更懂你| www.330876.com-好游快爆下载乐彩网| www.03950.com-辽宁省福彩官方网站| www.927823.com-派彩每日推荐下载| www.182186.com-江苏福彩快三手机版| www.290654.com-澳门快三走势| www.027276.com-易彩票1-| www.35178.cc-七天彩江苏快3| www.802718.com-体有彩票开奖号码| www.j47.xyz-超级彩票助手手机版| www.791148.com-福利彩票机选器工具| www.863285.com-时时彩开奖器采集| www.929050.com-云彩厅彩票骗局| www.979743.com-玩赚彩票软件可信吗| www.cp232.com-怎么玩快三才能赚钱| www.751132.com-重庆时时彩助手| www.279657.com-高频彩连赢三年| www.384802.com-大乐彩票开奖查| www.689114.com-福彩巅峰独胆| www.787899.com-彩票手机版哪个最好| www.873846.com-体彩非常真实| www.955980.cc-亚洲首富彩票| 大赢家彩票平台www.810629.com| www.986965.com-彩票定位胆算法| www.83ia.com-吉林快三微信群技巧| www.903608.com-万豪彩票网站| www.865559.com-胜负彩澳客网电脑版| www.99156.cc-时时彩怎么玩必输| www.763291.com-福建福彩票-| www.952577.com-96086时彩-| www.cj08.com-北京极速快三下载| www.777794.com-买彩票的app排行| www.846111.com-私彩破案追回| www.900522.com-教我买彩票-| www.956510.com-富贵彩是骗局吗| www.999665.com-福彩3今天怪字神图| www.bl75.com-彩神软件-| www.764658.com-七星彩加急版图| www.829654.com-皇帝彩票资金安全吗| www.897993.com-彩票合买口号| www.974129.com-手机在线体彩软件| www.cai2999.com北京福彩快三开奖号| www.422141.com-体彩大乐透怎样对奖| www.561287.com-彩牛彩票客户端下载| www.48ix.com-福彩logo小图标| www.3272.xyz-万达彩-| www.00684.com-福彩3地胆码| www.822592.com-彩票丢了怎么办| www.916559.com-私彩平台大数据| www.974489.com-福彩开奖号码今天的| www.gn4.cc-河北快三免费计划| www.309738.com-山东福彩网站| www.399488.com-河南足彩多久兑奖| www.535776.com-彩票注怎么算| www.26uj.com-做福利彩票站赚钱吗| www.150485.com-爱彩乐有app吗| www.515383.com-网上购买七星彩| www.946695.com-吉林福彩快3开奖号| www.fy12.com-提现快彩票-| www.5ke.com-刘军时时彩教程全集| www.610135.com-彩票777好不好| www.704518.com-265彩票客户端| www.792858.com-彩票兑大奖流程| www.879392.com-香港富彩网-| www.bh04.com-代玩彩票兼职五十块| www.yn53.com-快三有多少几率中奖| www.5905.me-晋中体彩中心| www.723337.com-天下彩天空彩免费资| www.951935.com-菲律宾体彩天下公司| 博友彩www.166125.com| www.mc07.com-彩票app下-| www.r64.com-中彩手彩票电脑版| www.62jg.com-广东福彩网站主之家| www.293500.com-河南福彩票-| www.698681.com-快三冷号-| www.763863.com-彩票老司机软件下载| www.862313.com-彩票程序的原理| www.919934.com-彩票模拟摇奖机| www.972450.com-菠萝彩魔图-| www.pi5.com-甘肃快三15号| www.775185.com-七星彩容易中奖吗| www.947031.com-北京朝阳区体彩中心| www.lz65.com-重庆时时彩新版本| www.006000.com-体育彩票能中吗| www.661856.com-中福时时彩官网平台| www.009563.com-手机彩奖-| www.867605.com-算局七星彩和排列五| www.15973.com-七乐彩的玩法| www.640038.com-新时时彩开奖走势| www.738002.com-福利彩票微信骗局| www.839717.com-澳客彩票网杀号定胆| www.945799.com-福建体彩精英论| www.cai3899.com福彩快三上海| www.69364.com-韩国彩票预测|