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.00sh.com-易赢彩票软件| www.1960.cm-快三大派奖-| www.881376.com-篮彩推荐分析| www.969047.com-8k彩票合法吗| www.bu77.com-快三过滤工具| www.yv40.com-天天中彩软件下载| www.53mz.com-宏祥彩票-| www.809837.com-辛运彩票幸运相伴| www.916508.com-致富彩票网-| www.033917.com-凤凰彩票app安装| www.21445.com-时时彩和值技巧稳赚| www.031680.com-七星彩历史号码查询| www.150127.com-贵州快三号吗推荐| www.57wm.com-契诃夫彩票人物分析| www.697400.com-时时彩游戏规则图片| www.805877.com-体彩福彩刮刮卡规律| www.892426.com-12快乐彩开奘结果| www.968480.com-九彩售后-| www.ir77.com-竞彩足球胜平负| www.o20.top-网络彩票怎么报警| www.568413.com-福彩3b334段组| www.654182.com-中国福利彩票第一位| www.765475.com-今晚七星彩神算子| www.842646.com-福利彩票从哪年开始| www.914189.com-彩神争霸有风险吗| www.978038.com-富彩彩票是骗局吗| www.nj0.cc-上海快三助手αpp| www.29725.com-富人人彩票74期| www.1264.xyz-通辽快三-| www.17184.com-今晚足球彩票对阵表| www.77471.com-博乐彩票骗局模式| www.095279.com-购彩论坛网址| www.151582.com-官方网时时彩被骗| www.0652.cn-中奖彩票生成| www.8310.net-江西彩票品种| www.199471.com-全民快三彩票网| www.432135.com-彩票收益法律法规| www.661716.com-刷彩票单是什么意思| www.829870.com-申请彩金送58| www.961573.com-彩票黄金分割确定号| www.sk8.com-上海体彩中心在哪啊| www.761262.com-快三辅助软件骗局| www.699348.com-乐和彩票微信群| www.846787.com-竞彩必发盈亏| www.932009.com-网上在哪买七星彩| www.sk3.cc-老时时采彩开奖| www.x20.top-彩神软件合法吗| www.3758.cn-注册彩票站多少钱| www.501466.com-易彩云彩票平台| www.706567.com-福利彩票如何提现| www.838059.com-竞彩五大看盘技巧| www.052876.com-手机彩票投注站点| www.157122.com-快乐彩20选八| www.331022.com-乐彩大发快三下载| www.450577.com-梦被蛇咬七星彩号码| www.576439.com-福利彩票倍数和注数| www.887949.com-赛马赛果及派彩| www.495446.com-博彩app违法吗| www.573538.com-如何画彩票k线图| www.664687.com-k3k3的网址彩票| www.751491.com-足彩14场胜负指数| www.837907.com-65彩票网站-| www.908305.com-福彩七乐彩规则| www.977942.com-快三大小单双怎么买| www.il4.com-內蒙快三-| www.se16.com-足球彩票500| www.05gg.com-家彩网排三胆码杀码| www.71dc.com-今期六开彩跑狗图片| www.891818.com-彩计划老版本| www.987133.com-辽宁快三每天多少期| www.qv91.com-河北体彩排五开奖号| www.23628.cc-彩神8快3开挂辅助| www.100089.com-乐优彩票苹果| www.556000.com-七乐彩现奖池| www.669551.com-新浪网彩票今日运势| www.776401.com-体彩跟福彩的区别| www.881764.com-01彩票是不是合法| www.cai8567.com大发彩票下载安装| www.047447.com-彩票号码生成器在线| www.295931.com-湖北快三杀号技巧| www.761362.com-体彩中心大乐透| www.866538.com-昨天3d体彩开奖| www.vc23.com-易彩注册-| www.922170.com-下载一定牛江苏快三| www.019927.com-华阴体彩店转让| www.888090.com-赛马资讯赛果及派彩| www.740457.com-澳彩水位分析| www.807341.com-足彩赔率及盘口| www.874434.com-今日头条老谢说彩| www.961809.com-qq在哪买彩票| 凤凰彩票www.77803m.com| www.218207.com-彩票幸运农场走势图| www.117004.com-七星彩奖金规则| www.3kl.com-彩票14-| www.051818.com-彩票竞猜没金豆| www.900020.cc-福利彩票装修效果图| www.rg16.com-投注平台彩种多| www.55827.cc-黄金8彩票网可靠吗| www.78809.com-福彩3d高手经验谈| www.033914.com-凤凰网彩网-| www.717916.com-彩虹寓意-| www.842107.com-体彩公益行-| www.966111.com-一定牛快三遗漏号码| www.17188.cc-新型体彩店-| www.176812.com-福建体育彩票| www.689096.com-山东彩沙龙论坛| www.791201.com-我要买彩票排列三| www.863989.com-福彩pc-| www.922159.com-彩礼钱一般给多少| www.971203.com-彩天地app-| www.cp3122.com-快三游戏单机版下载| www.398281.com-七星彩周日几点开奖| www.087093.com-足球彩票分析推荐| www.143292.com-彩虹8app-| www.220893.com-幸运快三预测网站| www.7137.bid-萝莉炸金花带彩票| www.959590.com-vr彩票漏洞-| www.97rz.com-彩票精准计划app| www.548982.com-128彩网-| www.2085.me-苏宁彩票-| www.3580.biz-360连红彩票| www.s63.vip-体彩排列三金胆| www.102572.com-马来三分彩开奖| www.4871.vip-卓易彩票可以买| www.uz3.com-马来三分彩开奖记录| www.171370.com-贵州体彩网-| www.3188.in-福利彩票开奖往期| www.532716.com-体彩排列五视频开奖| www.813399.com-福彩已亥猪刮刮乐| www.352048.com-足球竞彩最多连黑| www.78co.com-排列3走势图乐彩网| www.765097.com-金凤凰彩票可信吗| www.53817.cc-横沥东方亮彩| www.356880.com-买彩票死了多少人呀| www.098777.com-福彩包括哪几种| www.1024.pro-赢彩彩票应用合法吗| www.973016.com-百胜快三合法吗| www.hc94.com-分分快三害惨人| www.17qc.com-福彩3d四码聪明组| www.559945.com-免费送彩金的白菜网| www.32666.com-福彩3d天地杀码| www.ib04.com-安徽省彩票兑奖地点| www.190930.com-快三中奖查询表| www.579956.com-七星彩txt百度云| www.553829.com-那个平台能买彩票| www.621306.com-云南福彩有没有快三| www.683487.com-义乌体彩阳光征召| www.744868.com-星光彩票注册| www.806733.cc-网络上买彩票靠谱吗| www.869132.com-数学几何在彩票| www.738100.cc-好运快三下载app| www.804121.com-体育彩票能网上买吗| www.861899.com-qq彩票软件-| www.912575.com-5a彩票网靠谱么| www.964033.com-欢迎光临500彩票| 购彩之家www.gczj9.com| www.568091.com-买彩票要用身份证吗| www.639412.com-开体彩店经验| www.504346.com-易发彩票是骗人的吗| www.8181.mobi-港股博彩股有那几只| www.806029.com-彩361-| www.874504.com-大乐透彩票开奖直播| www.948291.com-福彩3d天气网论坛| www.993706.com-万豪彩票送38元|