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.731620.com-彩票平台改结果| www.786393.com-百博海南七星彩网址| www.687557.com-加微信、拉人玩彩票| www.764804.com-世界杯博彩app| www.834405.com-日免红好彩价格| www.234341.com-微信委托买彩票| www.4264.xyz-好彩赢天下资料| www.379791.com-中国福彩报纸预测| www.136816.com-火箭彩票网下载| www.1bd.cc-3d彩票中吧图| www.58037.com-彩票app手机| www.1327.vip-419彩票-| www.6314.biz-钻石彩票违法吗| www.515698.com-爱购彩会黑钱吗| www.643196.com-幸福彩票官方| www.923120.com-中彩票的人自述| www.mt09.com-公益彩票app下载| www.285326.com-数字彩票研究方法| www.04hy.com-彩铅绘画图片| www.538.website皇家88时时彩网址| www.021746.com-三地红五图库彩吧| www.cp0.net-江西快三投注| www.535333.com-彩票号多少位数| www.i50.win-158彩票app-| www.414.in-乐盈彩票苹果版| www.63385.com-胜负彩19054期| www.010807.com-网彩最新消息| www.225738.com-英国时时彩开奖| www.9278.pro-乐彩软件正规吗| www.448308.com-微信上怎么购彩票| www.949283.com-易彩测速福地| www.sv91.com-准提咒彩票-| www.613171.com-福彩3d预l测分析| www.35tu.com-中国海南七星彩图表| www.661913.com-足彩最多可以穿几场| www.873469.com-体彩店招-| www.954746.com-计划快三软件| 500彩票www.202429.com| www.19ol.com-肥城彩票体彩目录表| www.333016.com-爱投网彩票客服电话| www.465348.com-体彩高频彩有哪些| www.578468.com-福彩3d倍投-| www.749667.com-17年彩票几号开售| www.860635.com-福彩3d哪个台直播| www.944565.com-百万彩票是真的吗| www.cp559.com-时时彩平台哪个好| www.78329.cc-3d彩票实战讲座2| www.171199.com-彩票开奖查询公告| www.nl08.com-杨震足彩推荐| www.231337.com-快三分分如何跟计划| www.368372.com-彩涂铝卷价格范围| www.367744.com-体育彩票排3试机号| www.619038.com-山东体彩中心的地址| www.787448.com-时时彩高手资料| www.ru75.com-福利彩票25选7| www.ur96.com-快三大小有规律吗| www.480073.com-投彩97app-| www.348645.com-手机微信能买彩票么| www.191727.com-256彩票app| www.365946.cc-初级水溶性彩铅画| www.021002.com-彩票公众号老刘说彩| www.906213.com-有彩色复印吗| www.19699.com-快三单双大小| www.266288.com-彩票套路-| www.689606.com-国民彩票赚钱吗| www.789002.com-竞彩人气交易平台| www.593303.com-彩票奖金交税怎么算| 彩票坊www.022nx.cc| www.25sy.com-中国福利彩票地图| www.180.net-彩票67分臭了一圈| www.4378.cn-公务员买彩票违法吗| www.265736.com-快三最多能打多少倍| www.112.live-体彩那个软件可以买| www.9033.online有哪些靠谱的篮彩| www.23fx.com-福彩乐彩论谈| www.869739.com-山西十分钟开彩结果| www.947396.com-福彩七加三多少钱| www.999184.com-江苏e球彩胜负玩法| www.fk44.com-安徽省福彩中心地址| 68彩票www.68689m.com| www.323585.com-七星彩彩开奖时间表| www.387429.com-体育彩票店开门时间| www.483853.com-七天彩票网上够买| www.552365.cc-彩票出票助手| www.050439.com-河南幸运彩最新开奖| www.298290.com-购彩吧688345| www.393514.com-简单彩铅画多肉植物| www.499646.com-鼎丰彩票彩种| www.566519.com-快三彩票破解方法| www.658959.com-4d彩票开奖结果| www.688831.com-彩票吧软件-| www.0452.net-彩网cai5登录| www.20220.cc-深圳福利彩票转让| www.341171.com-拉萨体彩中奖| www.93vx.com-彩色生活照片| www.356449.com-发发彩票网图库大全| www.503785.com-喝彩的彩是什么意思| www.577304.com-好彩头app链接| www.659370.com-众筹彩票qq群| www.749558.com-卓创国际彩票带人| www.822898.com-授渔看彩最新| www.882415.com-易彩堂可靠吗| www.941618.com-怎么代理时时彩| www.984093.com-七星彩论坛2027| www.cr5.cc-快三有没有挂| www.pr67.com-郑州福利彩票中心| www.6881.xyz-云彩面包-| www.598885.com-中国什么彩票靠谱| www.689432.com-祥金彩票-| www.ad05.com-安徽体彩网-| www.15pu.com-qq彩票註册平台| www.497.biz-七乐彩开奖历史重号| www.286224.com-精英彩票资料| www.408802.com-中彩网囚牛行势走势| www.527378.com-彩吧vip是骗局吗| www.659710.com-昨天内蒙快三| www.737836.com-北京快三群骗局揭秘| www.805784.com-彩票风云-| www.912907.com-新浪体彩比分直播| www.984682.com-彩运8怎么赚钱| www.hh04.com-幸运快三开奖号码| www.871142.com-期乐彩走势图| www.970930.com-3d字谜中彩网| www.881923.com-彩票诈骗帝王彩票| www.761319.com-宝马娱乐平台彩票| www.448760.com-满堂彩平台-| www.597690.com-海南七星彩精彩论坛| www.682309.com-手机上可以买足彩吗| www.767993.com-体彩周几开奖| www.829323.com-网络彩票计划| www.916778.com-彩铅画图片人物背影| www.975402.com-滨州福彩客户端下载| www.cai910.com-体彩网-| www.nu57.com-彩票赌博输钱| www.1xv.cc-手机打印机彩色6色| www.1935.top-福彩3d对应号| www.192952.com-千万彩票app| www.809061.com-3d开机号彩吧| www.895822.com-福利彩票合买中心| www.962677.com-星光彩票手机版| 大赢家彩票平台www.376163.com| www.nc89.com-爱乐彩极速赛车| www.ai16.com-昨晚彩票中奖号码| www.rr38.com-彩民之星周春勇| www.159327.com-外国3d彩票漏洞| www.560977.com-中彩网天空彩| www.797139.com-518彩网登录| www.885611.com-天下好彩彩团网| www.975500.com-七星彩投注技巧| www.56aj.com-陕西省福彩发行中心| www.326371.com-七星彩上官燕预测| www.495223.com-英雄联盟彩票| www.585867.com-福彩越来越少人买了| www.088636.com-福彩4d走势图| www.257726.com-网络可以售彩吗| www.771838.com-体彩竟彩足球胜| www.905292.com-快乐彩中奖规则| 多乐彩票www.744646.com| www.rr29.com-福利彩票奖池| www.948142.com-双色球神彩福牛| www.vy09.com-玩快三根本无法赚钱| www.843648.com-彩乐乐专业彩票工具| www.1006.vip-中国福利彩票单式| www.982844.com-盈彩五分快三|