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天

知道了
彩01彩票 www.8790.wang-分分彩技巧-| www.cai724.com-一分快三破解器| www.940026.com-吉林快三稳定盘| www.wm14.com-幸运快三单双走势图| www.780667.com-体彩p3字谜汇总| www.918919.com-五省快三走开奖号| 500彩票www.50788d.com| www.qv15.com-甘肃福利彩票快三| www.u67.cn-彩票软件靠谱| www.512.org-深圳福彩5分钟| www.751742.com-一宵中彩-| www.203443.com-福彩时时乐走势图| www.726543.com-网络彩票靠谱吗| www.894853.com-高频彩票为什么调整| www.kj16.com-凤凰竞彩app| www.438066.com-博友彩软件靠谱吗| www.8149.biz-重庆20分彩-| www.632731.com-福建彩票36-| www.677900.com-安徽省七乐彩兑奖| www.796627.com-苹果彩票网站安全吗| www.881604.com-7773d福彩-| www.957622.com-六禾彩彩票图库| www.zq54.com-极速3d彩票开奖号| www.0887.cn-火星彩票app| www.52026.com-旺彩开奖大全| www.nl04.com-彩票快开微信公众号| www.35eh.com-新乡2019彩票| www.186115.com-下载中彩娱乐app| www.245822.com-老式中国体育竞彩网| www.997434.com-福彩自助投注机加盟| www.in65.com-500足球彩票| www.9ex.cc-关于彩票的说说| www.15589.cc-福彩3d走勢圖| www.116291.com-网友叫卖彩票| www.61hn.com-7意彩app下载| www.177894.com-上海快三规则介绍| www.772471.com-时时彩遗漏| www.057800.com-玩彩人杀码-| www.95ay.com-正汇科技彩票金手指| www.5339.onlinek彩平台注册| www.1617.in-非凡彩票双色球| www.6928.top-七星彩抓规神器| www.3107.vip-疯狂赛车彩票怎么样| www.4230.win-网易红彩竞彩专家| www.192080.com-河北快三今天跨度表| www.323899.com-七乐彩开奖各省中奖| www.37by.com-彩客站aqq-| www.51297.com-彩票倍投和加注| www.94761.com-彩票销售额-| www.051972.com-106时时彩下载| www.128693.com-福彩刮刮乐宣传歌曲| www.8102.org-福彩公告停售通知| www.026240.com-广西体彩11选5看| www.175373.com-体体彩快3-| www.48080.cc-有没有时时彩赚钱的| www.030840.com-新浪彩票双色球走势| www.149492.com-优信彩票邀请码谁有| www.345630.com-福彩刮刮乐猴票中奖| www.521731.com-腾讯时时彩谁开的| www.609249.com-海南七星彩解梦号码| www.687589.com-內蒙古福彩app| www.783348.com-鑫亿彩app-| www.926342.com-彩77手机版下载| 亚投彩票www.ya499.com| www.637561.com-体彩公益金使用公告| www.xd0.com-福彩河北快三开奖| www.379921.com-彩票分站-| www.850468.com-365约彩-| www.950881.com-极速彩票app| www.cx77.com-湖北快三下载| www.u32.cn-深圳福彩中心领奖| www.91ee.cc-家彩网千禧试机号| www.235102.com-广东福彩手机投注站| www.401769.cc-湖南省福彩电话投注| www.245695.com-易彩堂登录-| 小彩牛www.xcn6.com| www.155310.com-足彩中奖任九规则| www.555509.cc-豹子号今年下期彩票| www.740311.com-福彩营销员面试| www.244737.com-中国竞彩足球彩票| www.435894.com-红河州彩票中心电话| www.632375.com-彩店宝停了-| www.781354.com-手机快乐彩十分钟开| www.931247.com-马来西亚福彩网站| www.cm12.com-彩界过客-| www.8552.com-游乐园彩票机玩法| www.083226.com-老9乐购彩票app| www.246803.com-福彩3d开奖结果| www.548351.com-网上官方购彩软件| www.99351.cc-首页了365竞彩| www.105580.com-大红鹰彩票登录网站| www.177916.com-贵州快三形态一定牛| www.256580.com-彩票游戏机-| www.324697.com-中国福利彩票原主任| www.199822.com-上海快三贴吧| www.280145.com-福彩12选5玩法| www.mw67.com-微彩app下载| www.v26.com-贵州省体育彩票业| www.7680.vip-彩票正码是什么意思| www.22295.cc-彩58下载-| www.095381.com-困难福利彩票加盟| www.974694.com-排列三杀号2元彩票| www.sa40.com-快三怎么追豹子| www.303655.com-体彩论坛双彩论坛| www.503928.com-火星彩票可信吗| www.652795.com-立彩快三赚钱| www.779235.com-福彩半仙绝杀一码| www.889302.com-彩乃奈奈在线观看| www.976461.com-安阳彩礼一般给多少| www.gr17.com-7彩-| www.08860.com-东莞体彩网点申请| www.52082.com-uu彩票苹果-| www.92527.com-160彩票客户端| www.043550.com-梦怀孕是什么七星彩| www.106094.com-从彩网-| www.165231.com-安徽省体彩兑奖| www.228858.com-广东好彩1开奖| www.290491.com-3d彩经网走势新版| www.354888.cc-怎么买才能中彩票| www.408870.com-化妆品套装正品彩妆| www.505388.com-彩界精英双胆| www.566709.com-青岛体育彩票网点| www.619271.com-搜索彩票开奖查询| www.999825.com-唐龙说彩-| www.162326.com-下彩app客户端| www.912763.com-新浪彩网竞技风暴| www.01nb.com-羽泉《彩虹》吉他谱| www.846354.com-贵州彩票事件| www.152580.com-安微快三和值走势| www.382331.com-腾讯分分彩基本玩法| www.61381.cc-网络售彩违法| www.639718.com-百度于海彩票事件| www.828011.com-老彩民彩票app| www.960126.com-彩票注册送| www.kc13.com-鸿彩票软件-| www.024673.com-中国福彩积分卡| www.246320.com-江苏彩票大乐透| www.382593.com-推荐几个购彩软件| www.512134.com-唯美古风女子彩铅画| www.703859.com-体育彩票足球怎么看| www.949372.com-百盈彩票系统| www.ir27.com-彩票北京快了3| www.1609.cc-大地彩票平台手机版| www.061125.com-彩客网靠谱么| www.77373.com-今日福彩3d出奖号| www.042210.com-搞笑彩票广告宣传语| www.113530.com-四川有福彩快三吗| www.202511.com-彩票平台制作排行榜| www.262351.com-河北快快三跨度走势| www.335073.com-广西快三诀窍| www.412567.com-财富彩票登录网址| www.498178.com-e彩票平台-| www.566312.com-金百博彩民乐园登录| www.2661.top-彩票app没了| www.7960.com-爱玩彩下载-| www.14829.com-怎么打开彩票大赢家| www.25re.com-华彩人生版本| www.85nv.com-聚象彩可以玩吗| www.fl80.com-福彩官网下载| www.88557.cc-偷中奖彩票怎么判| www.0984.cc-贵阳快三app| www.6708.cm-网上买彩票不给提现| www.757918.com-福利彩票投注站佣金| www.842666.com-足彩初赔分析|