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.19io.com-泰安福彩投注站| www.27191.com-安卓版3彩票| www.91207.com-好彩一玩法-| www.325963.com-彩合网王中王| www.332038.com-时时彩为啥会上瘾| www.362209.com-维彩莉染发膏| www.607703.com-如何申请福彩站| www.22293.cc-时时彩必赢投注法| www.569357.com-到店送彩票违法吗| www.676959.com-万彩办公室大师安卓| www.793903.com-福彩3g开奖号儿| www.872634.com-超级赛车彩票怎么玩| www.951740.com-足彩四场2串1| 500彩票www.26299m.com| www.887590.com-彩票中奖哪期兑奖| www.192564.com-35期福彩开奖结果| www.848722.com-重庆时时彩团队招人| www.zz31.cc-上海彩票店转让信息| www.220858.com-大奖彩票官网网址| www.337915.com-今福彩开奖号| www.98128.com-上海快三跨度开奖控| www.029171.com-手机玩体彩屋| www.294752.com-贵州快三下载| www.3739.win-七星彩36组码| www.9522.cc-海南什么私彩天天开| www.794804.com-想开体彩店如何申请| www.936888.com-七乐彩胆拖中奖规律| www.ou86.com-玄学计算彩票| www.57225.cc-彩宝宝app官网| www.05811.com-赠彩金的游戏网站| www.188399.com-福彩快三群-| www.011316.com-一品公子3d福彩| www.71982.com-彩虹世界app盒子| www.944429.com-乐发彩票app| www.988222.com-保定体彩电话| www.ly7.com-黑龙江快三-| www.91567.cc-印第安红好彩| www.068297.com-摇摇乐彩票在线| www.896327.com-七星彩中奖视频| www.970452.com-彩票816邀请码| www.cp844.com-一分快三正规app| www.ml18.com-时时彩注册送10元| www.3zd.cc-凤凰采彩票-| www.59xd.com-香港十分彩开奖记录| www.078024.com-中福彩票众赢导师| www.110324.com-彩票业改革-| www.89246.com-网上彩票害了多少人| www.075567.com-五福团购彩票真假| www.518728.com-惠民彩票怎么用能赚| www.130503.com-农村彩礼-| www.982824.com-互娱彩票邀请码贴吧| www.284181.com-彩色的东西有哪些| www.960141.com-太阳彩票app| www.60uc.com-快三和值遗漏| www.2732.in-江苏快三第一期| www.765267.com-海南七星彩加急版| www.866105.com-腾讯5分彩票官网| www.951146.com-网络中彩网-| www.bf37.com-快彩是骗局吗| www.ty15.com-玩吉林快三的微信群| www.235691.com-乐乐彩票可靠吗| www.318214.com-现在那个彩票可以玩| www.40oo.com-七星彩老鼠精总版| www.612.website时时彩安卓版| www.4028.net-博彩公司sb-| www.9698.cn-鞍山体彩转让信息| www.42450.com-6768彩票中心| www.85669.cc-篮彩加时算吗| www.029839.com-55彩票下载-| www.098187.com-百度乐彩怎么了| www.40919.com-亚上彩注册-| www.at49.com-大同私彩平台登录| www.ww61.com-南方双彩网走势| www.12xx.cc-竞猜快三与快三区别| www.79vy.com-福彩3d技巧学堂| www.31138.com-快2彩票玩法介绍| www.49zu.com-彩票三d乐彩论坛| www.35do.com-福利彩票双色球新闻| www.313641.com-彩票代玩qq群| www.354515.com-加拿大彩票28| www.35iu.com-福利彩票星期三| www.6848.cm-羊城晚报晚好彩今天| www.046318.com-天天彩是个什么软件| www.288388.com-时时彩屠龙-| www.382990.com-无锡彩旸香江价格| www.559404.com-排3走势图彩宝网| www.620564.com-靠谱时时彩代理群| www.695052.com-中国竞彩网误差| www.807019.com-彩票折叠-| www.889183.com-乐彩网免费下载| www.975915.com-太康彩礼-| www.hn9.com-香港优彩社区| www.ts51.com-快三平台送彩金| www.5418.net-彩钢瓦安装人工价格| www.97ib.com-福彩真假背后| www.024592.com-是谁代理彩神通四码| www.872639.com-贵阳福彩怎么申请| www.949635.com-体彩开奖号码排列三| 大赢家彩票www.610026.com| www.88zz.cc-热购彩票安全不| www.61dp.com-小儿心脏彩超数据| www.195878.com-彩票开奖结果查绚0| www.2853.com-凤凰公益彩是什么| www.596356.com-时时彩前3计划表| www.687302.com-澳洲f1彩票-| www.775024.com-网上快3彩票违法吗| www.906792.com-好彩网软件下载| www.961508.com-购彩365-| 奔驰彩票www.509866.com| www.22284.com-彩票投注侠正规吗| www.31uh.com-彩虹宝宝新版全集| www.47449.com-彩票跨省可以兑奖吗| www.121035.com-福彩双色球选号秘诀| www.553107.com-彩69收米-| www.703369.com-彩票小狂人-| www.790205.com-牛彩双色球论坛| www.877271.com-上海快三和值预测| www.956125.com-彩影相册-| www.cp072.com-安微福利快三走势图| www.045542.com-彩c81平台app| www.46092.com-福彩3d和值余| www.904495.com-500万足彩比分| www.gv96.com-093彩票注册| www.vt27.com-玩1分快三-| www.66do.com-华彩二级-| www.912935.com-彩客彩票是真的吗| www.665723.com-新彩平台-| www.881653.com-看彩票走势骗局| www.950962.com-周易预测彩票的高手| www.cp3237.com-快三彩票代理合法么| www.168302.com-北京快三开奖助手| www.wv92.com-易彩彩民福地测速| www.234103.com-福彩快三到底是什么| www.069500.com-足球胜负彩推荐| www.933559.com-彩票中奖最多的省份| www.712125.com-够力七星彩奖图| www.799857.com-快三可以回本吗| www.460813.com-可信的彩票网站大全| www.620101.com-釉上彩图片-| www.719781.com-乐和彩可靠吗| www.807165.com-竞彩按比例投注计划| www.927792.com-福彩欢乐生肖玩法| www.l16.net-篮球彩票推荐分析| www.707282.com-36o竟彩比分直播| www.718078.com-彩库图宝-| www.791911.com-3d时时彩票机| www.868585.com-向日葵团队导师彩票| www.5566.online彩票每日存送| www.20079.com-四川福利彩票中心| www.584443.com-1077彩票app| www.107012.com-福彩奖池-| www.796837.com-中国体育胜负彩| www.go09.com-快3福彩手机版下载| www.28on.com-福彩三弟开奖号码| www.90277.com-8亿彩8yc-| www.290977.com-福彩3d条件专区| www.657655.com-女子彩票中51亿| www.811965.com-彩吧论坛3d预测| www.406.cm-旺彩11选五-| www.3272.org-体彩p3今晚试机号| www.711133.com-和彩纺织-| www.778070.com-彩票喜乐彩-| www.841346.com-彩票销售五行属性| www.899689.com-最新版彩83-|