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天

知道了
9彩注册 www.542221.com-987彩票下载安装| www.007552.com-体育彩票中奖号| www.841743.com-竞彩和外围对冲软件| www.931977.com-彩票数字最大到多少| www.995409.com-北京福彩大奖在哪领| www.bk73.com-福彩快3分析软件| www.xq26.com-买彩票3d选号工具| www.970482.com-彩票专业带赚老师| www.120204.com-百万富翁彩票| www.222469.com-快三注册就送28元| www.721058.com-彩票2元网靠谱吗| www.234988.com-福利彩票正版下载| www.576370.com-上海快三开奖改了吗| www.727379.com-www.9b彩票-| www.818181.com-足彩19041预测| www.cp5766.com-白岩松说彩票太假| www.546.tv-职业彩票玩家月入| www.54947.com-足球彩票18096| www.787933.cc-体育彩票任选八| www.902305.com-3d新彩吧藏机图| www.966957.com-彩投注站app| 购彩堂www.542998.com| www.878189.com-分分彩挂机方案| www.974531.com-好运来彩票网是真假| www.am72.cc-江苏快三综合走势| www.ss74.com-上海快三免费计划| www.20bo.com-pk10彩票合法吗| www.391398.com-三彩连衣裙-| www.519378.com-彩票开奖直播电视台| www.597355.com-彩票怎么选能中奖| www.683365.com-天天快三彩票网51| www.768551.com-彩票中大奖怎么领取| www.839683.com-彩色耐磨地坪公司| www.909301.com-福建福州快三走势图| www.988377.com-副利彩票开将结果| www.uo5.cc-广西快三开奖软件| www.993986.cc-彩票游戏怎么玩| www.07057.com-9购十分彩-| www.785191.com-北京福彩3-| www.888889.com-三十五选七福利彩票| www.969682.com-乐彩3d交流-| www.cai9711.com上海快三走势下载| www.cr74.com-广西福彩投注客户端| www.307258.com-福建体彩11选五| www.945371.com-足彩玩法-| www.33094.com-上海彩票显示| www.56886.com-彩票追号是否明智| www.022318.com-时时采彩官方app| www.as92.com-福彩5d怎么不卖了| www.367342.com-周四什么彩票开奖| www.486568.com-斗鱼竞彩玩法讲解| www.51580.com-大发快三是不是真的| www.034730.com-网上彩票是否合法| www.027065.com-易彩是什么-| www.110308.com-七星彩加急版打包版| www.192315.com-快三稳赢绝招| 盈宝彩票www.ybao6.com| www.8510.top-国内官网正规彩票| www.59632.cc-彩库宝典开码直播| www.080340.com-色彩静物-| www.rh1.com-吉林快三计划独胆| www.414196.com-精釆与精彩的区别| www.38559.com-爱彩98007-| www.65914.com-那种彩票奖金最高| www.292662.com-贵州福利彩票投注| www.309688.com-快三提前开奖漏洞| www.545208.com-用统计学推算彩票| www.676591.com-多彩漆-| www.863910.com-p代玩彩票-| www.925146.com-北京长乐快三查询| www.3234.vip-微商带玩彩票微信号| www.76760.com-中国竞彩中心| www.278411.com-手机版分分彩软件| www.h53.com-古建彩绘专用颜料| www.122146.com-英国快乐彩官网| www.410714.com-重庆时时彩的玩法| www.825291.com-七星彩走势规律图表| www.948914.com-百度乐彩怎么了| www.50of.com-旭彩墙衣-| www.984391.com-中国福利彩票什么玩| www.028105.com-百度彩票下载| www.814893.com-燕赵风采福福利彩票| www.wx29.com-百宝彩青海快三| www.eg62.com-360湖北快三视图| www.368769.com-快三追号是什么意思| www.709527.com-5亿彩怎么玩| www.wd74.com-东北快三查询| www.4315.cc-好的足彩论坛| www.3083.cm-福利彩藏机图| www.80ro.com-头奖彩票下载安装| www.266614.com-快三52期开奖结果| www.536125.com-金冠彩票-| www.32rh.com-体彩3地-| www.rc89.com-快三研究经验| www.397170.com-福利彩票夺宝| www.04sc.com-高中校园彩铅画| www.610782.com-梦到买彩票的号码| www.730800.com-彩票平台返点设置| www.876977.com-彩票是怎么玩的| www.968608.com-怎么找刷彩金的平台| www.xo2.com-大发快三先赢后输| www.173123.com-快三有哪些平台| 500万彩票www.686536.com| www.981612.com-创富彩票可靠吗| www.581.red-东方彩票套彩怎么套| www.9572.shop-福利彩票3d太湖| www.861631.com-彩票开奖下载软件| 世彩堂www.5854w.cc| www.572813.com-彩票开奖香港结果| 福利彩票www.flff7.com| www.25152.cc-彩铅自学难吗| www.652412.com-福彩3d好久开奖| www.681841.com-彩票竞技风暴| www.367123.com-中国彩吧3d开机号| www.922372.com-吉林快三预测群| 淘彩票www.tcp969.com| www.906370.com-黑彩害了很多人| www.61985.com-江苏体彩7位数| 易彩集团www.25688i.com| www.wh77.com-体育彩票最新开奖| www.78hm.com-南方双彩票网走势图| www.8811.xyz-分分彩个位大小技巧| www.690616.com-足彩19045佬牛| www.859612.com-福彩六十一开奖结果| www.2fh.com-经营体育彩票挣钱吗| www.9006.online双色球大乐透体彩| www.78681.cc-即乐彩预测-| www.050034.com-手机黑彩快三| www.377876.com-彩票咋玩法-| www.183887.com-河北快三遗漏号统计| www.78xo.com-体彩单场竞猜奖金| www.565667.com-爱彩通走势图电脑版| www.13ew.com-快三连开最高纪录| www.94at.com-易彩网兼职-| www.01253.com-旧版彩客网-| www.g53.net-带坐标排列三彩经网| www.659201.com-网络彩票引流话术| www.mn7.com-新浪彩票开奖| www.995064.com-彩部首-| www.81yv.com-竞彩2c1对冲方法| www.590579.com-七星彩图库参考| www.195817.com-重庆彩个位万能码| www.504956.com-响排和彩排-| www.596051.com-2009年福彩和值| www.688220.com-微信怎么买福利彩票| www.799975.com-福彩双色球直播现场| www.95589.com-t8国际彩票平台| www.502270.com-彩狗金手指客服| www.677650.com-手机上在哪买彩票| www.739177.com-快三权威线上投注| www.834353.com-好彩柠檬好抽吗| www.957030.com-有没有彩票挂机软件| 好彩头www.51331j.com| www.ns94.com-拍彩票查中奖| www.122015.com-时时彩诈骗报案流程| www.439191.com-123彩票全国开奖| www.520491.com-福彩双色球怎么中法| www.004939.com-体彩6十1兑奖| www.554279.com-花生彩票真假问题| www.616546.com-在哪买竞彩-| www.692539.com-福彩3d双彩图百度| www.917811.com-彩虹岛水果刷钻石| www.794178.com-怎样黑网站赌博彩票| www.852090.com-玩彩老手双色球专栏|