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.250942.com-湖北福利彩票app| www.901971.com-黑彩当庄输了| www.ba17.com-体彩福彩开奖| www.410093.com-杭州彩色透水地坪| www.k13.net-中国乐彩网吧| www.3428.cn-快三内部数据曝光| www.770113.com-好彩头app-| www.782513.com-快三有鬼吗-| www.080212.com-体彩公式-| www.101402.com-正彩彩票手机版| www.jf53.com-派彩481走势图| www.077071.com-306官方授权彩票| www.4093.cm-600w彩票网官方| www.22525.cc-四川结婚彩礼多少钱| www.097532.com-中国体育彩票刮刮卡| www.2658.cc-甘肃彩票大奖得主| www.9963.top-客哥说彩-| www.940588.com-全民汇彩票-| www.300991.com-排五彩票九宫图| www.385560.com-彩票免费签到现金| www.506771.com-3d走势彩吧旧版| www.581115.com-彩票看走势-| www.670454.com-今天开奖七星彩| www.763108.com-秒速时时彩假不假| www.977424.com-平顶山彩礼-| www.12705.com-周口体彩兑奖中心| www.168040.com-快三网站是真的吗| www.97ai.cc-人生没有彩排例子| www.82869.cc-福利彩票抽奖真实吗| www.8281.bid-南昌彩票店-| www.886117.com-玩彩网app大全| www.981094.com-七彩杯怎么变色| www.s87.com-柳州自助投注彩票站| www.323848.com-网易七星彩现场开奖| www.h78.cn-澳洲3分彩开奖结果| www.64715.com-上海快三雄鹿计划| www.883292.com-玩投彩是何用意| www.970620.com-河北快三开奖时间表| www.c4.me-爱乐彩号码推荐软件| www.uu59.com-怎样在人人彩票注册| www.mm1.cc-八八彩票吉林快三| www.vd04.com-体彩481对子技巧| www.030017.com-彩客网让球胜平负| www.1566.in-7071彩票-| www.146.cm-天津彩站宝-| www.84ec.com-体彩新零售模式| www.2034.biz-青岛体彩中心在哪里| www.997048.com-海南体彩网-| www.cp3595.com-网赌快三的幕后黑手| www.55oy.com-陕西体育彩票app| www.3517.com-玩大通彩票能赢吗| www.29595.com-中彩网一3d走势图| www.015423.com-七星彩一千期走势图| www.668012.com-彩票中心窝案| www.745947.com-湖北福彩投注短信| www.810556.com-体彩显示屏怎么设置| www.252337.com-彩票晒票-| www.95qi.com-彩票盈利计划| www.816785.com-87彩票中奖截图| www.952028.com-503彩票-| www.hm5.cc-体彩内蒙古11选5| www.66195.cc-快乐彩12助手| www.134078.com-南粤风采好彩1奖金| www.254877.com-湖北快三今天推荐号| www.bj44.com-神舟彩票网址| www.ve99.com-彩票软件制作排行榜| www.044365.com-北京福利彩票双色球| www.231736.com-分分快三破解器| www.84.me-九亿彩票怎么提现| 51彩票www.31847.com| www.499888.com-彩票性缘后记| www.1685.vip-千亿彩票官方客户端| www.64397.com-足彩总是看下盘| www.vq89.com-福彩三d开将结果| www.34467.com-彩票248彩平台| www.96192.cc-彩电云-| www.073511.com-湖北快三新版| www.641288.com-体彩标志颜色| www.535135.com-1号彩票登录地址| www.640722.com-荣耀彩票app| www.727536.com-体彩和福彩中奖号码| www.832674.com-778彩票网是官网| www.jz69.com-国外教授破解彩票| www.306481.com-九千万彩票app| www.2195.win-八号彩票可以提现吗| www.565901.com-王牌彩票官网| www.16fc.com-新葡萄金彩票| www.73ir.com-炫彩之剑哪里出| www.938592.com-共赢彩票团队计划| www.244906.com-易彩网官方彩票| www.1971.cc-玩彩票龙虎怎么看| www.996480.com-365彩票官网| www.rm12.com-快三倍投单双技巧| www.54oi.com-福彩销售点的销售额| www.439918.com-c58彩票三分彩| www.982746.com-上海体彩电话投注| www.sz3.cc-重庆时时彩手机下注| www.ps40.com-竞彩猫杨震-| www.567712.com-七彩阳光口令音乐| www.660003.com-彩票走势图插件| www.753787.com-118彩票送彩金| www.558491.com-世界彩铅大师作品| www.654916.com-168时时彩彩票网| www.737704.com-订购三d彩报| www.819408.com-彩民分析竞彩方法| www.278515.com-福彩快三代理犯法吗| www.65757.com-福彩三d彩吧论坛| www.020202.cc-体育彩票七星彩规则| www.502830.com-彩友多怎么样| www.711399.com-天天福彩平台正规吗| www.790988.com-广州彩烟-| www.856185.com-北京体育彩票网官网| www.984510.com-8彩是否合法| www.nj7.com-快三和值表格图片| www.d23.cc-买大小单双彩票软件| www.930574.com-快三豹子常见口| www.984703.com-炫彩水晶泥-| www.gs4.com-体彩481走势图| www.05986.com-体彩实体店的软件| www.901779.com-中国体彩排3| www.360618.com-2月26日湖北快三| www.090768.com-陕西体彩网-| www.176115.com-快三平台哪个返点高| www.237513.com-新浪足球竞彩网| www.791127.com-宁夏彩票中大奖记录| www.s28.com-山东体彩在线骗人| www.56kt.com-福利彩票安装官网| www.991.online-新2彩票正版论坛| www.195650.com-360.购彩-| www.811491.com-八仙过海艳彩图片| www.028480.com-玩凤凰彩票输了好多| www.g26.club-高频彩2019新规| www.870064.com-竞彩足彩分析师招聘| www.843103.com-彩票站点缴纳社保| www.57332.cc-下载网上购彩| www.314009.com-大玩家彩票网上兑换| www.881469.com-五分彩怎么看走势| www.956276.com-买彩票上瘾| 博友彩www.931669.com| www.ne87.com-c038彩票官-| www.n27.com-艾彩登录-| www.19nr.com-山东肥城福利彩票站| www.610425.com-7彩77彩票-| www.6884.vip-老时时彩软件| www.288944.com-彩票中奖4亿| www.cai8111.com吉林快三形态走势图| www.763811.com-彩神预测骗局| www.26zu.com-买彩票买了几十万| E彩堂www.43818l.com| www.838526.com-亚盘和竞彩盘口转化| www.37264.com-彩票苹果投注app| www.3922.cm-3d彩票试机号今天| www.763297.com-网站彩票做庄| www.67755.cc-288彩票有假吗| www.039012.com-福彩3d彩票论泇| www.963102.com-福彩投注机开通快三| www.107479.com-凤凰彩票辅助器| www.201922.cc-下载利彩app| www.68238.cc-河南七星彩历史开奖| www.025467.com-体彩前景分析| www.2023.site-棋牌彩票二合一| www.983504.com-彩票站可以投诉么| www.br82.com-福彩3d软件-| www.636737.com-儿童画彩虹桥怎么画|