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.416.me-分分彩网页版| www.03ds.cc-电玩城的那个彩票机| www.833179.com-福彩3d一多邦| www.924974.com-快乐彩中奖助手软件| www.987929.com-彩娱乐应用下载| www.ug2.com-足彩8串1-| www.483848.com-香港富家彩-| www.621468.com-福利彩票4928期| www.781648.com-开彩票店怎么申请| www.886573.com-百度彩票软件| www.968674.com-谁知道时时彩微信群| www.cp9968.com-爱乐彩中奖助手| www.212594.com-福彩3d金码杀码| www.oy66.com-网络兼职买彩票骗局| 网易彩票www.095wy.com| www.777740.com-全球彩开奖下载| www.873514.com-易购彩票靠谱吗| www.948796.com-彩票种类大全| 500彩票www.66653z.com| www.595501.com-足彩神棍区-| www.cl8.com-pc福彩是骗局| www.169770.com-湖北快三-| www.276269.com-各种釉彩大瓶在哪里| www.597896.com-蚶江镇彩票站电话| www.744841.com-星光彩票是真的吗| www.826798.com-彩票造假事件刘亮| www.910214.com-彩票3d怪字-| www.978195.com-富民彩票属于犯法| www.gt3.cc-爱乐彩11选五| 超级彩票www.811597.com| www.175379.com-福建快三推荐号码| www.d34.bid-南国彩票排列五开奖| www.774414.com-七星彩开奖下期预测| www.072072.cc-网上买彩票靠不靠谱| www.000071.com-优游彩票-| www.886237.com-彩客网让球胜平负| www.680278.com-彩中彩平台是骗局吗| www.117103.com-周三竞彩足球对阵表| www.563970.com-广西福利彩票网上购| www.8262.biz-微信群里玩北京快三| www.7174.biz-欢林后一时时彩计划| www.238174.com-浙江福彩十二·选五| www.323260.com-乐和彩票-| www.10784.com-篮球竞彩500| www.cp5355.com-福彩快三什么意思| www.626277.com-福彩3d百位振幅| www.768844.com-好彩头什么意思| www.893391.com-彩票中奖计算| www.cp3520.com-彩票下级设置返点| www.639601.com-体育竞彩店前期投资| www.2386.xyz-湖北快三过滤| www.02808.com-中彩网下载地址| www.68646.com-乐彩网注册与登录| www.035790.com-体彩中奖怎么看| www.588587.com-七星彩什么叫做合数| www.701866.com-陌陌彩票app下载| www.813540.com-福彩3d几点钟开奖| www.916767.com-快5彩票玩法| 中国彩票网www.zg16.com| www.252.cm-牛彩3d走势图| www.931357.com-一等奖的彩民被杀| www.620248.com-时时彩手机客户端| www.579250.com-非法经营网络彩票罪| www.703200.com-京彩彩票娱乐| www.796906.com-彩票中奖走奇门下载| www.870633.com-福彩上海基本走走势| www.947150.com-福彩开奖公告号码| www.993307.com-彩票有多挣钱| www.cg17.com-一分快三大发下载| www.yy10.com-发红包的彩票聊天室| www.41qe.com-七星彩加注什么意思| www.643.cm-大乐透幸运彩乐乐| www.5829.wang-亚上彩官网-| www.788734.com-彩票缩水是什么意思| www.862851.com-大乐彩开奖号码| www.956101.com-买彩票的正确心理| 网易彩票www.9356i.com| www.612521.com-d8彩娱乐下载| www.cp9396.com-手机彩票软件下载| www.28787.com-彩快三娱乐网址| www.317124.com-火箭彩票网vip版| www.930067.com-彩票网人工计划| www.81225.cc-昨天彩票是什么意思| www.205295.com-五分钟快三走势图| www.361563.com-书签百彩网大全| www.527915.com-荷兰5分彩走势图| www.621298.com-红旗手机彩票| www.fd31.com-幸运分分彩一期计划| www.s22.xyz-湖北快三分布| www.51fp.com-e彩堂官方彩| www.0275.cn-快三如何选号| www.5320.cm-腾讯分分彩杀号教程| www.02368.com-江苏快三销售平台| www.929077.com-快三单双赌博技巧| www.333103.com-玩彩是什么-| www.196728.com-彩票大厅开奖结果| www.367593.com-彩铅获奖作品一等奖| www.817108.com-算出彩票的概率| www.76gi.com-洛杉矶国际快三网址| www.678432.com-彩霸一休独胆| www.823933.com-凤彩字谜手机版字谜| www.981190.com-七彩冰淇-| www.ti20.com-中国体彩报纸| www.358124.com-微彩提现什么时候到| www.038220.com-大财神彩票园| www.15rf.com-彩票的报纸-| www.76998.com-彩票兑换期限是多久| www.588951.cc-南方福彩网推荐网址| www.903108.com-彩票合买中奖| www.975631.com-河南伊川娶媳妇彩礼| www.cp409.com-江苏快三平台投注| www.uo57.com-澳门五分彩开奖查询| www.28lf.com-3d预测乐彩网| www.40td.com-88爱彩我的帐户| www.6329.xyz-下彩彩票网页版| www.1405.me-好运来彩票合法吗| www.311146.com-研究彩票走势图大全| www.512676.com-彩铅图画大全| www.618028.com-幸运彩走势图软件| www.704954.com-众乐彩-| www.811648.com-福彩主任王素英家庭| www.926503.com-瑞彩祥云结不了卡| www.855691.com-福彩最新开始结果| www.980476.com-广西体彩自助投注| www.uz80.com-1青海快三开奖结果| www.960410.com-体育彩票上亿大奖| 大赢家彩票www.5086u.com| www.cy48.com-如何玩彩神2大发| www.sv91.com-准提咒彩票-| www.15ct.com-体育彩票店电话| www.0946.cc-北京快三有多少种| www.0300.tv-时时彩任三方法| www.770044.com-恒大国际彩票| www.965797.com-彩票标语广告| www.654341.com-赣州福利彩票网站| www.209350.com-抓黑彩需要什么证据| 凤凰彩票www.77803m.com| www.nv78.com-微信可以玩的彩票| www.4856.biz-足彩大数据分析软件| www.830301.com-577彩票登陆| www.229770.com-新彩网手机版| www.1mo.cc-湖北体彩手机app| www.48cw.com-福利彩票大小| www.003.live-分分时时彩开奖规律| www.1773.com-上海福彩基诺彩经网| www.928360.com-鸿鑫彩票骗局揭秘| www.995124.com-彩票扫码兑奖| www.zm7.cc-体彩排列五走势图| www.ok78.cc-彩票群如何炒群| www.04ie.com-动漫人物少女彩铅画| www.64zu.com-转个彩票站多少钱| www.252623.com-今日中彩网靠谱吗| www.355460.com-五分彩万位定位胆| www.428456.com-盛大彩票网登录| www.188217.com-江苏爱彩乐快三| www.302645.com-七星彩图规怎抓码| www.375017.com-搜索七星彩-| www.511239.com-雨后彩虹一类的网名| www.577858.com-今天彩票中奖的号码| www.197217.com-澳洲五分彩开奖网址| www.051689.com-彩票案1360亿| www.111012.com-3030彩票-| www.2064.cm-体彩双色球彩下载| www.w59.xyz-好彩频道往期直播|