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.np89.com-广西福彩开奖助手| www.857612.com-彩之源app靠谱吗| www.922099.com-彩678是真的吗| www.980967.com-彩针糖挤出机| www.gt2.com-北京快三游戏规则| www.oh82.com-河北保定快三走势图| 亿彩堂www.87668z.com| www.276100.com-爱彩是合法的吗| 818合彩www.www.9889hc.com| www.7723.com-足彩今日伤停| www.221511.com-正规手机彩票平台| www.210669.com-一分钟极速快三计划| www.057662.com-福利彩3d资料| www.09kg.com-⑧号彩票论坛马会开| www.692707.com-网上乐乐彩是真的吗| www.892256.com-彩票榜邀请码谁有| www.55106.com-中国福彩作弊案| www.al00.com-海南七星彩论坛| www.ty92.com-快三群有拖吗| www.05wd.com-水彩漆十大品牌| www.74zj.com-彩票快餐怎么样| www.4811.cc-时彩平台招人要求| www.275986.com-大发快三骰子模拟器| www.01zx.com-数字彩票能玩吗| www.1642.cn-澳洲3分彩开奖时间| www.338036.com-彩民中奖三天没睡觉| www.815260.com-竞彩交流群-| www.988772.com-快三投注第一网站| www.wh12.com-大通彩票手-| www.390166.cc-12500万彩票| www.590272.com-网易竞彩比分| www.709570.com-时时彩三星做号软件| www.862331.cc-球探彩客彩票| www.990750.com-重庆7时彩是怎么玩| www.zg36.com-快购彩票3最新地址| www.933269.com-快三计划群的秘密| 500彩票www.50024t.com| www.356983.com-彩票实名制-| www.90792.com-晚晚好彩下载| www.93qd.com-一分彩对应码| www.25625.cc-彩库女装官网| 亚洲彩www.68568h.com| www.266891.com-中福系统彩票平台| www.480221.com-新浪竞彩北单| www.678379.com-福彩乐透乐网址| www.902127.com-快三怎么玩才赚钱| 创世纪彩票www.36787g.com| www.7525.net-竞彩彩下载-| www.429986.com-儿童水彩笔-| www.954923.com-怎么破解黑彩充值| www.760014.com-安徽福彩自助终端机| www.553896.com-竞彩足球怎么算| www.cai49.com-快三开奖结果河北| www.772447.com-甘肃兰州快三查询| www.874197.com-彩票手机怎么提现| www.949941.com-广东体彩11先5| 彩神购彩www.csgc3.com| www.sn49.com-分分彩二星杀号技巧| www.53vx.com-奔腾彩票平台| www.3477.vip-彩票七彩乐-| www.23177.cc-福建快爱彩乐| www.36004.com-最新互联网彩票新闻| www.066959.com-手机博彩软件免费| www.cp362.com-体彩5d开奖号码| www.ye00.com-全新韩国快三| 幸运彩票www.luck886.com| www.158734.com-黑龙江彩票大奖| www.397765.com-傲赢彩票网是假的| www.381385.com-七星彩第19013| www.gz77.cc-北京快三每天几期| www.063639.com-时时彩有多少网站| www.900229.com-江苏爱彩乐11选5| www.2008.cm-彩虹6号加速器北美| www.320969.com-一1福体彩开奖号码| www.512251.com-小清新手绘彩铅画| www.984645.com-国际彩票注册平台| www.820568.com-光明全天时时彩计划| www.907658.com-郑州彩票诈骗| www.978640.com-c彩61软件-| www.cp9211.com-下载中彩彩票| www.567165.com-易旺购彩大厅| www.661424.com-北京实时彩-| www.021131.com-体育彩票玩儿法| www.999912.cc-希腊十分彩是什么彩| www.60386.com-号彩票论坛-| www.113475.com-qq上买彩票-| www.208568.com-福彩3d精华布衣2| www.3064.pw-淘宝送的彩票在哪看| www.320408.com-百宝彩一上海快3| www.053711.com-足彩竞彩投注| www.146145.com-彩宝彩票提款安全吗| www.61um.com-全民足球彩票靠谱吗| www.5799.biz-体彩11选5乐玩法| www.019856.com-今天体育时时彩开奖| www.082031.com-澳门三分彩哪些平台| www.956499.com-养七彩神仙鱼12招| www.hy29.com-巨彩彩票安全吗| www.4520.xyz-体彩直选票开奖| www.30826.com-彩票中奖现实吗| www.37223.cc-四川体育彩票开奖| www.947110.com-高频彩票的原理| www.790568.com-幸运快三最多连几期| www.004566.com-褔彩开奖结果| www.231322.cc-网上购彩吧-| www.ql97.com-今天七星彩开奖号码| www.849079.com-竞彩258官方客服| www.917113.com-彩客网触屏版胜平负| www.988173.com-体彩大乐透专家总汇| www.bu35.com-好彩票app-| www.353311.com-彩塘不锈钢批发市场| www.441000.com-炫彩字体软件下载| www.522315.com-励赢彩票是真的吗| www.979963.com-开彩票店的要求| www.608966.com-红牛彩票用户注册| www.08702.com-陕西彩票app下载| www.890153.com-赢彩计划下载安装| www.62871.cc-6合宝典彩下载| www.506244.com-今天的银海布衣彩图| www.04824.com-3d彩图-| www.788155.com-360胜负彩-| www.38118.com-大彩网是不是注销了| www.012550.com-算局七星彩-| www.587680.com-佳能彩色复印机价格| www.aa29.cc-褔建彩民论坛| www.wt18.cc-彩宝网站-| www.26882.cc-可以中彩票的软件| www.253184.com-时时彩软件开发| www.980564.com-9968彩票-| www.xp04.com-彩票app下载送钱| www.66gc.com-爱米水性指彩价格| www.98296.cc-时时彩老玩家教学| www.69493.cc-彩票门户网站源码| www.72700.com-精彩大片播放器下载| www.553165.com-安庆体彩兑奖中心| www.948399.com-今晚福彩3d开机号| www.go84.com-河南体育彩票官网| www.76.gg-万达娱乐彩票app| www.53268.com-福彩买法-| www.503691.com-彩票票下载-| www.65408.com-天天中彩吧图谜大全| www.360189.cc-黑彩的服务器在哪里| www.428689.com-彩宝都有哪些| www.cl88.com-彩票平台冻结的账号| www.212853.com-八手巴购彩票骗局| www.329050.com-118彩票-| www.30516.cc-京东彩票北京28| www.008289.com-今晚七乐彩开奖信息| www.071662.com-亚盘500彩票| www.144136.com-福利彩中奖是真的吗| www.215678.com-306官方彩票| www.276500.com-北京彩票中心官网| www.329498.com-武汉市福利彩票中心| www.381259.com-七乐彩31期预测| www.450883.com-彩8正版下载安装| www.233750.com-福彩3d2000期| www.47hk.com-59彩票官方网站| www.133160.com-怎样开福利彩票店| www.207806.com-49彩票官网-| www.18776.cc-5933彩票-| www.358211.com-天才彩票网址| www.438666.com-五彩绳-| www.4960.cc-奥发彩票-| www.15896.cc-休彩排三试机| www.52823.cc-好头彩彩票-|