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.247337.com-上海福彩网实时查询| www.654830.com-金师彩票一秒开| www.781508.com-微彩app怎么下载| www.991972.com-福彩2d-| www.we21.com-兰州市福利彩票中心| www.9580.vip-彩票网站靠谱吗| www.12123.com-一分钟江苏快三平台| www.53272.cc-中国竞彩网首页下载| www.997842.com-原创福彩分析| www.610662.com-福彩3d高低图| www.697071.com-新彩票站论坛| www.779161.com-大众彩票登录| www.903154.com-盈众彩票幸福常伴| www.c6.me-好彩网快三是真的吗| www.27kf.com-怎么对彩票-| www.93zw.com-七乐彩复式算法| www.702658.com-深圳快乐彩没人管吗| www.1fu.com-体彩排列五中后三位| www.126803.com-河北彩票开奖大厅| www.376542.com-百盈快三和直播吧| www.964004.com-上海的福彩网| 中彩网www.91233w.com| www.78962.cc-999彩票投注网站| www.639615.com-规划竞彩-| www.909944.com-福彩3d彩界的精英| www.300883.com-南方双彩首页| www.242438.com-湖北快三跨度走势| www.757260.com-今日中彩托尔| www.63882.cc-今天竞彩14场| www.381378.com-买彩票如何选号| www.39yy.cc-七星彩500特| www.450391.com-七乐彩胆拖价目表| www.918072.com-搭建私彩平台| www.664058.com-众彩网客户端下载| www.ip76.com-360足球彩票| www.d88.online-彩民网高手论坛| www.av12.com-彩票选号小助手| www.13pq.com-郑州畜牧路福彩大厦| www.106422.com-今晚彩票开什么呢| www.235577.com-中国足彩500网| www.353244.com-彩票306定投| www.997356.com-爱心彩下载-| www.356468.com-竞彩分分彩-| www.556481.com-永利彩票会员登录| www.674557.cc-亚搏彩票app下载| www.752250.com-助赢彩票专家| www.817120.com-查看福利彩票开奖| www.886023.com-yy彩票注册登录| www.953725.com-犀牛彩票不给提钱| 五星彩票www.5xct.com| www.095268.com-688345购彩网| www.168382.com-今日湖北快三一定牛| www.17ow.com-澳客彩票网电脑| www.838245.com-海南彩票七星彩开奖| www.952055.com-303彩票-| 500万彩票www.39500z.com| www.849884.com-福彩3d布衣天下| www.950201.com-快三输了很多怎么办| 中彩网www.91233w.com| www.3898.bid-爱乐彩体彩-| www.19rc.com-彩票一直买一个号| www.070196.com-龙虎彩票骗局| www.994376.com-制作网络彩票平台| www.540.tv-网上买彩票包赔骗局| www.6503.cc-七乐彩预测汇总| www.071506.com-虎牌彩票app| www.447779.com-福彩3d1d玩法| www.52ar.cc-靠谱的足彩推荐| www.015938.com-唯彩会老版-| www.cai0909.com河南快三开奖走势图| www.735437.com-彩吧排列三试机号| www.864600.com-时时采彩老走势图| www.929094.com-盈彩在线app下载| www.990872.com-4s彩票中奖-| www.aq37.com-贵州省体彩中心地址| www.39ql.com-购彩网址-| www.7816.loan-网络彩票心得体会| www.38982.com-国内彩票上市公司| www.77sb.com-福彩湖南大奖| www.96pi.com-彩排拼音和近义词| www.843728.com-福彩考试题-| www.2335.cm-澳门博彩短信广告词| www.38591.cc-爱彩票app1-| www.36255.com-彩友吧专家汇总| www.947258.com-快三开奖贵州| 500彩票www.66653m.com| www.et1.com-亚投彩-| www.oe47.com-幸运彩-| www.440114.com-镇江体彩管理中心| www.532483.com-7星彩4个号多少钱| www.606761.com-福彩3d美女送胆图| www.693489.com-体彩大乐透怎样兑奖| www.771638.com-老腾龙时时彩| www.830499.com-新生彩票官方| www.888638.cc-678彩票网下载| www.954975.com-辽宁福彩官方网站| 福利彩票www.99677c.com| www.261817.com-七天彩票app| www.354401.com-中国彩票东北最大奖| www.599571.com-体彩店里怎么买| www.9484.xyz-彩吧怪字神帖会员版| www.77051.com-体彩号码几位数| www.61qw.com-最棒的彩票销售平台| www.529508.com-中彩网彩票专家| www.108676.com-中国彩票应用| www.578217.com-家彩网独胆预测| www.731647.com-彩票五等奖-| www.800359.com-卓易彩票垮了吗| www.879198.com-福体彩开奖结果公布| www.949304.com-福彩三d八卦图查表| www.990860.com-彩票一分快三计划| www.ys3.cc-送彩票-| www.629943.com-2串1竞彩足彩推荐| www.555066.cc-uu博彩-| www.705190.com-发彩下载手机版| www.44107.com-福彩3d中奖票样图| www.757322.com-体彩8串8什么意思| www.822249.com-111彩票cc-| www.884676.com-贵州体彩快三| www.952526.com-时彩是不是合法| 500彩票www.50051a.com| www.860774.com-这期福彩中奖号码| www.908038.com-网上彩票的骗局揭秘| www.957814.com-七星彩如何包码赚钱| 乐彩赢www.0014e.com| www.040108.com-合买彩票网站怎么买| www.11829.cc-中国移动积分兑彩票| www.036850.com-哪个彩票软件正规| www.76637.cc-七彩娱乐彩票| www.739140.com-香港正规彩票有几种| www.70718.com-注册送白菜彩票| www.10pb.com-时时彩冷热号码统计| www.667.online-彩币新闻-| www.651164.com-水彩教程-| www.346188.com-快彩是什么怎么玩| www.8839.cc-台北快三下载安装| www.288203.com-中国福利彩票公开| www.802579.com-彩198app-| www.990935.com-掌中彩手机版| www.ss98.com-彩票中奖巫术| www.606557.com-彩友会公平公正公开| www.060538.com-洛神体彩店在哪下载| www.09019.com-彩上海体育彩票转让| www.359152.com-世界杯足彩网| www.940040.com-彩票开奖4加1| 体彩网www.3890i.com| www.uh34.com-谁有彩票邀请码| www.67bb.com-分分彩做号软件| www.814469.com-体彩排列三奖号今天| www.058558.cc-彩界的精英-| www.751097.com-彩运彩票app| www.821308.com-福彩3d大兵鬼魂图| www.885240.com-彩票代打骗局| www.947709.com-多彩贵州有限公司| www.985433.com-足彩妖刀最新推荐| www.21fe.com-山西彩票20选8| www.tc1.cc-吉林快三开奖的走势| www.066286.com-重庆14彩开奖号码| www.137928.com-世界杯彩票最大奖| www.214505.com-彩票店几点关门| www.280696.com-重庆彩票网双色球| www.369409.com-厦门福彩快三开奖| www.453523.com-258竞彩官方平台| www.13473.cc-足彩任九投注选9场|