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天

知道了
1分快三 www.2739.wang-分分钟快三怎么玩| www.549646.com-欧冠足彩app| www.949577.com-九州彩票安卓版下载| www.520917.com-彩之网首页福彩彩票| www.050343.com-内蒙古福彩pp下载| www.0717.net-香港赛马派彩和赛果| www.1003.xyz-大乐透彩票选号| www.419133.com-竞彩足球网点| www.528273.com-简笔彩色画-| www.608261.com-江苏快三信誉群| www.687821.com-福彩扫一扫app| www.775524.com-743cc天天好彩| www.866491.com-昨天的彩票是什么| www.940431.com-易彩网破解-| 乐彩33www.lc03.com| www.ke99.com-买彩票用啥软件| www.289125.com-彩计划安卓版下载| www.3qq.com-京彩软件下载| www.33gx.com-飞来福彩吧今天3d| www.2358.online七彩神仙鱼繁殖| www.03669.com-为什么玩彩票必死的| www.65015.com-竞彩娱乐诈骗| www.045587.com-彩票代理按天反佣金| www.555070.com-彩票中亿元彩票| www.2578.cn-中信福彩网站| www.09262.com-福彩3d开将结果| www.64441.com-足球竞彩投注app| www.029295.com-近期彩票开奖结果| www.766157.com-永9购彩票是真是假| www.836342.com-计算器竞彩足球| www.775.cm-研究彩票的规律| www.9536.online彩色水泥地面做法| www.51115.com-彩虹糖代表的寓意| www.681290.com-兴盈快三app| www.27919.cc-博雅彩票苹果| www.5200.vip-信誉好的时时彩平台| www.5189.vip-风采彩票35的7| www.xv09.com-01彩票下官方| www.3454.me-赊账打彩票-| www.52956.com-买福彩用什么软件| www.310152.com-长春彩票大奖| www.057451.com-七星彩几点开奖结果| www.115654.com-兰花彩铅画图片| www.874664.com-大同彩票-| 天下彩www.450568.com| www.qq80.cc-体彩玩法种类| www.713517.com-王者彩票一分快三| www.868191.com-南国彩票论坛图归一| www.367316.com-新彩吧网藏机图| www.686116.com-赛马结果及派彩| www.890585.com-彩票50倍-| www.jb4.cc-uu快三直播彩票| www.1016.in-上海怏3爰彩乐| www.68770.cc-一定牛安徽快三走势| www.442046.com-网易红彩专家入住| www.588157.com-搜索休彩排挒3| www.680255.com-安卓彩票软件排行榜| www.771848.com-澳洲时时彩的网址| www.930796.com-双色球中彩网擂台赛| www.317002.com-七乐彩玩法技巧| www.157469.com-竞彩群-| www.569329.com-体彩三句话字谜区| www.693105.com-快三透视辅助软件| www.778526.com-彩拾彩票软件| www.862998.com-福彩开奖上期| www.932107.com-吉林体彩11远5| www.994670.com-辉煌彩票注册网址| www.17326.cc-足彩本月对阵表| www.79892.com-福彩金条回收价格| www.055495.com-怎么申请福利彩票店| www.363871.com-更懂彩民彩吧| www.356311.com-智慧预测彩票| www.525709.com-私彩网站都是在国外| www.668062.com-s55·cc彩票| www.757144.com-创富彩票可以玩吗| www.877902.com-彩迷朋友-| www.974898.com-七星彩开奖预测最准| www.yt70.com-吉林市体彩中心主任| www.49gu.com-排列3走势图彩乐乐| www.263705.com-彩吧导航-| www.233168.com-快三赢钱技巧规律| www.333643.com-彩票员工-| www.459392.com-彩票站老板自己刷量| www.566746.com-彩票买单双技巧| www.654861.com-云南时时彩奖金表| www.974215.com-彩铅画花卉图片| www.cai708.com-快三中奖助手免费版| www.rl28.com-重庆时时彩最强规律| www.843313.com-公益体彩-| www.183313.com-体彩大乐透开奖查询| www.007148.com-时时彩开奖改变| www.240892.com-河北快彩app| www.994924.com-好彩堂资料-| www.f65.cn-今日3d彩票谜语| www.379983.com-彩票运营总监| www.577150.com-爱彩人彩票网合法吗| www.654255.com-做假彩票发行| www.737648.com-90彩票是真的吗| www.820231.com-关于农村天价彩礼| www.906693.com-一分福彩3d-| www.961824.com-融彩网合法吗| 68彩票www.68689j.com| www.iq80.com-比分竞彩-| www.788126.com-中国足彩网篮球比分| www.sc60.com-福彩3d论坛杀码| www.53je.com-135cc彩票下载| www.2342.pw-重庆分分彩免费计划| www.9203.loan-卖一注彩票挣多少钱| www.49816.cc-足彩平台哪个最靠谱| www.1698.cm-名人彩票下载| www.26454.com-彩票三三下载| www.88660.cc-怎样查彩票开奖结果| www.069101.com-幸运快三多少期啊| www.151720.com-中体彩网官网| www.ht29.com-黑龙江省体彩| www.6pn.com-计算彩票的公式| www.655659.com-开发彩票分析软件| www.857447.com-彩之源彩票是怎么玩| www.958374.com-福利彩票的秘密| 500彩票www.638477.com| www.t79.net-体彩天下.购彩大厅| www.611.live-北京时时彩预测软件| www.4879.top-688彩票抽奖| www.ow67.com-乐彩3d-| www.45ds.com-今天竞彩稳胆推荐| www.389.red-安徽福彩电话号码| www.3354.biz-买足彩哪个靠谱| www.078605.com-福彩群英会最新开奖| www.286446.com-网赌快三破解器| www.723.cm-分分彩杀号绝招| www.hj87.com-江苏快三单双| www.220507.com-快三昨天开奖号码| www.483048.com-福彩3d字迷专区| www.052.online-同乐彩票网址| www.485518.com-网络售卖刮刮卡彩票| www.282708.com-9彩彩票平台| www.520657.com-航天彩虹无人机招聘| www.022575.com-大彩鲸快三-| www.150195.com-保定体彩中心怎么样| www.5690.biz-失控的黑彩今日说法| www.963747.com-福利彩票好处| 多乐彩票www.477373.com| www.176103.com-易彩快三大小技巧| www.2949.me-福利彩票店面装修| www.066601.com-彩票10大网站| www.252643.com-微彩网是正规的吗| www.102012.com-彩票赢钱秘诀| www.177706.com-app快三助手下载| www.80768.com-3d图谜汇总牛彩网| www.go30.com-河北福利彩票快三| www.27ej.com-如何找分分彩的漏洞| www.325.hk-幸运彩票网安全吗| www.4429.xyz-下载易彩集团| www.9977.loan-感觉福彩3d很假| www.40052.com-淘金彩票有挂吗| www.89670.com-黄鹤楼大彩烟多少钱| www.038090.com-牛牛彩票网-| www.113842.com-福彩三d首页| www.199388.com-福彩快三遗漏数据| www.258441.com-足彩推荐-| www.ae54.com-快三一定牛快三| www.46564.com-北京pk拾彩票软件| www.035585.com-红彩会注册登录| www.331159.com-彩票看趋势-|