QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery响应式单排图片滚动代码

原创商用 jQuery响应式单排图片滚动代码

jQuery基于Swiper制作响应式的图片列表左右滚动,悬停图片遮罩文字切换效果。适用于项目解决方案产品列表响应式布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="service-title">
  <h2>解决方案</h2>
  <p>面向各种领域:教育、装修、安防、旅游、企业、集团公司等网站建设、营销网建设解决方案、品牌网站设计等建站服务。</p>
</div>
<div class="solution-box">
  <div class="solution-cut">
	<button class="fa fa-back"></button>
	<button class="fa fa-more"></button>
	<div class="solution-swiper">
	  <ul class="solution-wrapper">

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>企业网站建设解决方案</h3>
			<p>好推建站全面提升品牌、提高技术、完善服务。推动中国互联网共同成长。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/1.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>营销型网站解决方案</h3>
			<p>好推建站-互联网思维,营销技巧,SEO推广方式帮助企业获得客户流。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/2.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>HTML5响应式网站解决方案</h3>
			<p>好推建站,针对移动互联网时代,好推提供企业HTML5响应式网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/3.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-all"></i>
			<hr>
			<h3>集团网站建设解决方案</h3>
			<p>好推建站-专注于集团网站建设、设计开发、集团群站整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/4.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-security"></i>
			<hr>
			<h3>品牌网站定制解决方案</h3>
			<p>好推建站-网站定制服务主要针对品牌需求,专业定制属于自己的品牌网站。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/5.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-huanhuobz"></i>
			<hr>
			<h3>外贸网站建设解决方案</h3>
			<p>好推建站-帮助企业开拓海外市场业务,外贸网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/6.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-aniukefu2"></i>
			<hr>
			<h3>装修行业网站建设解决方案</h3>
			<p>好推建站为装修企业提供全方位数据分析,地区用户需求分析,网站建设整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/7.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-set1"></i>
			<hr>
			<h3>机械行业网站建设解决方案</h3>
			<p>好推建站针对机械行业,通过对客户需求,用户数据分析,做出网站建设整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/8.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>LED行业网站建设解决方案</h3>
			<p>好推建站-为LED行业提供网站建设解决方案,充分体现LED产品的品牌优势,重点塑造品牌个性化形象。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/9.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-naozhong"></i>
			<hr>
			<h3>IT软件系统网站建设整体解决方案</h3>
			<p>好推建站为IT软件系统企业,提供网站建设整体的解决方案和应对措施。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/10.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-suo"></i>
			<hr>
			<h3>行业门户网站建设解决方案</h3>
			<p>好推建站,专业为企业、政府、不同领域提供高品质的大型门户网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/11.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>生态农业网站建设解决方案</h3>
			<p>好推建站助力-生态农业,新农业发展,新农业健康食品发展网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/12.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>环保节能网站建设解决方案</h3>
			<p>好推建站专业的设计师根据节能环保公司的需求,采用最新表现技术全面设计,充分体现公司的企业形象</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/13.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>房地产网站建设解决方案</h3>
			<p>好推建站提供房地产网站建设方案,采用先进的HTML5技术,完整的布局给企业带来的经济效益立竿见影。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/14.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>教育培训网站建设解决方案</h3>
			<p>在互联网高速发展的今天,好推建站为教育培训企业提供网站建设整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/15.jpg'>
		</li>

	  </ul>
	</div>
  </div>
</div>

