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.025473.com-快乐分分彩人工计划| www.912936.com-快乐彩技巧稳赚| 95彩票www.279556.com| www.ph88.com-足彩19045期| www.33si.com-19003七星彩| www.845273.com-福彩送摩托-| www.ld21.com-红彩下载-| www.07ne.com-三彩翡翠图片| www.829.cc-体彩刮刮乐20视频| www.033020.com-下载安装95彩| www.131438.com-彩票未领奖2018| www.913267.com-时时乐彩神通软件| www.617704.com-长春彩票中奖新闻| www.316078.com-上海竞彩店转让| www.3963.org-中彩堂原創料| www.26322.cc-彩吧彩票和法吗| www.85850.cc-福彩3d研究方法| www.048618.com-3d水果图彩吧| www.152032.com-彩750彩票-| www.258915.com-玩竞彩足球越陷越深| www.351098.com-银河彩票app| www.460045.com-福利彩快乐十分走势| www.561520.com-时时彩后三缩水软件| www.650753.com-微信十字彩-| www.731421.com-快3中彩网大数据| www.829191.com-福建彩票k3-| www.906257.com-彩色的鸟-| www.271622.com-福彩好彩1开奖结果| www.2585.vip-数学学得好买彩票| www.153119.com-彩民之家论坛| www.036048.com-9cb彩计划下载| www.09vu.com-微商刷彩票赚钱| www.139.ren-刘畊宏彩虹天堂下载| www.56wx.cc-张家口福彩兑奖处| www.3108.com-高反水彩票-| www.07058.com-香港十分彩官网| www.007946.com-七乐彩下期预测号码| www.110406.com-中国体彩改革| www.217944.com-福彩快三正规网站| www.305968.com-体育彩票怎样买| www.396153.com-彩虹宝宝第三季全集| www.31456.cc-易彩快三骗局| www.047543.com-河十一选五爱彩乐| www.011053.com-好快三怎么玩| www.036543.cc-快彩分析软件| www.127713.com-彩虹授权掉了| 乐盈彩票www.lyc55.com| www.1400.org-彩宝贝双色球走势图| www.972745.com-彩铅画画简单| www.033650.com-大发快三能猜中数字| www.444752.com-上海嘉定区彩票中奖| www.zj17.com-3d福彩走势图预测| www.1793.mobi-福彩3d彩票图案| www.977.cc-排列三乐彩网走势图| www.3843.wang-中国福利彩票的政策| www.81.gg-微信转账的彩票软件| www.392911.com-派彩化妆品怎么样| www.727150.com-彩96平台黑吗| www.866171.com-搜狐彩票网下载| www.954368.com-摸彩票的方法| www.og7.com-鑫彩网是正规网站吗| www.6388.cc-91彩网福彩快三| www.046.online-水立方彩票平台| www.6882.biz-爱趣彩app-| www.010729.com-福利彩票账号登录| www.153792.com-中国足彩馆踩踏原创| www.307939.com-派彩网二维码| www.448835.com-山西省体育彩票中心| www.595007.com-淘彩娱乐是真的吗| www.714103.com-国彩投资是骗局吗| www.843289.com-快乐公益彩票| www.959312.com-杏彩168-| www.aj78.com-体彩481任二技巧| www.zi58.com-往期彩票中奖号码| www.36lx.com-彩36彩票网官网| www.287.live-领航缔彩-| www.3884.in-福彩3d报喜字谜| www.611368.com-有没有彩票职业玩家| www.498558.com-体彩包括什么意思| www.593399.com-七彩阳光小区| www.752286.com-彩票分析软件破解| www.877202.com-黑客破解彩犯法吗| 8816彩票www.8816l.com| www.896116.com-合买彩票网站怎么买| www.959460.com-时时彩5分钟计划| 云博彩票www.www.196556.com| www.ek21.cc-众彩网首页官网| www.185288.com-好彩双爆珠-| www.gs8.com-五分快三怎样看走势| www.o43.net-买彩票离婚-| www.678238.com-彩票退机申请书| www.492335.com-体彩大乐走势图| www.075058.com-福利彩票旗下| www.7080.cn-银燕七彩艺校| www.45hb.com-彩虹电影台免费| www.9465.cn-李迎说彩最新一期| www.6362.biz-春彩彩票登录| www.788438.com-七星彩专家推荐号| www.68ca.cc-竞彩网258官方网| www.59944.cc-百乐彩官网址| www.719961.com-三分快三能赚到钱吗| www.17if.com-彩丰物流-| www.350532.com-彩票店里还能卖什么| www.xp59.com-下载十一选五买彩票| www.21zv.com-足彩竞彩拖胆啥意思| www.947447.com-福利3d彩票怎么买| 乐彩www.lczg8.com| www.yy20.com-快三怎么代理赚钱| www.31ai.cc-彩虹自助下单授权| www.586218.com-微彩网络错误| www.078855.com-七星彩预测号码|注| www.411084.com-怎么看自己买的彩票| www.733030.com-福彩3d能网上购买| www.871762.com-福彩刮刮乐中奖图片| www.970374.com-中国体育彩票任选九| www.cp6022.com-牛彩网3d字谜总汇| www.cai7474.com江江苏快三走势图| www.5871.wang-江西彩礼多少钱| www.25123.com-儿童彩笔品牌| www.987708.com-彩乐彩票app下载| www.dh55.com-中国福利彩快3开奖| www.f29.top-万达彩票靠谱吗| www.44ho.com-看3d福彩3d-| www.211.tv-彩吧平台-| www.4638.biz-酒后千元买彩票| www.02952.com-一号彩票网址| www.51640.com-甘肃酒泉福彩快三| www.064233.com-彩票3d兑奖规则| www.133089.com-快三输了很多能回血| www.216446.com-快三抓豹子-| www.226052.com-ag彩-| www.307099.com-彩票史上最大奖| www.5364.vip-彩票777骗局| www.34235.com-6彩库宝典最新开奖| www.023560.com-彩6彩票ios-| www.290313.com-内蒙古福彩快三今天| www.511934.com-渐变彩铅画-| www.44337.com-彩色沥青混凝土报价| www.141328.com-二分彩技巧-| 彩多多www.78949z.com| www.6618.live-中彩快三源码| www.47758.com-跑狗彩图-| www.wv31.com-体育彩票开奖结果查| www.997164.com-新浪爱彩幸运快三| www.31yk.com-正规网上彩票网站| www.698004.com-浙江体彩20-| www.676748.com-3d彩报图片今天的| www.980162.com-足彩过滤软件手机版| www.30118.com-附近竞彩店-| www.rk53.com-北京快三跨度查询| www.653817.com-华人彩怎么注册| www.435883.com-腾讯天天彩票被约谈| www.414221.com-至尊博彩什么意思| www.540759.com-崩坏3全彩福利本子| www.619986.com-福彩快三多少种可能| www.065201.com-天下彩票开奖| www.561820.com-306好彩票-| www.233658.com-老经典快三-| www.388723.com-体彩4码遗漏| www.55046.com-足彩高手谈心得| www.004548.com-秒彩票开奖-| www.801553.com-93彩票是啥-| www.99208.com-时时彩任二绝招| www.788784.com-全国360彩票开奖|