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.693439.com-63彩票app-| www.796931.com-倍投计算器彩票工具| www.921127.com-彩神大发官网| 大赢家彩票www.578411.com| www.258443.com-足彩19042-| www.549292.com-锋彩直播tv官网| www.737374.com-福彩三d彩经| www.857639.com-彩之源注册-| www.935329.com-彩客彩票ios| www.990413.com-网上购彩哪个靠谱点| www.br52.com-彩票走势图全国| www.wz84.cc-七星彩头尾论坛| www.20mi.com-今天晚上福彩开奖| www.871981.com-福彩开机号码查询| www.997341.com-仙彩彩票-| www.cu05.com-网上彩票靠谱的平台| www.l99.org-七乐彩票的危害| www.47gt.com-下载网易彩票双色球| www.0487.com-360安全购彩| 博乐彩票www.338995.com| www.vu01.com-惠民彩票邀请码| www.56vx.com-yicai易彩-| www.4419.cn-快三土豪计划| www.56rk.com-汕头彩票中奖怎么领| www.1731.vip-博彩微信方式送彩金| www.9200.biz-七百万彩票网| www.89by.cc-做梦梦见数字买彩票| www.832.net-彩票游戏主播| www.5994.com-五一彩票-| www.19303.cc-彩发发预测-| www.97728.cc-越南时时彩-| www.094508.com-彩票外挂软件手机版| www.541356.com-玩什么彩票赚钱| www.630651.com-即开型彩票中奖率高| www.701823.com-足彩任14开奖| www.497585.com-pk彩下载安装| www.615277.com-今日小小鱼彩吧图库| www.kr24.com-中彩擂台赛-| www.78.biz-天下六给彩开奖结果| www.071502.com-人人买彩票电话号码| www.071749.com-体彩店开业宣传单| www.28ew.com-迅彩票-| www.uk94.com-内蒙古福彩网站| www.7117.xyz-爱乐透彩票炸金花| www.33981.com-无极彩票平台app| www.874695.com-彩天下平台开户| www.276791.com-博彩是违法的吗| www.4890.vip-新手如何玩足彩| www.35710.com-体彩加盟条件| www.254815.com-吉林快三选号技巧| www.384398.com-福彩店违规怎么举报| www.027790.com-中国体彩十一选五| www.119313.com-卓易彩票提现不了| www.873763.com-老杨说彩近15期| www.966945.com-新彩票网首页| www.cai3955.com福彩湖北快三开奖| www.391093.com-艾彩97179-| www.566982.com-彩票网站定制| www.661752.com-足彩6x22多少钱| www.341062.com-电脑版牛材网彩摘网| www.078.in-七星彩能不能机选| www.445046.com-多乐快三的技巧| www.565637.com-苏宁智慧彩票| www.653532.com-玖富彩票下载安装| www.726793.com-乐彩缩水软件| www.792012.com-福彩双色怎么算中奖| www.871252.com-福彩彩吧图迷第一版| www.941386.com-中福时时彩官网| www.986336.com-金手指的彩票专栏| www.bi67.com-时时中彩票官方网站| www.tb87.com-中国大量彩票店倒闭| www.02vi.com-彩虹什么意思同性恋| www.64tk.com-体彩排列3预测杀号| www.1876.website柬埔寨彩票客服| www.460369.com-竞彩足球完整比分| www.567822.com-创富彩票网址| www.17350.com-陌陌彩票app| www.04183.com-网上还能买彩票吗| www.324944.com-欢乐彩票骗局| www.qp69.cc-彩票内部透码| www.689303.com-数字彩票分析师待遇| www.mk85.com-快乐彩介绍-| www.32ho.com-单双四肖58彩开奖| www.657204.com-福彩3d圣手字谜| www.816342.com-网络博彩被骗怎么办| www.996469.com-新新粤彩-| www.kq88.com-福彩农场-| www.829297.com-今曰羊城晚报时寸彩| www.955227.com-这么中彩票-| www.dr6.cc-彩票奖金对照表| www.k06.com-盛大彩票注册送38| www.fw2.cc-内蒙古快三遗漏号| www.pz06.cc-最新版ee彩下载| www.v66.net-摘彩网牛材网| www.54jv.com-沈阳福彩发行中心| www.787728.com-万彩吧彩票势图| www.986787.com-体育彩票是几位数字| www.ny56.com-天天彩票手机论坛| www.380655.com-江苏体彩大乐透论坛| www.495412.com-博彩精算-| www.586149.com-微彩注册地址| www.652810.com-梦见杀鸡见血彩票号| www.712588.com-盛兴彩票app下载| www.793608.com-彩票概率怎么算| www.870229.com-彩之云骗局-| www.925266.com-福彩天齐网-| www.972245.com-福彩三第开奖| www.aa8.cc-福利彩票河北快3| www.kl65.com-易彩堂彩票平台| www.837448.com-九亿彩票下载| www.905666.cc-yy彩票登录网页| www.s59.cc-青海体育彩票网| www.261387.com-官方彩票九九| www.80us.com-彩票网哪个网址最好| www.3781.cc-超级七星彩直播| www.586802.com-福利彩有多少个号| www.539393.com-时时彩有追杀模式吗| www.638132.com-上海体彩店地址| www.893611.com-手机下载双色球彩票| www.983818.com-众彩网专家杀号| www.167362.com-江苏快三一定牛| www.172313.com-江西多乐彩老走势图| www.566299.com-彩和放题-| www.tk21.com-河南福彩领奖| www.4800.vip-吉林快三的玩法| www.322858.com-免费彩票计划app| www.v74.cn-牛彩网彩摘网彩搜网| www.070.in-云彩彩票下载| www.687404.com-彩票站牛逼宣传语| www.12xb.com-完美彩票咋样| www.697.net-时时彩三星走势图| www.298862.com-内蒙快三今天推荐号| www.466378.com-乐彩网怎么挣钱| www.579714.com-博乐彩票网手机下载| www.660721.com-阿里彩票登录网址| www.755912.com-彩吧论坛众彩网| www.770.cm-玩彩的吗-| www.104041.com-竞彩篮球开奖公告| www.168591.com-快三投注-| www.560418.com-江苏体彩11-| www.693225.com-体彩双色在几频道| www.781377.com-幸运快三qq群骗局| www.910582.com-蓝光乐彩城二期| 双彩网www.627012.com| www.675150.com-足彩胜负彩中奖心得| www.751131.com-彩16.apk-| www.810117.com-赢彩网骗局-| www.872071.com-快三输了3000了| www.17836.cc-赢彩资讯app| www.020129.com-福利彩票总部| www.159977.com-鳄鱼彩票网官网| www.950572.com-5分彩计划网站| www.286988.com-吉林快三预测快赢网| www.480006.com-澳洲三分快三| www.960319.com-酷彩吧彩票合法吗| www.185569.com-大发快3彩票软件| www.711.me-足彩串关奖金计算表| www.7686.loan-汪彩骗人的-| www.681339.com-爱买彩票的男人| www.551140.com-重庆竞彩全天计划| www.712699.com-网赌一分快三技巧| www.862666.cc-江苏体彩网_| www.973556.com-123彩票开奖公告| www.fd18.com-百彩网手机资料|