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.653967.com-金龙彩票安卓版下载| www.qy83.com-分分彩彩-| www.611197.com-经营福彩利润是多少| www.743244.com-酷彩app苹果下载| www.858725.com-吉林快三号码遗漏号| www.947903.com-竞彩乐福彩群英会| www.cai4599.com北京快三助手安装| www.898959.com-送外卖帮忙买彩票| www.cu95.com-加盟彩票店要多少钱| www.502669.com-多彩云众筹和多彩投| www.569196.com-彩票梯子计划软件| www.659342.com-权威彩票-| www.79ka.com-光明时时彩计划| www.566469.com-河南福彩票012期| www.875018.com-太原体彩店-| www.963314.com-内蒙福利彩票双色球| www.ox00.com-3d彩神-| www.08tt.com-九万彩下载-| www.977084.com-订婚退彩礼-| www.rm75.com-快三中奖几率计算| www.sh88.com-重庆5分时时彩| www.38ib.com-彩票王马洪平| www.077336.com-派彩网官方网站| www.205960.com-新韩国快三开奖公布| www.28pz.com-7意彩app苹果版| www.707551.com-乐彩cc33下载| www.859378.com-河南福彩3d综合版| www.5xn.cc-彩源码-| www.132705.com-彩票网站有哪些| www.222488.com-彩票平台注送彩金| www.369453.com-三色球彩票-| www.505322.com-彩票平台赚钱不| www.568940.com-彩民乐树图-| www.365428.cc-新起点彩票抢红包| www.ci30.com-一分彩是不是真的| www.08gy.com-七星彩番外小馒头| www.97nz.com-正宗港彩王-| www.54fn.com-上海快三开结果查询| www.753189.com-中彩吧彩票正规| www.0598.cc-黑彩代理怎么返点| www.666506.com-那种彩票店风水旺| www.i58.org-河南快三一定遗漏| www.53pn.com-炫彩cp稳赚团队| www.8787.vip-人工智能扫描彩票| www.lr23.com-旺彩双色球官方网站| www.839915.com-责任彩票的九个方面| JJ彩票www.94580.cc| www.05ep.com-彩29彩票违法吗| www.812879.com-香港买的彩金好不好| www.45196.com-无锡彩票店营业时间| www.856077.com-彩翼贷-| www.51hl.com-足足彩105期彩| www.751833.com-黑客彩票中奖法| www.626097.com-深圳市鑫彩晨| www.872877.com-七星彩守号中奖故事| www.983554.com-彩票66网站-| www.oj65.com-吉林市彩票开奖查询| www.167.red-足球彩票任选九预测| www.55208.com-王博士彩票中奖秘籍| www.846490.com-河南兰考结婚彩礼| www.067076.com-彩吧天气网首页| www.761201.com-结婚彩礼钱是给谁的| www.891583.com-快三怎么买稳赚| www.970178.com-福彩3d秘密通道| www.cai1960.com中国福彩快3网| www.vb45.com-香港权威彩神网网址| www.2532.org-彩票k线图预测| www.943709.com-快三代理注册公司| 500彩票www.50080k.com| www.175598.com-快三骰子开奖助手| www.078007.com-七星彩中多少号有钱| www.687060.com-体彩排三排五论坛| www.791306.com-江苏快三推算和值| www.868167.com-老时彩360-| www.ll59.com-今日彩票app快三| www.4ry.com-彩票中奖注数| www.104161.com-好彩柠檬双爆| www.305468.com-调侃彩票的真谛| www.394780.com-彩虹六号买那个版本| www.675222.com-竞彩规则改变| www.778435.com-彩之乐网站-| www.st74.com-体彩19031期| www.049.site-体彩天-| www.5238.in-中国体彩彩票走势| www.05of.com-儿童彩铅铅成品画| www.573394.cc-倍数最高的彩票网站| www.663766.com-体彩篮球竞赛结果| www.739179.com-体彩竞彩网首页| www.575274.com-中彩网官方网站首页| www.691385.com-乐乐彩票分析app| www.801963.com-福彩大花猫图库3d| www.898708.com-足彩310猜几场| www.965303.com-刮彩票哪种更容易中| www.rv43.com-牛蛙彩票正版| www.973457.com-彩虹第一集-| www.16810.com-彩票撕坏了还能兑奖| www.324271.com-特区七星彩论坛头尾| www.014333.com-乐购彩彩票安全吗| www.513887.com-福利彩票加大游戏| www.723171.com-江苏常州体彩网| www.tq07.com-福利彩票申请流程| www.589908.com-今日3d彩报第一版| www.210373.com-体彩pl3平台出租| www.616546.com-在哪买竞彩-| www.6668.org-赌彩票骗局视频| www.872467.com-我要看安徽福彩网| www.659274.com-辽宁省福彩快乐12| www.956527.com-快三如何看走势图| www.j67.com-湖北彩票近期中奖| www.299619.com-彩8下载app注册| www.603257.com-万众彩-| www.798465.com-8彩是不是真的假的| www.1lm.com-乐彩网福彩3b首页| www.7700.cm-特彩吧齐中网论坛| www.674511.com-淮安最新彩票店转让| www.865283.com-人人中彩票苹果系统| www.yu84.com-彩票机打中奖| www.62124.com-全民彩票停止销售| www.657967.com-新利彩票登录| www.810313.com-新宝彩票官网| www.349122.com-ibb娱乐彩票官网| www.569186.com-靠数学公式买彩票| www.016586.com-网易福彩网-| www.595503.com-手机虎扑篮彩神棍区| www.706471.com-免费的彩票网站大全| www.6367.org-福彩快讯-| www.87633.com-彩票怎么看龙| www.278777.com-40度彩票app| www.739565.com-福彩3过综合走势图| www.563684.com-皇冠彩票柬埔寨| www.632582.com-立彩网页快速入口| www.267317.com-新浪数字彩票频道| www.488521.com-alcp阿狸彩票| www.436800.com-体彩赛车-| www.473.cm-快三限号销售| www.076722.com-6位数的彩票有哪些| www.07po.com-黑龙江省体彩6十l| www.46il.com-易旺彩票可以提现嘛| www.41ed.com-体彩6加一几点停售| www.2813.wang-人人彩票网合法吗| www.08098.com-多彩贵州网是国企吗| www.966929.com-怎么下载中国彩票| www.mq2.com-江苏快三推荐和值| www.rn41.com-红包彩票app| www.799709.com-天天彩票送彩金| www.878697.cc-体育彩票大乐透杀球| www.951707.com-500万竟彩网| 盈彩www.yc7701.com| www.005157.com-518彩票官方网| www.tj71.com-彩王老头-| www.644835.com-9购彩票-| www.823247.com-深圳福彩官方| www.gy41.com-共享彩票是坑人的么| www.215080.com-体育彩票要几位数| www.190399.com-白宝彩票快三吉林| www.484700.com-福州彩票中奖| www.326389.cc-6合和彩今天开奖| www.801742.com-长春彩票自助终端| www.09ky.com-天霁彩票95003| www.256885.cc-快三走势图app| www.949285.com-dd福彩下载-| www.211351.com-彩报图库-| www.732347.com-大发快三和值顺口溜| www.986445.com-竞彩足球360混合|