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天

知道了
顺丰彩票 www.466107.com-5d彩超什么时候做| www.638227.com-博彩为什么合法| www.727470.com-大爆奖彩票下载| www.799959.com-福彩开奖双-| www.104728.com-牛牛彩票网官网| www.187836.com-时时彩诀窍-| www.897631.com-多彩贵州网领导| www.999754.com-快三除三余数| www.42xh.com-中国福利彩票计划王| www.1399.biz-手机上买彩票软件| www.8422.cm-爱彩彩票网软件下载| www.55634.com-幼儿简单水彩画| www.018173.com-三国杀星彩-| www.334677.com-博大彩票安全吗| www.441342.com-彩钢板机械设备图片| www.19rc.com-彩票一直买一个号| www.954302.com-小鹿网络重庆时时彩| www.zk6.cc-5d彩票开奖结果| www.ze68.com-胜负彩19050期| www.62tn.com-彩票白菜论坛| www.3736.vip-七星彩7197-| www.01055.com-签到送彩金app| www.8188.cc-8炫彩彩票玩法| www.cp238.com-乐彩网1分快3破解| www.pp12.com-668彩票网真实吗| www.55mi.com-云南体育彩票透| www.0415.date-福彩22选5走势| www.007954.com-网易彩票不更新了| www.180808.com-手机彩票下载| www.313232.com-快三三不同号有几注| www.482896.com-福彩3d实时-| www.618472.com-体彩70137店| www.4983.vip-七乐彩与七星彩| www.60984.com-保定彩票站怎么申请| www.101426.com-京彩学校事件| www.227186.com-快三秒电话-| www.370978.com-时时彩票是合法吗| www.539716.com-足彩吧十大牛人| www.975498.com-体育彩票排列五结果| www.kx22.cc-快三辅助免费下载| www.21tv.com-黑客侵入福彩| www.1914.vip-中昂彩云台地址| www.8583.net-河内五分彩开奖群号| www.20553.com-九度彩票登录地址| www.96972.cc-竞彩交税原则| www.135553.com-体彩形象店-| www.269597.com-彩9平台下载| www.396293.com-彩虹宝宝动画片歌曲| www.695074.com-体彩竞彩篮球胜分差| www.778610.com-双色球乐彩园下载| www.864404.com-手机屏幕也能贴彩膜| www.958330.com-鸿运快三违法吗| 彩票5www.270648.com| www.3702.cm-精彩十分图标| www.56613.cc-河北体彩中心| www.129805.com-最新彩市新闻| 吉彩www.602582.com| www.pj75.cc-彩票这么玩-| www.93171.cc-彩钢瓦屋顶厚度| www.173137.cc-黑彩庄家怎么赚钱| www.277270.com-官方彩安全吗| www.363582.com-甘肃快三垮度走势图| www.456049.com-福彩开奖视频作假| www.548005.com-新源里彩森下真依| www.659032.com-4d彩票开奖-| www.732123.com-政府会管结婚彩礼吗| www.59mh.com-福彩专业版走势图| www.7422.xyz-音乐色彩构成图片| www.019265.com-我要查彩票中奖| www.140333.com-福利彩票哪里兑奖| www.222154.com-分分快三助手| www.303162.com-好彩1复式投注| www.372382.com-国彩网合买骗局| www.469280.com-彩票代表五行| www.552083.com-福利彩票快乐八| www.625302.com-福利彩票机如何申请| www.732011.com-河南人彩礼最低多少| www.rl74.com-甘肃快三和值| www.49qc.com-最高陪率彩票平台| www.0434.bid-彩8彩票3333| www.383837.com-足彩怎么玩才能挣钱| www.737011.com-彩20-| www.5396.me-彩票3个数-| www.770648.com-新浪时时彩冷热分析| www.958304.com-66彩票65616| 乐发彩票www.64141.com| www.im16.com-澳客网彩票官网| www.a50.vip-七乐彩玩法规则| www.771343.com-彩票81软件-| www.891017.com-尊彩app下载| www.970253.com-彩票大赢家走势图| www.cai5757.com湖北福利快三走势图| www.22133.com-足彩培训师-| www.90413.com-体育彩票扫码| www.370628.com-体彩4场进球对阵表| www.476200.com-福彩今天开什么奖| www.553783.com-彩票店开业介绍| www.666563.com-万达彩票是黑平台吗| www.9920.org-意彩在哪里注册账号| www.78359.cc-3d彩票秘密-| www.047972.com-江苏省体彩中心官网| www.123925.com-酷彩吧彩票可信吗| www.221148.com-快三追号软件| www.299799.com-甘肃快三今天开| www.373475.com-特区论坛海南七星彩| www.539374.com-网络彩票追杀系统| www.647518.com-app买彩票靠谱吗| www.703858.cc-有多少人玩私彩| www.809168.com-七星彩头奖概率| www.877959.com-福彩机器快3视频| www.934438.com-快三如何刷流水| www.977363.com-纪梵希彩妆加盟| www.pz07.com-709彩下载-| www.04qs.com-水溶彩铅怎么用| www.901.club-什么是技术型彩民| www.85oq.com-足彩奖池多大| www.98846.com-买彩票什么时候截止| www.073771.com-彩代表什么意思| www.139914.com-一分时时彩全天计划| www.220858.com-大奖彩票官网网址| www.302714.com-幸运彩怎么玩| www.370109.com-彩神计划可靠吗| www.464672.com-福彩快3河南| www.551991.com-中国福利彩票单式| www.665857.com-七星彩中奖省份查询| www.740581.com-香港澳门彩票叫什么| www.810385.com-悟空彩票是真是假| www.881361.com-凤凰彩票45分彩| www.bj0.cc-江苏快三形态走势牛| www.nv59.com-北京福彩快三遗漏| www.2zj.com-十亿国际黑彩| www.fh4.com-三分快三福彩| www.vj59.com-彩票送彩金36| www.99423.com-分分彩是正规的吗| www.077934.com-排列五和七星彩奖表| www.136140.com-星空彩票app| www.200459.com-河南快三遗漏号表| www.322092.com-吉林福利彩票官网| www.0198.org-国家统一开奖的彩票| www.6182.com-光大彩票app下载| www.618847.com-彩票机选中奖几率大| www.695097.com-分分彩有什么平台| www.761922.com-彩友多下载-| www.822632.com-凤凰彩票被黑| www.897263.com-美国彩票分期领取| www.955424.com-彩票306安卓提现| 盛彩网www.41518p.com| www.hl26.com-彩神uu快三-| www.b34.bid-13彩是骗局吗| www.35du.com-特区彩票长条| www.002396.com-极速一分彩开奖号码| www.065951.com-赢私彩几十万| www.181684.com-彩票开奖查询七星彩| www.247044.com-湖北快三随州论剑| www.381754.com-彩票平推是什么意思| www.484977.com-福州彩票中奖人多吗| www.563367.com-7星彩票开奖走势图| www.653621.com-章鱼彩票竞猜| www.824918.com-福彩牛彩会-| www.892701.com-01彩票手机-| www.999150.com-中彩集团彭家| www.cy45.com-赢彩王免费版| www.m68.net-买彩票需要培训吗| www.663529.com-福利彩票网点有多少|