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.69vk.com-体彩彩票app下载| www.552769.com-玩彩票有什么技巧| www.703770.com-分分中彩票官方网站| www.898839.com-兰州快彩票开奖| www.cx05.com-海南私彩规则| www.4161.biz-彩7网-| www.66344.cc-关于京东彩票| www.wg37.com-查询贵州快三遗漏| www.85398.cc-快三出豹子后出什么| www.4685.top-福彩app吧-| www.26136.cc-彩虹羽泉-| www.931826.com-中彩网贺老师| www.hf77.com-快三投注图表| www.n71.org-体票彩票开奖公告| www.7545.me-富人人彩票com| www.626288.cc-中国彩票都是假的| www.5905.me-晋中体彩中心| www.53860.com-多彩贵州航空招聘| www.048344.com-三毛第二版彩吧图库| www.548708.com-聚胜365彩票| www.682638.com-彩票店开微信| www.765901.com-北京快三有什么规律| www.835302.com-日本好彩好抽吗| www.911554.com-体彩家彩论坛| 大赢家彩票平台www.987931.com| www.81044.com-党员能买彩票吗| www.3977.cc-nba竞猜彩票| www.11638.com-福彩懂事长-| www.206656.com-五洲彩票-| www.101576.com-大发快三看走势图| www.858050.com-应该取消中国的彩票| www.586930.com-福彩3d南方正版| www.94ei.com-三d彩吧论坛首页| www.16789.com-美人鱼彩票app| www.543983.com-釉下彩餐具有毒吗| www.29np.com-延吉体育彩票| www.632621.com-七彩视界打不开了| www.76662.com-五k彩票网-| www.0689.top-福彩吧台-| www.554617.com-体彩基础知识教程| www.206096.com-韩国福彩快三| www.314097.com-东盛彩报5-| www.44iy.com-46彩下载-| www.5628.wang-快购彩三-| www.351992.com-网络彩票可以投资吗| www.558781.com-看到彩虹的象征意义| www.4713.net-易彩团队是真的吗| www.21223.cc-竞彩资讯网-| www.01600.com-米兜彩票下载| www.zj83.com-信彩彩票app下载| www.102578.com-福彩推荐号今日| www.sw04.com-中国福彩积分网| www.34sn.com-彩票彩票交款通| www.25tc.com-微信上的彩友是什么| www.912393.com-附近体彩实体店| www.923027.com-体育彩票的市场| www.984718.com-好彩123彩票| www.78172.com-直播体育彩票排列五| www.002.site-怎样分析彩票走势| www.258957.com-14场胜负彩对阵表| www.0xd.com-众乐快三-| www.6611.vip-500w彩票钟洁| www.02gw.com-世界杯体彩不让买了| www.12606.com-75秒时时彩-| www.82718.cc-足彩胜负19024| www.649446.com-授渔看彩杀号| www.779650.com-七乐彩网上购买| www.926007.com-福利彩票旗下| www.999963.com-江苏快三安卓版| www.sm62.cc-重庆时时彩豹子记录| www.09150.com-神兽竞彩团队微信号| www.47092.com-彩礼钱是给女方父母| www.219389.com-河南彩礼排行| www.331770.com-中彩网彩票开奖查询| www.469587.com-海南网络彩票诈骗| www.565506.com-王牌彩票网下载| www.233725.com-江苏e足彩玩法| www.231921.com-湖北快三规律| www.432432.com-红利系统彩票| www.540733.com-彩票作弊器真的假的| www.628011.com-体彩数字云平台| www.3720.vip-福彩三d大盘走势| www.00849.com-福彩网点-| www.45550.com-微彩网下载地址| www.698014.com-大发时时彩开奖网站| www.132663.com-开彩票店的风险| www.383780.com-山西福利彩票块3| www.160014.com-彩神争8ll网址| www.404480.com-素描彩铅画小白兔| www.lu75.com-时时彩开奖视频| www.155597.com-飞鱼彩票投注技巧| www.x15.live-买彩票输了六万| www.64664.cc-竞彩一些规律| www.697750.com-彩票大赢家网| www.6948.vip-七彩虹1660ti| www.41253.com-时时中彩票电脑版| www.246245.com-快三有多少种| www.306398.com-加彩票站微信买彩票| www.372508.com-无彩色-| www.467558.com-中国体彩足球竞猜网| www.42uf.com-怎样下载彩视| 福彩www.86267g.com| www.gy47.com-共享彩票gx992| www.00vp.com-彩票贪心必亏| www.075365.com-腾讯分分彩app| www.983648.com-幸运时彩-| www.899279.com-福利彩票5分钟开奖| www.976540.com-河南彩票报纸| www.s01.top-体彩世界杯彩票| www.118348.com-彩票旗舰网论坛| www.8159.top-足彩开奖规则| www.5722.shop-网络彩票诈骗举报| www.58739.cc-竞彩比分买法| www.040434.com-玩彩网平台-| www.802009.com-彩天堂属于什么平台| www.262967.com-彩票全网最准计划| www.839233.com-老虎彩票app下载| www.949597.com-福利彩票手机助手| www.999604.com-152彩下载-| www.cg33.com-大发快三代理返点| www.86127.cc-彩涂板厂家-| www.316007.com-上海竞彩店地址列表| www.757882.com-佰翔彩票怎么样| www.910699.com-中国足彩网官网软件| www.f18.com-国乐彩可靠么| www.87nv.com-黑彩11选5爆冷号| www.236635.com-体育彩票官网app| www.282316.com-福彩双色球图标| 500彩票www.582477.com| www.807705.com-棋牌捕鱼送彩金| www.903017.com-真实有效的彩票网站| www.959770.com-凤凰彩票c978| www.999704.com-128彩票兼职| www.kv8.com-安徽快三质合走势图| www.yr17.com-竞彩平负是什么意思| www.33qz.com-鱼彩票-| www.603802.com-最新足彩预测软件| www.17798.com-明彩足彩-| www.70628.com-一品堂彩票计划| www.019091.com-亿彩用户登录| www.903073.com-芭知彩-| www.988819.com-大发快三买法| www.kl.cc-皇都彩票入口| www.871493.com-旭彩文学网-| www.420392.com-玛雅吧彩票游戏首页| www.698096.com-下载凤凰彩票网| www.067298.com-3分快三计划| www.250698.com-306全民彩票| www.838883.com-9亿彩票官方网| www.904722.com-500彩票资讯网| www.203299.com-体彩排列5开奖号码| www.261711.com-足彩让球胜平负| www.333148.com-体育彩票基础知识| www.405559.com-七星彩选号顺口溜| www.383091.com-多赢彩票可信吗| www.913979.com-瑞彩祥云app网站| 博亿彩票www.663by.com| www.5566.me-马来彩是不是假的| www.127453.com-好运彩骗我了怎么办| www.8116.me-刷彩漏洞-| www.85yt.com-包头市福彩中心主任| www.93hw.com-下单送彩票-| www.6356.cc-彩票分析家手机版| www.280399.com-黑桃k时时彩官方|