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.1500.site-内蒙体彩中心在哪里| www.941828.com-时时彩网站代理| www.cai3711.com快三赚钱技巧| www.u93.cc-香港乐和彩518| www.34725.com-福彩三d彩经| www.021015.com-湖南省福彩中心| www.981113.com-99彩吧-| www.397034.com-神圣彩票骗人吗| www.136879.com-彩788苹果下载| www.854396.com-新彩吧福彩三d| www.969247.com-福彩3d中奖计巧| www.cp2043.com-uu快三真人摇骰子| www.wm60.com-湖北快三推荐号连号| www.097301.com-网上时彩真的假的| www.764504.com-讯盈彩票app| www.t59.club-武汉市彩票兑奖中心| www.625831.com-免费的彩票销售平台| www.2255.cc-彩票中奖有预感吗| www.551447.com-福彩苹果版-| www.9216.cc-航天彩虹千股千评| www.xw4.cc-乐彩大发快三| www.569152.com-天天存款送礼金彩票| www.862308.cc-3d乐彩网开奖号码| www.954929.com-黑客买彩-| 500彩票www.52072b.com| www.386793.com-彩票投注网站| www.30bo.com-海南彩票梦兆查询| www.609377.com-九九集团时时彩| www.738485.com-七天彩掌上购彩官网| www.888688.cc-彩站宝出票流程| www.740064.com-安徽快三快赢网预测| www.71gd.com-恒彩地址-| www.592225.com-彩票模拟摇奖器| www.751920.com-体育彩票网址| www.906665.com-山东体彩扑克3查询| 天玺彩票www.382780.com| www.801913.com-奔驰彩下载-| www.885183.com-中兴彩票网站| www.972777.com-彩虹六号骚话王| www.cp0.com-分分快三计划免费版| www.581625.com-yy彩票登录网页版| www.746022.com-彩票复试奖金计算器| www.ae92.com-6491彩票资料| www.6392.xyz-丹麦快乐彩app| www.1259.hk-四川体彩金7七乐| www.526.cm-在微信上遇到彩托| www.119549.com-快三个位计算公式| www.736418.com-双彩图3g-| www.840639.com-彩票销售现状| www.922883.com-中国福彩电话| www.981809.com-大发彩票是违法的吗| www.bh71.com-易彩票-| www.tz01.com-彩票123安卓下载| www.9wv.com-体彩大乐透微博| www.73bk.com-体彩排列3d断组| www.xc30.com-360七星彩冷热号| www.54lx.com-四川省福彩官网| www.32771.cc-彩票三d和尾图| www.329356.com-七乐彩预测杀号汇总| www.397949.com-七星彩那几天有| www.501608.com-坚持买同一注彩票| www.563605.com-q彩注册邀请码8位| www.623461.com-彩48彩票官网| www.684931.com-500竞彩直播比分| www.40ap.com-7星彩近200期| www.gw25.com-体彩直播-| www.28at.com-福利彩票注册账号| www.of73.com-彩猫骗局-| www.287024.com-彩之家快3邀请码| www.3345.pw-类似彩神国际| www.1526.cc-通辽福彩中心地址| www.083858.com-女孩玩彩票是下套么| www.367908.com-刚力彩芽新剧| www.714274.com-中国足彩馆免费视频| www.308199.com-湖南竞彩快三查询| www.jt83.com-彩铅入门画图片| www.287706.com-宝发彩票-| www.360466.com-彩票送体验金论坛| www.bm14.com-凤凰彩下载-| www.383085.com-中国体育彩票竞| www.40633.com-手机打彩票有法律吗| www.237731.com-河北快三奖金对照表| www.323658.com-体彩金7乐走势图| www.384322.com-沈阳体育彩票中心| www.546162.com-香港赛马排位及派彩| www.868325.com-七星彩大中小走势图| www.78tn.com-中国彩吧安卓下载| www.029604.com-利彩彩票手机app| www.53wh.com-盈彩吧双色球预测| www.269003.com-6348彩票-| www.582008.com-悟空彩票注册安全吗| www.715433.com-腾讯分分彩后二教学| www.181181.cc-今日中彩下载| E彩堂www.9818l.cc| www.0109.top-猜冠军彩票的玩法| www.496800.com-900彩票骗局| www.093770.com-天天中彩票靠谱吗| www.389796.com-珠海彩票店转让| www.01ia.com-彩虹是怎样形成的的| www.205515.com-快三开奖走势图| www.281058.com-江西时时彩开彩结果| www.43lc.com-五福彩彩票正规吗| www.110151.com-彩票快乐十分走势图| www.322266.com-《直播海南》七星彩| www.394655.com-彩虹世界gv图解| www.19515.cc-腾讯时时彩计划| www.141645.com-深圳福彩3d论坛| www.952180.com-cc分分彩开奖| www.782799.com-云南十一选五爱彩乐| www.879277.com-金彩平台app| www.964023.com-彩虹的象征意义| www.ci19.com-彩票网站源码| www.089894.com-大发彩票是假的吗| www.977245.com-濮阳彩礼限制| www.ls08.com-老时时彩走势图列表| www.218260.com-广西十分彩开奖结果| www.289736.com-彩票黑平台名单| www.8375.top-旺角彩皇免费资料| www.31884.com-易彩快3预测| www.69421.com-玩乐彩-| www.026574.com-伟德体彩app| www.091786.com-135彩票app-| www.333513.com-万能彩票公式| www.441958.com-体彩押金退还流程| www.207696.com-快三软件链接| www.232628.com-彩票号码预测| www.803539.com-体彩61开奖时间| www.382078.com-彩票平推是什么| www.658444.com-数字三彩神通免费版| www.599226.com-欢乐彩软件下载| www.767949.com-彩票资讯246| www.875942.com-财神5分彩开奖结果| www.969506.com-重庆时时彩易算| www.a32.xyz-168彩票官方极速| www.960189.com-福彩兑奖时间| www.cai918.com-内蒙快三开奖走势图| www.yd39.com-双色球派彩每日推荐| www.16yi.com-福彩内部-| www.618293.com-体彩的公益活动| www.mk00.com-吉林福彩网快3| 网易彩票www.191061.com| www.544590.com-彩票推算软件| www.845.in-福彩家彩论坛| 彩票坊www.022q.cc| www.83yp.com-体彩分类-| www.lc08.cc-多多彩票app下载| www.6577.com-彩民彩票百度百科| www.kz50.com-好运来彩票官方| www.a90.org-私彩平台漏洞刷钱| www.20bh.com-江苏快三稳赢攻略| www.82mo.com-河北快三50期| www.1626.in-福彩3d试机号开奖| www.028162.com-彩票端app-| www.961642.com-众彩极速赛车| www.261610.com-六开彩-| www.817.online-足球胜负彩澳彩网| www.116734.com-买彩票几点开门| www.115107.com-三d彩神通预测| www.383952.com-周六彩票-| www.776991.com-锋彩直播添加频道| www.834807.com-好彩四色爆珠多少钱| www.984124.com-山东福彩网官方首页| www.in31.com-105彩票软件| www.o25.club-豪彩vipapp-|