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天

知道了
百盈PK10 www.85695.com-中国蓝彩网-| www.596308.com-家彩网3d家彩论坛| www.984990.com-云南时时彩中奖规则| www.ll09.com-彩票巴士平台| www.14uh.com-彩界过客四胆码| www.27cw.com-众购彩票多手机版| www.010812.com-腾讯彩票软件| www.108309.com-下载彩视577版本| www.193368.com-百宝彩走势图| www.274998.com-内蒙11选5爱彩乐| www.6324.biz-乐发彩下载-| www.52455.cc-足球彩票下载手机版| www.2029.net-福彩双色球买法| www.3277.pw-重庆分分彩靠谱吗| www.056364.com-七星彩中了两个号码| www.593601.com-黑龙江七彩云官网| www.889110.com-易彩网是干什么的| www.231508.com-万能彩票分析器| www.361468.com-欧洲百万彩全天计划| www.478901.com-爱彩通怎么下载| www.603817.com-手机166彩票下载| www.699750.com-纵横彩票app| www.14707.com-七星彩在线幸运选号| www.768078.com-福彩胆码预测| www.696322.com-时时彩后二跨度| www.881327.com-一分快三计划中心| www.en62.com-中彩股份快三| www.74lq.com-3d助手彩吧走势图| www.590293.com-四柱预测彩票| www.663618.com-乐彩网518直播| www.pf27.com-快三彩票兼职骗局| www.51400.com-我要加盟彩票| www.dk28.com-体育7星彩中奖规则| www.vr47.cc-福彩3d布衣图| www.426558.com-烟台福彩中心网站| www.431408.com-遵义彩票销售员招聘| www.899369.com-博发彩票平台| www.988374.com-副利彩票机选| www.em04.com-快彩助手app| www.094417.com-彩票辅助器-| www.2158.pw-彩票网店宣传话语| www.37098.com-手机头奖彩票网| www.001212.cc-五次福彩3d中奖| www.085097.com-彩票星空-| www.228723.com-福利彩票开奖好彩1| www.361312.com-六冠彩票是什么公司| www.882626.com-网上的易彩堂可信吗| www.43566.com-苹果7彩膜-| www.359916.com-体彩p3断组-| www.528897.com-易点彩票网-| www.18ve.com-澳门福彩24小时| www.cai5567.com快三怎么看走势图| www.lv8.com-福彩甘肃快三下载| www.c5.com-今天内蒙古快三开奖| www.766122.com-凤彩网免费版| www.920052.com-摇彩票app-| www.988899.cc-江西快三软件下载| www.lc7.cc-e球彩规律-| www.194692.com-快三跨度技巧| www.732552.com-全民汇彩票是否合法| www.620313.com-世界最大彩票| www.794652.com-重庆彩票网龙虎斗| www.4pk.com-极速时时采彩怎么玩| www.268970.com-长城彩票挣钱真假| www.430312.com-比利时快三开奖| www.704331.com-彩票黑平台查询| www.799906.com-搜狐彩票开奖查询| www.882961.com-彩票内部中奖骗局| www.957927.com-中国体彩改革| 中彩网www.6661a.cc| www.gt31.com-河南福彩跑马开奖| www.195418.com-吉林福彩3d走势图| www.230766.com-福利彩快8app| www.308278.com-手机上买快三可靠吗| www.373236.com-乐享500万彩票| www.487080.com-足彩截止购买时间| www.562713.com-桌易彩票官方下载| www.626903.com-重庆福利彩票官网站| www.713921.com-福彩3的试机号| www.799646.com-大众彩票怎么样| www.879022.com-玩时时彩买单双技巧| www.962449.com-旺旺彩票wwcp| 盈彩www.890732.com| www.905678.com-祥云瑞彩的寓意| www.10go.cc-酷彩铸铁锅真假| www.757259.com-下载v中彩-| www.999908.com-七星彩奖池余额最新| www.iv01.com-竞彩310-| www.642126.com-买彩票有假吗| www.750472.com-福彩包星图-| www.030873.com-c彩61可靠吗| www.859793.com-最新体彩排3试机号| www.976563.com-彩票代理返点是什么| www.850034.com-分分彩计算-| www.972687.com-日彩网余额没了| www.im25.com-足球彩票19050| www.3050.bid-金祥彩票网官方网站| www.8823.in-吉林福利彩票站| www.33638.cc-新浪爱彩平台| www.494982.com-知名博彩靠谱吗| www.26vn.com-网易彩票不给兑奖图| www.858694.com-快三14和值-| www.6776.win-赢钱彩网站可信吗| www.32799.com-乐游彩票app| www.038331.com-彩经网3d形态走势| www.195498.com-福彩开奖结果查询| www.530374.com-时时彩杀号对应码| www.654953.com-七星彩怎么下载安装| www.762973.com-柬埔寨做彩票犯法吗| www.868899.com-快彩乐乐-| www.956697.com-彩票疑云完整版| www.cp657.com-全民快三app| www.uu77.cc-正规的高频彩| www.83370.com-我和福彩的小故事| www.589025.com-全天重庆时彩计划| www.50cq.com-福彩3d老彩民心得| www.uo17.com-吉林快三遗漏号查询| www.95672.com-福彩和体彩的刮刮卡| www.322009.com-福建体彩官方| www.387093.com-官方87彩店店铺| www.cp3233.com-福建快三开奖遗漏| www.647348.com-胜负彩18161期| www.317692.com-北京福彩快乐8开奖| www.095213.com-概率学买彩票| www.962727.com-旺旺彩下载-| www.en87.com-民彩网-| www.99418.com-彩票站中奖有提成吗| www.745217.com-大赢家彩票138| www.824205.com-彩票大神吧-| www.896731.com-彩票网站代理| www.952974.com-安装天天中彩双色球| www.997522.com-时时彩源码论坛| www.rf7.com-买重庆时彩高手心得| www.51332.cc-柒鑫彩票骗局| www.3215.in-尚景欣园体育彩票| www.12124.cc-u9彩票登陆-| www.1469.vip-彩铅画画简单又漂亮| www.518410.com-赢彩网手机版下载| www.67982.com-玩网络彩票输了7万| www.648910.com-3d彩票软件安装| www.761564.com-福彩三d乐彩网首页| www.280686.com-体育彩票大乐透| www.380223.com-七乐彩中三个| www.479365.com-青岛福彩-| www.9276.xyz-乐彩网是干什么的| www.56114.com-六开彩怎么才算中奖| www.55445.cc-九宫图算法彩票书| www.92881.cc-九亿彩票最新网站| www.7864.pw-胜负彩任九吧| www.985795.com-狗哥足彩推荐| www.80822.cc-国彩网是骗局揭秘| www.084323.com-中彩在线时时彩平台| www.207679.com-手机彩票过滤工具| www.559609.com-彩购平台app下载| www.635767.cc-上海溢彩年华衣柜| www.709370.com-上海11选五彩票空| www.789761.com-竞彩怎么网上找客户| www.880404.com-7乐彩开奖-| 99彩票www.655902.com| www.vn97.com-福彩快三大发| www.631544.com-好彩头的意思| www.726523.com-美术彩铅画作品图片| www.796764.com-体彩任九-| www.874474.com-福彩快三官方网投诉|