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.17gm.com-彩票机出票原理| www.5631.wang-天福彩票app| www.17196.cc-体育足彩竞彩网下载| www.62882.cc-哪种彩票星期五开奖| www.041037.com-乐发彩票网-| www.130968.com-彩礼钱顺口溜| www.208893.com-江苏快三可以挣钱吗| www.286175.com-福彩一句定三码字谜| www.394857.com-今天那些彩票开奖| www.519821.com-福彩3d高概率杀号| www.591228.com-体彩排列期开奖时间| www.666636.com-彩票书哪个最好看| www.745852.com-579彩票-| www.823756.com-彩民堂官网-| www.898483.com-彩票扫一扫-| www.960350.com-云顶至尊app彩票| 亿龍彩票www.1368u.cc| www.ep78.com-什么是快彩-| www.wv04.com-118彩票电脑版| www.18hq.com-易彩票趋势图表| www.3610.biz-彩票安全风向标| www.9237.com-七星彩三位数多少钱| www.53961.cc-有正规的彩票平台吗| www.99688.cc-c27彩票下载| www.066403.com-幸运飞艇是体彩吗| www.133633.com-好彩店彩票正规吗| www.213121.com-买黑彩的app平台| www.288351.com-安徽快三和值表| www.438458.com-甘肃时时彩qq群| www.530552.com-鹿彩铅手绘-| www.645698.com-众发彩票是不是骗局| www.733039.com-连云港体彩中心| www.799855.com-致富彩下载-| www.870625.com-广西十分彩-| www.984103.com-什么是福彩3d| www.em34.com-旺彩预测电脑版下载| www.wr94.com-彩票贵宾会-| www.12zi.com-好彩纪念版铁盒| www.82ub.com-甘肃快三预测机| www.1915.win-时时彩怎样翻倍投注| www.7415.pw-色彩三要素指的是指| www.23199.com-玩彩票大发快3技巧| www.65649.cc-丹东3d彩吧图库| www.082265.com-彩票平台互刷风控| www.144940.com-933彩票官方版| www.241698.com-福彩官网开奖| www.314518.com-大玩家彩票怎么用| www.383989.com-福利彩票采集器| www.522057.com-5亿彩票可靠吗| www.589790.com-似曾相识足彩| www.661975.com-竞彩8串9怎么买| www.769465.com-好彩官方版是真的吗| www.857522.com-河北快三最大值振幅| www.921011.com-男子住桥洞研究彩票| www.979006.com-淘彩票下载-| www.wx7.com-中国星彩3d论坛| www.qt58.com-福彩是假的吗| www.02wd.com-老快三助手-| www.68km.com-菲博时时彩人工计划| www.0811.cm-彩票江苏快三怎样买| www.8412.loan-爱彩乐辽宁快乐12| www.36038.cc-苹果彩票软件靠谱吗| www.79959.cc-内蒙古福彩一定牛| www.028848.com-家彩网3d排三胆码| www.103056.com-风彩彩票官方网站| www.168148.com-快三网站真的假的| www.289936.com-大赢家彩票网靠谱吗| www.370908.com-时时彩票是什么| www.460646.com-福彩3d试机号金胆| www.547357.cc-刷彩赚佣金客服| www.692978.com-伯爵国际彩票骗人| www.769602.com-好彩烟有假货吗| www.862961.com-更多精彩的鲨鱼视频| www.924234.com-体彩中心李家福| www.978857.com-好彩在哪买-| www.rw8.cc-河南跑马彩-| www.pe32.com-吉林快三一把一结| www.5rm.com-彩票彩6官网手机版| www.59hg.cc-四川体彩招聘| www.892.tv-彩铅画动漫人物图片| www.4641.org-彩票中奖神奇预测术| www.9554.loan-海南彩网-| www.68520.com-新彩票走势网首页页| www.022916.com-幸运彩票真假| www.089332.com-爱玩彩票-| www.145675.com-华彩票-| www.245211.com-福彩快开是真是假| www.312153.com-湖南福彩天地报百度| www.375392.com-玩彩票老是输钱| www.510360.com-儿童歌曲彩虹的约定| www.576742.com-江苏快三顺序走势图| www.641414.com-中国体彩门头标准| www.739847.com-中彩开奖结果查询| www.805414.com-彩色水气球定做| www.873413.com-彩票有限额吗| www.961174.com-金博彩票app| 500彩票www.26299s.com| www.ce57.com-有没有玩一分快三的| www.ry35.com-手机买彩票安全吗| www.11ez.com-能看彩票走势的软件| www.72lw.com-盛世彩票官网地址| www.0566.net-福彩3d蓝精灵| www.7841.vip-极速时时采彩官网| www.21618.com-怎么找老的彩票台子| www.58450.com-时时彩购彩助手下载| www.023763.com-被r8彩票网恋| www.087689.com-非法彩票判刑| www.140185.com-彩票66软件苹果版| www.207972.com-乐彩网一分快三技巧| www.270240.com-手机彩票开发| www.382007.com-五行预测彩票取数| www.493565.com-七星彩是私彩吗| www.557480.com-儿童简单水彩画图片| www.615708.com-体彩七位数网上投注| www.676995.com-福彩刮刮乐会过期吗| www.741813.com-南京福彩中心在哪里| www.803687.com-微信好友拉玩彩票| www.870332.com-黑彩票平台都有哪些| www.975913.com-许昌定亲彩礼一览表| www.cp2300.com-uu直播快三平台| www.jr86.com-澳洲时时彩人工计划| www.yl92.cc-大乐购彩票开奖号码| www.12rh.com-红好彩价格-| www.70ah.com-体彩481害人| www.0080.net-彩票有趣的群名| www.8384.com-拾柴七星彩软件| www.24438.com-体彩天下网址下载| www.60354.com-直击黑彩福彩网站| www.024127.com-福利彩票三个号| www.086826.com-七乐彩最高奖金社区| www.139514.com-中国体彩吧-| www.204987.com-江西快三预测与推荐| www.264338.com-财新彩app-| www.372703.com-福彩和尾走势图| www.450339.com-亚博彩票做什么| www.526131.com-世界杯怎么竞彩| www.669267.com-体彩排列五直播现场| www.730845.com-足彩手机app下载| www.790307.com-形容炫彩的词语| www.853288.com-彩票网提现失败| www.903659.com-体彩票开奖查询| www.959519.com-老彩民app能用吗| 七乐彩票www.qilc0.com| www.wt5.cc-重庆体彩快三走势图| www.nr69.com-网赌博彩-| www.5tm.com-足彩中多少起交税| www.49ib.com-99彩吧新彩网| www.173.live-彩客网竞足胜平负| www.2720.vip-快三稳赢法-| www.7290.com-微信彩虹表情符号| www.13265.com-吉林体彩网11选5| www.47474.com-3d试机号彩经网| www.82552.com-彩票专业走势| www.023667.com-七乐彩在线直播| www.080609.com-彩票七乐彩-| www.132503.com-去彩妆店化妆多少钱| www.193625.com-吉林快三根号计划| www.252653.com-湖北快三带线走势图| www.310962.com-发红包的彩票聊天室| www.368114.com-6加1彩票走势图| www.441385.com-七星彩梦册查马| www.519012.com-分分彩app计划| www.575400.com-福利彩票大奖得主| www.630912.com-亚太好彩四味爆珠|