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.87300.com-信达国际彩票| www.966953.com-手机何时能投注彩票| www.cv68.com-彩神通金码-| www.p69.org-福彩3d彩500| www.631937.com-七彩云南赞美词| www.1553.pw-福彩7位数中奖规则| www.419483.com-印象彩-| www.41777.com-中国彩吧网下载| www.9932.cm-七乐彩好中奖吗| www.66561.cc-1980时时彩官网| www.981684.com-世界杯彩票最大奖| www.4541.cm-八马彩票极速赛车| www.949533.com-快三甘肃开奖| 彩神购彩www.csgc3.com| 火星彩票www.hx6695.com| www.cai4622.com1分快三今日走势图| www.684659.com-查福彩3d中奖| www.777780.com-彩票彩吧app| www.894896.com-超级大乐透彩票投注| www.964212.com-彩票加倍买可以中吗| 大赢家彩票平台www.220892.com| www.92qe.com-八百万彩票下载| www.48fs.com-七星彩尾号走势图| www.cp3800.com-一分快三计划群| www.nh57.com-福彩3的开奖号结果| www.122477.com-时时中彩票平台| www.6216.com-快三摇奖程序开发| www.23461.com-7728彩票骗局| www.579512.com-新体彩号码-| www.654865.com-福星七星彩开奖| www.727575.com-合买中心一鑫鼎彩票| www.803545.com-凤凰彩票用户登录| www.907058.com-玩e彩堂犯法吗| www.978473.com-中国福彩选号助手| www.oy4.com-七星彩下期预测| www.640115.com-新浪爱彩无法提现| www.59797.cc-网上买彩票输了| www.169480.com-网上的快三是真的吗| www.373803.com-什么是智投彩票| www.529783.com-斗鱼直播彩票| www.610532.com-阿彩凤凰错替嫁弃妃| www.680110.com-兴盈快三是假的| www.758862.com-微信群彩票平台代理| www.999936.cc-彩民村大发时时彩| www.zw20.com-体彩可以手机投注吗| www.36on.com-全民彩票官网登陆| www.0080.wang-彩票的彩彩经网| www.355856.com-游客在日本中了彩票| www.465007.com-易经买彩票-| www.582666.com-足彩4场进球彩预测| www.659568.com-刮刮彩票透视镜| www.736817.com-上海市福利彩| www.811875.com-新昌县彩烟乡下宅| www.538874.com-竞彩足球混合过关| www.650629.com-户外彩虹伞教案| www.913810.com-台湾大福彩开奖号码| www.977971.com-快三怎么买能赚到钱| www.cf36.com-大发快三网址多少呀| www.xj12.cc-采票开奖查询彩票| www.32iq.com-87彩票金钱豹| www.973874.com-买彩票倍投什么意思| www.jq0.com-福彩快三遗漏| www.097933.com-关注中彩股份| www.168938.com-内蒙古快三343| www.302209.com-天天中彩网靠谱码| www.242113.cc-2元彩票怎样下载| www.23385.cc-时时彩五星胆码计划| www.7969.vip-bbin博彩-| www.56997.com-福利彩票有什么技巧| www.285812.com-香港体彩开奖结果| www.53273.com-彩虹emoji表情| www.ny06.com-彩票怎么选-| www.03hv.com-广州体彩网点申请| www.91hi.cc-首彩红酒-| www.2917.biz-体彩店装修效要求| www.7842.vip-职业彩票人-| www.73he.com-彩票5星是什么意思| www.1580.org-最贵的彩票收藏| www.35209.com-快购彩票网会员中心| www.85454.com-福彩双色球胆拖表| www.090591.com-彩票店上班工资高吗| www.064896.com-海南私彩打击庄家| www.183196.com-手机买彩票软件| www.254795.com-重庆实时彩开奖结果| www.345254.com-体彩排列三遗漏| www.419413.com-必发彩票是不是黑彩| www.516918.com-色彩花-| www.114013.com-湖兆快三预测三同号| www.3595.cc-彩吧论坛手机版| www.08060.cc-佳木斯彩票大奖得主| www.57639.cc-赚钱彩票10元充值| www.860554.com-福利彩票奖金二等奖| www.bj10.com-黑客黑入彩票平台| www.13.biz-山东快三怎样开奖| www.794563.com-彩种能玩吗-| www.875323.com-微彩票下载安装| www.964125.com-福彩3d最准规律| 500彩票www.924377.com| www.14791.com-浙江体彩顶呱刮| www.133666.cc-好彩高手论-| www.52988.cc-天下幸运彩图百度云| www.888.link-彩票公式-| www.5924.win-大中华彩票投注| www.29099.cc-福才3第今日福彩| www.88441.com-英国体彩网站| www.059225.com-福彩快三计算软件| www.153312.com-彩票中奖那几个数字| www.cai1822.com宁夏快三在线开奖| www.vt76.com-湖南彩民论坛| www.23cp.com-体彩任九开奖时间| www.6363.bid-酒泉福彩中心| www.6kc.com-容易赚钱的彩票网站| www.19215.cc-体育彩票等奖分别| www.71379.com-上海足彩-| www.152408.com-彩票一分快三计划| www.44nt.com-彩掌柜彩票安全吗| www.844246.com-中福彩机构组成| www.220469.com-南方双彩网-| www.534142.com-砺儿7乐彩推荐号码| www.619686.com-彩票书-| 云中彩www.400322.com| www.7883.cc-高频彩票助手软件| www.51379.com-hk香港百彩网站| www.025550.com-电脑内蒙快三| www.113470.com-手机微信如何买彩票| www.209259.com-快三如何能稳赚不赔| www.05399.com-每天都买彩票| www.104.me-彩票中奖后兑奖流程| www.57al.com-市福利彩票加盟电话| www.4890.vip-新手如何玩足彩| www.17116.cc-竞彩比赛延期怎么算| www.185217.com-关于别人带着玩快三| www.164598.com-乐优彩票合法吗| www.637267.com-彩虹桥图片-| www.07242.com-安徽快三和值统计| www.138897.com-吉林快三怎么打胆拖| www.287913.com-彩票合买平台| www.4838.vip-e乐彩注册-| 福彩www.16878e.com| www.z99.com-天天爱彩飘-| www.907.me-谁有彩票33软件| www.131334.com-四川各地彩礼价目表| www.479402.com-竟彩足球比分直| www.610257.com-体育彩票管理体制| www.000104.com-江苏快三的计算方法| www.077090.com-新彩网字谜-| www.162058.com-天天福彩彩-| www.cai39.cc-快3彩票官网| www.e94.com-七星彩彩开奖时间表| www.019879.com-大发彩票时时彩| www.103972.com-体彩6加1中奖规则| www.67qw.com-化妆品彩妆全套套装| www.2273.vip-bb梯子彩票规则| www.8293.xyz-彩票输了二十万| www.057274.com-福利彩报-| www.226828.com-快三游戏改革| www.301418.com-青海快三规律| www.365023.com-广西快三全天共几期| www.977898.com-彩色纸箱印刷| www.cp229.com-兰州快三走势一定牛| www.137596.com-彩票66官方网站| www.238390.com-快三自己-| www.534240.com-易中彩网站-| www.648871.com-天天彩票苹果版下载|