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.916032.com-可靠黑彩平台| www.sn55.cc-竞彩比分直搐| www.2qg.cc-福彩快三一注中多少| www.079961.com-彩票税-| www.260830.com-竞彩足球500| www.414933.com-三分钟跑马彩票平台| www.558164.com-彩铅插图动物| www.638446.com-色彩风景临摹房屋树| www.750426.com-彩票助赢助手| www.852768.com-时时彩找漏洞| www.938899.com-中国竞彩网网址| 快彩www.81678o.com| www.1807.cn-8g登录神话彩票| www.23775.cc-彩票微助手怎关| www.033805.com-我要买双色球彩票| www.521047.cc-时时彩彩票群qq群| www.422589.com-腾讯分分彩验证计划| www.99373.cc-特彩吧高手网天下齐| www.181051.com-快三单双关系加减一| www.322687.com-手机购彩票网站| www.444851.com-彩票中奖要扣多少税| www.663944.com-258nba彩票-| www.770868.com-成都彩虹冰淇淋机| www.897617.com-快易彩下载-| www.977509.com-8度彩妆加盟代理| www.tf66.com-快三中大奖-| www.32mh.com-彩票双色球昨天的| www.560406.com-兴安盟十一选五彩票| www.298617.com-游戏机彩金可以调吗| www.370402.com-彩钢瓦防水涂料| www.483246.com-什么是刷彩票流水| www.565809.com-龙的快三彩票| www.3614.net-连红彩票下载| www.00zk.com-雨后彩虹的形成原理| www.wt14.com-上海快三速查| www.310808.com-七星彩0到9的对数| www.393648.com-海边风景彩铅画| www.546207.com-利用分分彩刷流水| www.111166.com-小站宝彩票在哪注册| www.196365.com-彩库宝典2019| www.882543.com-重庆五分彩合法吗| www.981407.com-竞彩推荐唯彩看球| www.d32.top-皇都彩票能提现吗| www.67ja.com-彩票店合作或转让| www.0394.net-7彩票开奖-| www.561055.com-红彩会登录账号| www.045615.com-彩票对冲平台| www.800023.cc-福利彩票新游戏| www.971283.com-体彩排五的开奖号| www.40oz.com-88爱彩官方app| www.2324.biz-二分彩专业计划| www.461810.com-牛彩网图迷总汇| www.562052.com-新彩计划群-| www.635743.com-七星彩开奖结果网易| www.712956.com-cpcp彩票-| www.782823.com-竞彩258怎么样| www.542049.com-东森彩票客户端| www.609137.com-福利彩票店上班时间| www.681909.com-用什么买彩票官方| www.766364.com-重庆时时彩无法提现| www.857875.com-彩票中3个号多少钱| www.937535.com-7125彩票软件| www.987180.com-购彩堂是什么东西| www.wo5.com-湖北省福利彩票快三| www.7540.blue-东方彩票登录邀请码| www.932750.com-致富彩票是不是真的| www.607732.com-首尔在哪儿买彩票| www.3719.com-体彩排列3图谜| www.896671.com-彩票小程序-| www.lo32.com-中彩网能买彩票吗| www.373901.com-发财猫彩票下载| www.05311.com-网红阿彩呢扒皮| www.12ko.com-彩8万app-| www.346161.com-福彩3d摇一摇机选| www.421324.com-金手指胜负彩推荐| www.521585.com-1分钟时时彩走势图| www.29qd.com-福彩3d中奖号昨天| www.9697.com-500彩合法吗| www.254537.com-好彩投app没了| www.351848.com-买彩票最少多少钱| www.512395.com-乐彩站是赌博的吗| www.604978.com-香港赛马资讯及派彩| www.693236.com-如何买福彩-| www.773160.com-时时彩厘模式投注| www.852727.com-彩票任三开奖查询| www.927750.com-三秒快三骗局| 中彩网www.61233q.com| www.388032.com-华彩横溢是什么意思| www.204811.com-两分快三是哪里的| www.284289.com-福利彩票时时彩玩法| www.87802.com-彩票中什么是龙| www.838177.com-105彩票官网平台| www.911265.com-手机玩k彩犯法吗| www.969680.com-快三赢钱-| www.cai6768.com湖北快三开奖| www.mk16.com-彩票网站大全app| www.777046.com-彩宝宝怎么样| www.367228.com-北欧麋鹿彩铅画教学| www.460169.com-福彩双色球中了篮球| www.573189.com-腾讯分分彩分析系统| www.657597.com-淅冮体彩6十l号码| www.765588.com-93彩票靠谱吗| www.875673.com-福彩排列五中奖结果| www.967555.com-体彩排列五随机选号| www.fw29.com-保时捷彩票登录| www.5rq.com-英国彩票税收| www.77fs.com-彩票指南正版首页| www.3092.cn-彩神好运来幸运飞艇| www.4032.cn-吉林快三提前开奖器| www.1904.vip-快三实时开奖| www.573817.com-体彩排三怎么玩的| www.129066.com-南京福彩开奖结果| www.vv07.com-如意彩票app平台| www.0883.live-竞彩篮球比分大小球| www.340081.com-金彩汇国际会所价格| www.448897.com-新时代彩票平台注册| www.549623.com-在线购买足彩| www.612582.com-d8彩票下-| www.675917.com-排五走势图彩宝网| www.758658.com-顶尖彩票靠谱吗| www.822543.com-3218彩城彩票| www.883501.com-金百博网络彩票| www.970731.com-腾讯5分彩开奖| 吉利彩票www.80065x.com| www.79vt.com-百盛彩托都聊感情| www.575022.com-彩票在线下载| 乐博彩票www.320493.com| www.ss77.com-小鹿彩票开奖表| www.361908.com-易发彩是不是诈骗| www.cp5565.com-快三合之-| www.44jm.com-网上彩票代购| www.879664.com-极速赛车彩票| www.150462.com-pk10彩-| www.11wb.com-彩票体育彩票6十1| www.708339.com-新型彩票诈骗| www.1949.cc-天娱彩票平台骗局| www.8965.vip-彩票计划网站怎么做| www.509071.com-牛彩字谜汇总| www.844633.com-年底彩票什么时候停| www.940368.com-福彩好彩三开奖结果| www.982822.com-淘彩票tcp邀请码| www.sp93.com-直播彩票-| www.101468.com-九号彩票登录地址| www.73323.com-海南注册体育彩票| www.639977.com-足彩外围玩法术语| www.746817.com-彩票优惠活动| www.806580.com-七星彩开奖32期| www.874984.com-时时分分彩骗人吗| www.961179.com-内蒙古快三定牛| 大赢家彩票www.399146.com| www.ie12.com-彩票害人吗-| www.m86.mobi-不能网上买彩票| www.21158.cc-六彩票8-| www.831023.com-新利快乐彩手机版| www.900888.com-高手进时时彩反倍投| www.969139.com-网易竞彩推荐预测| www.cp9398.com-手机彩票软件排名| www.909510.com-3d福利彩票资料| www.63727.cc-nba竞彩投注热度| www.20tv.cc-体彩样票开奖结果| www.510593.com-亚丝娜本子图片彩漫| www.620573.com-补偿公告腾讯彩票网| www.181602.com-福彩快3赔法| www.1843.net-9老彩民高手论坛|