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天

知道了
58福彩 500彩票www.763659.com| www.cp80.com-今天广西快三走势| www.o28.vip-每日充赠彩票| www.21022.cc-深圳市体育彩票兑奖| www.772756.com-赌时时彩能赢吗| www.78718.com-福彩中奖窍门| www.332989.com-天才彩票算法公式| www.469799.com-赌足彩输钱-| www.414899.com-足彩n串m怎么算| www.53931.cc-手机在线买彩票| www.248949.com-6234彩票官网| www.692008.com-金羊网晚晚好彩| www.31pd.com-星期六开什么奖彩票| www.108713.com-新彩票安卓版| www.553088.com-网上分分彩害人| www.58795.cc-今晚体彩七位数预测| www.087225.com-福彩今晚开什么| www.628943.com-足彩4月胜负彩| www.059.cm-体彩排三开奖视频| www.622398.com-排三众彩网精品杀号| www.731902.com-彩色压印地坪厂家| www.72617.cc-吉林市福彩中心地点| www.675161.com-众彩网怎么进不去皮| www.787877.com-01彩票如何提现| www.883957.com-黑彩赢钱技巧| www.681292.com-辽宁福彩中心| www.790683.com-注册送彩金不限ip| www.874486.com-彩吧图谜3d全图| www.962261.com-爱彩彩票全天计划| www.cai3866.com快三预测-| www.928.com-星彩张飞-| www.606515.com-彩票怎么暂停销售了| www.66zi.com-乐彩国际是骗人的| www.4327.vip-浙江福彩中心在哪里| www.07583.com-193彩票app-| www.290275.com-彩库宝典开码结果| www.411858.com-中大奖彩票被复制| www.590288.com-彩金黄金哪个好| www.675048.com-汇丰彩票app| www.397188.com-彩票奖金扣税计算器| www.16187.com-江苏福彩中心主任| www.873068.com-湖北快三杀号360| www.7xx.com-员工领奖中彩票中奖| www.518726.com-爱彩网手机版下载| www.654311.com-i8彩票登录-| www.1464.cm-星空彩铅画视频教程| www.213792.com-如何玩彩神2大发| www.35vj.com-116彩票下载安装| www.mo44.cc-五星时时彩做号技巧| www.05tb.com-晨光12色彩铅哪些| www.98qr.com-财政部彩票司| www.3111.vip-彩票弃奖有多少次| www.421800.com-彩票站网上抢单| www.545877.com-天天乐彩软件下载| www.637102.com-彩虹六号潜龙| www.9158.cc-新彩吧3d图迷总汇| www.gi.com-皇都彩票破解| www.44840.com-彩票网站提现不到账| www.82vd.com-好彩网号码预测| www.871015.com-手机打彩票软件| www.059130.com-看彩72变双色球| www.117038.com-卖体彩引流-| www.201977.cc-贵州福彩投注站| www.ju72.com-颖彩双色球专栏| www.745011.com-非法经营彩票判决| www.25969.cc-彩虹有七色-| www.951332.com-新华论彩是什么| www.ya33.com-彩票号码25怎么买| www.821752.com-3d彩漫全彩| www.00385.com-彩票改号代码| www.490.in-江苏体彩7位数历史| www.90vt.com-体彩可以手机兑奖吗| www.4513.biz-福彩彩票3口| www.09987.cc-齐鲁彩票开奖时间| www.55836.com-官方腾讯10分彩| www.633600.cc-中国福利彩票几点开| www.076727.com-福彩3g字谜-| www.661113.cc-95彩票计划-| www.744417.com-1216福利彩票| www.809422.com-体彩排三出奖号| www.874963.com-时时分分彩官方| www.947215.com-体彩高频会取消吗| www.998809.com-香港快三彩票吗| www.bb85.com-喜乐彩早上几点开机| www.859714.com-八手巴购彩票可靠吗| www.920532.com-快三模拟摇奖| www.971055.com-值得信赖的彩票平台| 众彩www.548116.com| www.135231.com-玩赚彩票软件可信吗| www.274691.com-腾讯时时彩玩法| www.369470.com-旺旺彩票安卓版下载| www.493293.com-连连中彩票下载| www.570318.com-七彩虹主板重装系统| www.0541.top-玩彩老头双色球| www.1456.cn-海洋彩铅画-| www.58568.com-彩拾彩票软件| www.325212.com-海南私彩-| www.422300.cc-中国移动彩铃官网| www.237403.com-中国体彩网下载| www.346897.com-彩吧app下载注册| www.433453.com-假彩票制作器| www.254237.com-牛蛙彩票15700| www.351608.com-体彩大乐透开| www.450863.com-七乐彩奖金分配| www.544111.com-三的彩报-| www.625571.com-9福彩票官网| www.26292.com-今天快乐彩开奖号码| www.60kp.com-福彩家彩网专家胆码| www.42424.com-709彩票新版| www.ud32.com-神彩福牛-| www.259287.com-福彩3地图谜| www.498318.com-玖富彩票网址是多少| www.035944.com-彩票中奖提醒软件| 凤凰Vwww.www.fh7557.com| www.zr06.com-体彩吻买技巧| www.6991.com-3d彩票出多少号| www.575661.com-用什么app买彩票| www.877073.com-163彩票网-| www.956611.com-网上玩彩有赢的吗| www.eg24.com-双彩图-| www.087334.com-大富翁彩票比大小| www.126850.com-菠萝彩魔图新规律| www.230731.com-购彩软件-| www.gt75.com-当彩票打票员风险| www.e14.pw-博彩软件app| www.464268.com-彩票快餐怎么样| www.60101.com-鸿运彩票网安全吗| www.51011.com-网上私彩怎么赚钱| www.289536.com-0365cc彩票-| www.376988.com-快频彩开奖时间表| www.480220.com-竞彩串关是什么意思| www.560890.com-彩票行业五行属于| www.613676.com-彩票托都是美女| www.690591.com-湖北快三网上投注| www.767252.com-三d福彩藏机诗| www.rk41.com-各种釉彩大瓶价值| 中彩网www.61233hh.com| www.158453.com-好彩0567靠谱吗| www.278117.com-时时彩输了怎么上岸| www.9812.com-彩票数据大全| www.64677.com-彩票开奖结果下载版| www.062226.com-万彩网是正规网站吗| www.121435.com-长沙彩票网络诈骗案| www.163856.com-老想着中彩票来翻身| www.4425.vip-河北福彩排列走势图| www.17322.com-关注中国福利彩票| www.155950.com-好彩客绿色手机版| www.y65.cn-彩票如何中奖几率高| www.238678.com-快三彩票套路| www.617266.com-久久彩票网可靠吗| www.712822.com-星彩月英孙尚香无惨| www.798428.com-彩票中奖如何领取| www.878481.com-中福彩积分投注账户| www.565448.com-开体彩店去那里申请| www.20nw.com-福彩在线官网下载| www.3657.top-c8∵cn万彩吧| www.875665.com-118彩票是黑网吗| www.951042.com-安微快三计划软件| 5号彩www.595hc.com| www.w62.net-人人中彩票不能购彩| www.55bd.com-中大奖彩票网真假| www.96vu.com-彩票黑点密码| www.632458.com-彩票什么容易中奖| www.833760.com-好彩丨开奖查询|