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.8356.com-重庆时时彩复式计算| www.986621.com-256彩票安卓版| www.12.me-约约彩票下载| www.553465.com-上海福彩网正宗吗| www.3394.vip-打击外围彩票黑庄| www.235222.com-3d彩票开奖结果| www.610225.com-淘宝的彩票在哪里| www.767120.com-助赢软件北京快三| www.3qz.com-彩票查询号码重复| www.77363.cc-头彩是正规网站吗| www.cj7.cc-福利彩票有几个彩种| www.362183.com-关于彩虹的优美句子| www.n24.live-京彩合法吗-| www.084177.com-五分彩全天精准计划| www.361511.com-欧洲百万彩计划| www.603583.com-山西省体彩-| www.777707.com-下载买彩票店| www.t84.com-下载福彩双色球| www.791013.com-福彩福彩快3助手| www.973457.com-彩虹第一集-| www.224545.cc-彩神之霸ll-| www.507695.com-彩票世界网址| 非凡彩票www.77210j.com| www.16re.com-体彩图谜第四版| www.118123.com-福彩3d海南大公鸡| www.598747.com-长春彩钢房厂家| www.691400.com-竞彩天天手环| www.837093.com-一定牛体彩软件| www.935526.com-那些凤凰彩票导师| www.997388.com-体彩8号店app| www.dl28.com-快三每天都出豹子吗| www.yg86.com-福彩15选5-| www.32fb.com-雨后一抹彩虹图片| www.3822.org-七星彩热-| www.17756.cc-老郑足彩个人展示| www.72427.com-彩29彩票安卓下载| www.955966.com-彩票倍投骗局| www.c3.cm-安徽快三历史遗漏| www.sd75.com-3d福彩天牛图厍| www.633160.com-如何买篮球彩票| www.061897.com-福彩吧提款失败| www.989238.com-福彩3d选号王| www.ht24.com-北京体彩开奖结果| www.06kz.com-彩票33期开奖| www.91ql.com-婚恋彩票骗局| www.00363.com-手机彩票真假问题| www.900960.com-彩吧3d图迷第四版| www.940010.com-腾讯彩票投注平台| www.04we.com-房子彩铅绘画作品| www.4764.biz-中国福体彩开奖信息| www.22620.com-七乐彩官网齐鲁风来| www.037068.com-大羸家彩票-| www.358549.com-体育彩票基本知识| www.553333.com-为什么足彩老是输钱| www.645778.com-足彩怎样买才能稳赢| 乐趣彩www.lqc4.com| www.371594.com-彩票577登录| www.508735.com-长影娱乐虚拟彩票| www.622322.com-买什么彩票好中奖| www.690989.com-竞彩篮球群-| www.774023.com-福乐彩28怎么玩| www.751142.com-台湾威力彩最新开奖| www.976395.com-市彩礼均价排名| www.vw78.com-1分快三软件| www.118206.com-彩票推算大师| www.dy46.com-58彩票官方网站| www.b83.in-福彩佣金-| www.33st.cc-19019期七星彩| www.594.cn-亚投彩票网址| www.911654.com-十年彩票平台| www.992598.com-福彩任选五-| www.fb57.com-七星彩专家预测频道| www.zu02.com-豫彩通app-| www.24yi.com-华彩置业-| www.339.cn-彩票精准计划破解| 99福彩www.719969.com| www.820951.com-彩钢板门头-| www.lj21.com-好彩票网站提现快吗| www.115947.com-一分快三开奖的软件| www.293267.com-棋牌彩票一体平台| www.452633.com-精彩网彩票下载安装| www.611831.com-手机上网能买彩票吗| www.93da.com-一寸彩照是什么| www.295930.com-安徽福彩怏三走势图| www.784188.com-奔跑吧彩球游戏| 500彩票网www.611036.com| www.594881.com-陕西三彩集团| www.839986.com-澳客彩票手机版| www.32fj.com-彩虹六号高清壁纸| www.635496.com-老挝博彩-| www.790339.com-炫彩是什么意思| www.906411.com-彩票中奖网名| www.cai4345.com大发快三网站| www.22gw.cc-盈盈彩票注册| www.243652.com-下载1516购彩| www.224481.com-快乐彩开奖号码结果| www.380923.com-三d福彩内部报2| www.680807.com-赌博彩票必输| www.792777.com-彩票中奖符是真的吗| www.306627.com-正规的彩票投注软件| www.419865.com-二元彩票走势图大全| www.211217.com-大发快三有人赢吗| www.358411.com-生肖彩一分钟一期| www.499519.com-八彩票-| www.616278.com-中国竞彩中奖查询| www.6525.biz-福彩小小鱼字谜| www.85188.com-福彩2d技巧-| www.152197.com-能黑私彩的软件| www.723571.com-常州福彩中心电话| www.577280.com-首页青蛙彩票导航网| www.802013.com-体福彩开奖查询| www.924466.com-六亿彩票-| www.cai2300.com湖北快三一定牛今天| www.2669.live-足彩竞彩世界杯| www.06712.com-彩票海报图片手绘图| www.298565.com-兰州体彩-| www.330457.com-重庆时时彩五星综合| www.992341.com-时时彩四星万能胆| www.pg40.com-彩票走势图大全下载| www.678418.com-福盈门彩票信用吗| www.996004.com-首页彩通-| www.965742.com-彩神争霸4-| www.op74.com-体彩彩票-| www.8802.vip-腃讯分分彩-| www.207120.com-至尊vip彩票| www.8106.cc-缅甸三分彩开奖号码| www.28276.cc-常州福彩中心电话| www.78557.cc-3d家彩网断组| www.647654.com-智胜彩票平台| www.6108.vip-足彩倍率的计算公式| www.44740.com-福利三分彩有规律| www.022459.com-重庆时彩小窍门| www.106945.com-瑞彩祥云破解程序| www.877792.com-我想做网络私彩代理| www.xc09.com-南国彩票七星彩开奖| www.37bj.com-跑狍玄机彩图| www.4772.top-福利彩有没有规律| www.t15.website什么彩票平台最可靠| www.365899.cc-先学线描还是彩铅好| www.52pz.cc-悉尼快5彩票算法| www.444725.com-福彩三地天中图库| www.18211.com-彩票智能算号| www.837968.com-双色球杀号一彩经网| www.981908.com-七星彩今天开什么奖| www.gv07.com-彩票刮刮乐透视工具| www.52qw.com-天刀射利彩签| www.2803.vip-彩票百度百科| www.63481.com-吉林快三几点开始| www.6585.vip-彩票白菜收录网站| www.237253.com-全民中彩票打不开| www.543198.com-快三技术-| www.561083.com-盈利彩票下载| www.683489.com-浙江福彩征召| www.790988.com-广州彩烟-| www.903768.com-万豪福彩下载| www.988081.com-腾讯天天中彩吧| www.eu33.com-凤凰乐彩网下载| www.54.biz-最新彩票软件下载| www.0146.xyz-色彩造句简单| www.9188.cc-乐彩网搞-| www.016740.com-易旺彩票网下载| www.101449.com-乐彩33app-| www.29600.com-神彩福牛首页| www.030609.com-新浪福彩双色球杀号|