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.11261.cc-威尼斯人博彩| www.774077.com-儿童创意水彩画图片| www.885072.com-合肥福彩兑奖中心| www.982149.com-新彩网i新彩网| www.ii01.com-体彩竞彩实体店| www.356025.com-玩彩吗是什么意思| www.530838.com-黑客会攻击彩票网么| www.607048.com-彩票写好纸-| www.243109.com-福彩江西快3玩法| www.0288.me-玩彩票玩破产案例| www.00184.com-国彩是黑平台吗| www.28786.cc-快3彩票网站彩网址| www.362520.com-雨后彩虹的形成神话| www.030749.com-华为娱乐彩票| www.537881.com-什么是有彩色系| www.03808.com-买彩票该不该放弃| www.689573.com-9号彩票app下载| www.789252.com-老郑足彩博客| www.922899.com-想接手一家彩票站| 福彩网www.5522w.cc| www.ha04.com-彩16官网下载| www.90943.com-天天中彩吧字迷| www.427275.com-足彩总进球开奖结果| www.616704.com-199期彩吧图库| www.829200.com-彩99c99-| www.75ah.com-福彩3d形态a| www.362076.com-快钱彩票群-| www.220970.com-彩票助赢软件网页版| www.293545.com-河南快三电子走势图| www.521731.com-腾讯时时彩谁开的| www.871077.com-福彩3d星彩网| www.53219.cc-时彩后一技巧稳赚法| www.0006.cc-彩票有六位数的吗| www.69393.com-福彩三d守号| www.234116.com-今天快三出奖号码| www.460057.com-天际彩票平台| www.679585.com-人人中彩是真的吗| www.848565.com-五分快三买大小秘诀| www.981548.com-高频彩票揭秘| www.mf35.com-福彩快乐-| www.922883.com-中国福彩电话| 幸运彩票www.73166h.com| www.108651.com-买彩票应用-| www.190536.com-江苏e球彩玩法| www.223645.com-彩乐乐网彩票| www.155394.com-最赚钱的彩票玩法| www.75oy.com-旋子彩画手绘构图| www.hl02.cc-福彩1d稳赚-| www.31xp.com-温岭彩虹小镇| www.929700.com-彩票668-| www.980332.com-大彩鲸快三助手下载| www.mz2.com-福彩快三网站是多少| www.wh04.com-肝素逸彩-| www.110945.com-彩吧图库3d连线| www.18295.com-株洲福彩中心| www.966793.com-彩票人入门与技巧| www.c1.cm-快三三不同号规则| www.yo93.com-体育彩票多久过期| www.257959.com-105彩票怎么下载| www.332029.com-十选五是正规彩票吗| www.51186.com-一彩票下载-| www.xz25.com-快三控制住能赢钱吗| www.019557.com-腾讯彩票幸运28| www.092026.com-上海彩票店利润| www.865557.cc-快三有人赚钱的吗| www.965734.com-彩神8ios下载| www.ek19.com-体彩排列5-| www.yf99.cc-甘肃快三查询| www.098873.com-ig彩票平台官方网| www.3652.in-大唐娱乐彩票下载| www.326365.cc-万彩吧彩票预测| www.338442.com-宝贝计划时时彩| www.0506.top-中囯彩吧更懂彩民| www.93814.com-福彩快三改时间| www.tm83.com-福彩3d一定牛预测| www.88364.cc-世界彩票中奖纪录| www.tl04.com-江苏快三豹子技巧| www.255879.com-天天福彩彩种| www.63214.com-驻马店西平农村彩礼| www.572796.com-华宇app买彩票| www.536770.com-福利彩票都有啥| www.cp5561.com-彩票快三有口诀吗| www.1238.me-彩票什么算豹子| www.45gl.com-三分彩计划一码| www.qu47.com-福利彩票pc是什么| www.14uq.com-本日福彩三d谜语| www.2020.pro-恒发彩票官方网站| www.940888.com-8816网络彩票| www.45by.com-rb彩虹软冰淇淋机| www.372708.com-怎样网上投注福彩| www.330975.com-彩票3d人人中奖| www.422224.com-中国体彩论坛| www.530810.com-黑客攻击福利彩票| www.529276.com-彩票延迟开奖事件| www.4888.online彩票排3开机号| www.344666.com-大唐时时彩app| www.702434.com-竞彩158app-| www.og21.com-福彩快3投注| www.21nh.com-福利彩票考题| www.646543.com-如何让彩票提前开奖| www.728721.com-京东彩票如何进入| www.554463.com-彩票励志诗-| www.316100.com-上海体彩申请| www.359895.com-福彩3d断组| www.590975.com-大富彩平台-| www.144048.com-竞彩威廉怎么看平局| www.267281.com-6701彩票网-| www.09kz.com-幸运分分彩开奖历史| www.603.com-时时彩号码怎么预测| www.48ze.com-彩乐瀑安全吗| www.1488.site-下载彩库宝典老版| www.488170.com-福彩3d杀号网| www.556418.com-快三爱彩乐江苏| www.608876.com-彩宝贝彩票下载安装| www.051040.com-彩票网站开发怎样做| www.521717.com-网上玩时时彩会抓不| www.313067.com-福彩17500字谜| www.326962.com-全国彩票试机号| www.jg42.com-吉林快三购买| www.53686.cc-疆时时彩开奖结果| www.049007.com-排列三牛彩l网预测| www.141726.com-爱乐彩票官方下载| www.132410.com-平顶山订婚和彩礼| www.74sq.com-长沙开个福利彩票店| www.7914.vip-辉腾团队时时彩网址| www.163232.com-七乐彩复式投注表| www.e85.in-七乐彩在线机选一注| www.100082.cc-倍喜彩票平台| www.6739.cm-竞彩视频-| www.12992.cc-中体彩唯一官网| www.53815.cc-深圳东方亮彩| www.92446.com-立彩有几种玩法| www.274900.com-体育彩票七位数开奖| www.26ne.com-快三怎么买稳中| www.5626.com-福彩走势百度| www.872585.com-最新湖南体彩快报| www.884466.com-乐彩双色球论坛综合| www.965604.com-爱乐透彩票福彩体彩| 爱彩www.235953.com| www.068960.com-快三模拟开奖| www.521666.com-新浪时时彩遗漏| www.7654.com-体彩标志颜色| www.99447.cc-体育彩票7位数规则| www.055832.com-彩票6-| www.117929.com-江苏e球彩直播| www.190396.com-快三赢钱的技巧规律| www.329050.com-118彩票-| www.440113.com-福彩中心在哪里镇江| www.19we.com-体育彩票活动内容| www.113015.com-竞彩猫电脑版下载| www.22453.com-盛兴彩票手机官网| www.028648.com-易彩票是不是合法的| www.092355.com-足彩串关玩法表| www.16617.cc-3d福彩怎么看| www.58516.com-釉中彩餐具有毒吗| www.020847.com-体育彩票开机号| www.101175.com-彩票33软件破解器| www.166552.com-快三平台代理| www.113902.com-彩票彩民版| www.284224.com-彩票店名大全| www.357675.com-乐彩平台开户| www.436338.com-竞彩买冷门-| www.225524.com-彩票导师微信| www.399532.com-海南七星彩本期资料|