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.905208.com-新浪竞彩足球推荐| www.562435.com-白菜彩金网址大全| www.660957.com-123彩票计划| www.777727.com-139彩票安卓| www.883077.com-甘肃快三二码遗漏表| www.985046.com-竞彩足球单关| www.21pt.com-福利彩票的公益口号| www.18lv.com-彩九app-| www.036238.com-彩票走势图下软件| www.195229.com-今天青海快三走势图| www.330570.com-91彩神是真的| www.88376.cc-彩家园彩票网站| www.97fd.com-博有彩下载-| www.70px.com-全天实时彩计划网站| www.947481.com-福彩3d在线缩水| www.hr3.com-上海快三奖金对照表| www.008811.com-时时彩数据导入| www.207535.com-幸运快三投注规律| www.297773.com-新快三手游单机| www.602332.com-游戏厅赚彩票攻略| www.709292.com-创名彩票安全吗| www.800052.cc-11选5购彩窍门| www.879173.com-七星彩中奖表| www.963490.com-竞彩足球下载客户端| www.dn80.com-彩票数字规律题| www.j37.com-九宫图测彩票| www.100205.com-互联网销售彩票举报| www.530825.com-彩铅零基础画| www.814601.com-排列三预测彩吧| www.74bh.com-黑彩庄家咋赚钱| www.1905.cc-彩票开奖公告双彩论| www.82mx.com-福利彩票长治一等奖| www.883139.com-爱投口袋彩店| www.810159.com-好彩网3d杀号定胆| www.906235.com-彩色圆柱体红色教案| www.983119.com-上海快三开结果| www.it74.com-中国体彩官方客户端| www.216960.com-快三正规平台| www.336833.com-体彩官网售后有保障| www.438841.com-彩票网吧-| www.365630.cc-吉林快三心得| www.377074.com-97彩票我的账户| www.502952.com-国彩印刷厂-| www.945525.com-kc一分彩-| 大赢家彩票www.349311.com| www.ne03.com-乐米彩票关停了| www.439988.cc-中彩那天主要词语| www.565996.com-盐城东希花彩| www.668061.com-福建体彩下载软件| www.778025.com-欢乐十分彩正规吗| www.873323.com-大发快三投注方法| www.981741.com-大中华彩票登录| www.pn72.com-快三推荐号甘肃| www.388373.com-华彩中文-| www.92dj.com-购彩平台注册邀请码| www.52535.com-好彩怎么下载| www.121874.com-福彩河北排列7| www.247879.com-彩票江西快3微信群| www.352883.com-彩票走势图表2元网| www.503712.com-3d摇一摇机选彩票| www.519729.com-重听天天福彩| www.665231.com-免费彩票指南报纸| www.961694.com-在手机上如何买彩票| www.yb2.cc-大发彩票app苹果| www.047.online-体育彩票收藏册| www.6270.vip-河北保定快三今天| www.29881.com-杏彩平台app下载| www.80ot.com-恶搞彩票中奖图片| www.4323.cn-福彩中兴主任| www.66447.cc-苏宁彩票加盟吗| www.606623.com-重庆体彩中心主任| www.090871.com-彩票中奖抛妻弃女| www.xu05.com-彩票能一次买多期吗| www.4181.vip-北京七彩汇国际会所| www.82947.com-有没有玩彩票高手| www.277.cn-进口彩妆连锁加盟| www.416448.com-uc彩票提现异常| www.691270.com-刘忙足彩-| www.813806.com-千亿彩票5-| www.902260.com-福彩正版藏机图汇总| www.751901.com-中国福利体育彩票| www.550985.com-福彩3d追号怎么样| www.092384.com-乐八彩票登陆| www.7014.biz-体彩竞彩篮球玩法| www.182773.com-全天快三计划网| www.602403.com-中国彩票假的| www.377852.com-西安福利彩票机转让| www.563577.com-如何获得q彩邀请码| www.623937.com-今日竞彩足球对阵| www.643041.com-香港分分彩走势图| www.712501.com-彩票投注侠正规吗| www.956830.com-七彩神仙鱼价格表| 凤凰彩票www.77803a.com| www.953641.com-一些彩票平台正规吗| www.465121.com-彩票店的风水| www.ja09.com-微信群里玩吉林快三| www.305582.com-酷彩吧中奖能取吗| www.612301.com-1516彩票网官网| www.389239.com-8500gt逸彩-| www.508225.com-新加坡大彩怎么玩| www.581635.com-中园体育彩票网站| www.663224.com-博友彩是什么意思| www.016137.com-快乐彩票网页登录| www.va89.com-彩票游戏代打专员| www.871904.com-彩49彩票安卓版| www.cp480.cc-福彩快三走势图福建| www.901517.com-今晚福彩3d奖号| 818合彩www.www.9889hc.com| www.mo45.com-七星彩的中奖标准| www.682112.com-吉林快三出号规律| www.870105.com-澳门威尼手机彩票| www.x06.cn-香港五分彩全天计划| www.509428.com-澳客赢家彩票二维码| www.380101.com-七乐彩2等奖是多少| www.866761.com-腾讯分分彩官网开奖| www.161977.com-探探帅哥教你玩彩票| www.57616.cc-ag彩数据软件下载| www.994059.com-大发分分彩稳赚技巧| www.vy89.com-快三遊戲-| www.751933.com-爱彩导航线路| www.719335.com-新彩吧官方免费下载| www.2fh.com-经营体育彩票挣钱吗| www.2996.in-3132幸运彩票| www.003040.com-3d彩票软件破解版| www.323.biz-彩之家真的能赚钱吗| www.776288.com-火箭彩票安卓版下载| www.995108.com-海南休彩开奖结果| www.33bl.com-排列三牛彩字谜打卯| www.906163.com-彩色资料跑狗图| www.310102.com-山东省体彩兑奖流程| www.217915.com-福彩网app可靠吗| www.3730.cn-彩色五子球下载| www.54962.com-彩民交流微信群| www.cp7655.com-快三秒官网-| www.603760.com-下载最新版卓易彩票| www.999378.com-顶呱刮彩票下载安装| www.lr70.com-福彩有快三吗| www.sf85.com-幸运分分彩精准计划| www.cp6770.com-下载快三技巧| www.36649.com-今晚澳门彩报2| www.fm80.com-福彩3d跨度30期| www.331091.com-福彩排列七开奖号| www.yy77.com-乐彩01app-| www.81199.cc-中国体育博彩业| www.033535.com-彩站app-| www.512037.com-画彩铅画简单好看| www.129720.com-体彩第19015| www.cp5991.com-广东快乐彩开奖结果| www.bp95.com-彩票缩水软件| www.737883.com-天天空彩票| www.747733.com-幸运彩网站登入| www.95gc.com-星际彩票是真的吗| www.954765.com-七星彩打什么奖| www.vh20.com-乐彩三地论坛| www.3799.top-香港七星彩趣味看图| www.562617.com-九歌彩票官网| www.939782.com-网赌彩票的漏洞赚钱| www.117779.com-竞彩足球-百度| www.128714.com-福彩刮刮乐编码| www.83176.com-bbin彩票骗局| www.4546.cm-福利彩票3d号码| www.546262.cc-西安彩票店生意转让| www.30771.com-福利彩票怎么选数字| www.011684.com-昨天开什么奖彩票|