<script type="text/javascript">
	$(document).ready(function(e) {
		new Swiper('.solution-swiper',{
			wrapperClass: 'solution-wrapper',
			slideClass: 'solution-slide',
			slidesPerView: 'auto',
			loop: true,
			observer:true,
			observeParents: true,
			centeredSlides: true,
			prevButton: '.solution-cut .fa-back',
			nextButton: '.solution-cut .fa-more'
		});
	});			
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
亚洲28 www.51338.cc-至尊彩快3-| www.2063.net-福彩生肖时时彩| www.089067.com-快三投注网站| www.199753.com-福彩直播现场直播| www.328321.com-星彩官网-| www.432880.com-为什么赌快三总是输| www.84077.cc-河南郸城县彩礼| www.m18.wang-周日买什么体彩彩票| www.469665.com-福彩宁夏快三| www.008796.com-彩票源码网-| www.331624.com-彩票热冷号分析| www.38119.cc-3d跨度走势大彩网| www.020441.com-38彩app-| www.110780.com-体彩几天开一次奖| www.941978.com-给平台买彩票赚佣金| www.cai4400.com中国福彩快3广西| www.812203.com-火箭彩票p版| www.36576.cc-线上澳门彩票| www.464009.com-福彩专家群-| www.m50.site-10选5是啥彩票| www.75ia.com-pp彩票是什么意思| www.35819.com-时彩违法吗-| www.885675.com-内蒙古今天快三结果| www.967414.com-现在网上能买彩票吗| www.bb68.cc-内蒙古快三推荐号| www.297062.com-中彩票的技巧| www.632543.com-吉林省快三彩经网| www.266.pw-快三福利-| www.425.biz-cp599彩票苹果| www.6346.xyz-福彩六等奖是什么| www.5141.vip-聚宝快三合法吗| www.609297.com-派彩电视走势图| 金冠彩票www.c4526.com| www.30733.com-体彩大乐透开奖规则| www.702929.com-竞彩足球预测彩客网| 福彩网www.5522s.cc| www.759088.com-大中华彩票可靠吗| www.91997.cc-足彩过滤软件| www.303897.com-鑫彩网真假-| www.392533.com-搜抓彩票-| www.497456.com-王者彩票团队计划| www.28008.cc-cp1688彩票-| www.949304.com-福彩三d八卦图查表| 博通彩票www.684050.com| www.124318.com-福彩3b开机号| www.890389.com-全民彩票网app| 万利www.32123g.com| www.230594.com-买彩票砍龙什么意思| www.72mx.com-七星彩票开奖历史| www.8786.cc-福彩大数据分析| www.85743.com-彩铝板-| www.064229.com-双赢彩票网手机版| www.sw9.cc-今日甘肃快三走势| www.52157.com-爱乐彩彩票官网| www.577726.com-彩虹糖的泡沫| www.751943.com-亚上彩注册-| www.887680.com-阿里巴巴彩票合法吗| www.977390.com-彩色混凝土压模价格| www.va76.com-河南快三一天多少期| www.22hp.com-海口七星彩早版区| www.60459.com-乐彩彩票是正规的吗| www.929700.com-彩票668-| www.179512.com-快三计划群有托的吗| www.106832.com-上海快三大小玩法| www.447669.com-彩票公益金使用要求| www.030124.com-c8cn万彩吧六彩| www.r33.com-六冠彩票能提现吗| www.46gg.com-江苏七位数体彩网| www.04179.com-彩票看中几等奖| www.621597.com-福彩选号客密| www.l57.com-81彩下载官方下载| www.81459.com-今晚的彩票中奖号| www.91477.com-好彩烟种类-| www.202206.com-彩票中奖查询| www.767972.com-惠普彩色打印一体机| www.983430.com-犀牛彩票赌博| www.628834.com-六福彩票是真的吗| www.75129.com-彩票属行业-| www.756051.com-彩票应该怎么选号| www.946695.com-吉林福彩快3开奖号| www.622592.com-排列五私彩app| www.907693.com-韩式15分彩计划| 奔驰彩票www.29178b.com| www.vv18.com-时时彩口诀大全图| www.661063.com-02彩票-| www.365807.com-福彩双色球开奖记录| www.ae7.com-一分钟快三-| www.hx63.com-河北快三形态走| www.67ft.com-333彩网平台| www.369771.com-彩之云客服-| www.622751.com-甘肃武威福彩中心| 趣彩网www.qucw8.com| www.059566.com-k彩富民福地登录| www.143367.com-动爻算港彩一肖法| www.ja58.com-福州快三开奖| www.984293.com-时时彩砍龙-| www.bj58.com-大发快三在哪里下载| www.903571.com-19044足彩-| www.984105.com-辽宁福彩网官方网| www.lw43.com-好彩妹石敢当的手| www.664664.com-水溶彩铅画-| www.11697.cc-福彩主任冯贪3千亿| www.71319.com-黑客中福快三| www.021225.com-彩票带单包赔骗局| www.856398.com-彩票反买是什么意思| www.929394.com-福彩群英会最新开奖| www.980542.com-968彩票注册| www.cp0035.com-快三网上到处拉人| www.932956.com-一分快三靠谱吗| www.992365.cc-购彩堂一分快3| www.ee70.com-彩票刷负盈利技巧| www.162283.com-竞彩足球手机版下载| www.535117.com-黄金分割率与彩票| www.629911.com-时时彩龙虎和规则| www.703619.com-彩票神人王成周视频| www.87351.com-933彩票版-| www.198866.com-皇都彩票网址入口| www.62878.com-竞彩篮球胜平负| www.511029.com-体彩顶呱刮微信兑奖| www.877875.com-福利彩票中3个号码| 68彩票www.68682c.com| www.500.hk-赌彩网站-| www.605266.com-大有彩票注册网址| www.304968.com-11选五彩票-| www.433124.com-福利彩票3带连线| www.650227.com-北京体彩公司好不好| www.786732.com-极速彩票技巧| www.927335.com-买彩票买几位数| 乐点彩票www.662358.com| www.535044.com-福彩3d跟号技巧| www.599552.com-篮球体彩微信群| www.664148.com-农行福彩306定投| www.731364.com-彩票打码兼职| www.796177.com-大乐透彩票对比器| www.855175.com-彩票两元网安全吗| www.928177.com-陕西派彩电子走势图| www.973488.com-彩虹之下赵雷歌词| www.cai3577.com快三胆拖投注计算器| www.59953.cc-百彩网香港-| www.005866.com-黄金时时彩软件下载| 吉利彩票www.66376i.com| www.759038.com-国际微彩-| www.861422.com-赢彩开机号-| www.958872.com-绍兴彩票中奖号码| www.zs00.com-银川七彩艺校创始人| www.254473.com-河北快三三同号通选| www.318606.com-七星彩口诀与技巧| www.384665.com-大王彩票网-| www.468278.com-pk彩票是正规的| www.8374.org-海南七星彩梦解码| www.29100.com-福彩定位胆王| www.138283.com-彩票三d试机号| www.2040.in-k8彩票坑人吗| www.60ts.com-双色球专业玩彩预测| www.49139.cc-分分时彩是真的吗| www.022327.com-180彩票-| www.70280.com-玩运彩讨论区| www.589840.com-大乐透预测彩宝贝| www.020913.com-福彩1d打法-| www.4534.net-第19024期体彩| www.453953.com-酷彩吧苹果下载| www.3662.top-今天福彩买什么号码| www.056832.com-大师抓七星彩规律| www.683612.com-义乌市体彩中心|