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.372027.com-七彩色饺子图片大全| www.712678.com-秒速时时采彩走势图| www.17609.com-彩票免费送彩金群| www.307379.com-爱彩乐官方版下载| www.22147.com-黑彩票不能提款| www.549958.com-彩票e站-| www.700812.com-福彩通网址-| www.828872.com-盛大彩票平台怎么样| www.960214.com-代玩彩票领佣金| www.nm26.com-七星彩随机选号器| www.22uo.com-易算时时彩手机版| www.6377.in-彩票六等奖-| www.464693.com-仁信彩票骗局揭秘| www.557389.com-福彩三d林涛和值谜| www.631275.com-彩票代购平台的优质| www.701869.com-唯彩看球网站| www.783600.com-三d彩吧论坛| www.857656.com-福彩双色球结果今天| www.931216.com-百度福彩网-| www.983238.com-福利彩票双色球领奖| www.fw8.com-彩票万能公式| www.px72.com-新彩彩票下载| www.007422.com-k彩官网-| www.33988.com-福彩3d精准计划| www.300875.com-七乐彩预测推荐号码| www.388380.com-鑫盛彩票-| www.507688.com-全球彩票可靠吗| www.578146.com-彩票一宝贝预倾| www.659469.com-澳彩胜负开奖结果| www.365102.com-分分彩k线-| www.512098.com-幼儿彩铅画简单图片| www.603855.com-中彩网彩票分析师| www.771112.com-盛大乐彩app| www.885852.com-内蒙古体彩彩app| www.09722.com-天天彩票网手机版| www.163583.com-聚财网彩票-| www.345345.com-数字与彩票-| www.151.me-哭着叫彩虹歌| www.7677.cm-体彩彩票代码字母| www.064382.com-足彩竞彩500万| www.175706.com-大发快三彩票走势图| www.291932.com-重庆快三最新骗局| www.372058.com-诚信快捷体彩实体店| www.k82.shop-彩票平刷赚钱| www.57ms.com-cy888彩网-| www.0090.xyz-福利彩票之地开始| www.636561.com-彩虹六号小车原型| www.ig23.com-彩票站现状及前景| www.221072.com-体彩开奖开结果| www.79302.com-体彩线上远程培训| www.039092.com-爱投彩票合法吗| www.138883.com-竞彩实体店开售时间| www.74al.com-私彩拉人犯法么| www.4355.cc-天水福利彩票中心| www.28110.com-家彩网双色球开机号| www.562035.com-博胜彩票网投领导者| www.729278.com-福彩两天计划| www.969473.com-欢乐彩软件-| www.sh00.com-彩神8app下载| www.8581.me-彩票网易专家杀号| www.35227.cc-七天彩掌上购彩官网| www.81126.cc-排列五是福利彩票吗| www.713771.com-彩票尺寸多大| www.246936.com-中彩堂开奖记录| www.370508.com-彩票平台哪里有出租| www.470455.com-博彩和体彩区别| www.588819.com-彩77下载不了| www.21815.cc-首充送彩金彩票平台| www.046905.com-3号彩票送彩金| www.0876.date-0008博彩论坛| www.117002.com-彩票倍数怎么投| www.861014.com-爱乐透购彩官方版| www.4455.date-彩薇花毁容-| www.6623.cm-下带038彩票| www.30648.com-新浪爱彩双色走势图| www.520768.com-体彩绝杀六码| www.595502.com-虎扑蓝彩-| www.54vm.com-七星彩吧论坛| www.2047.tv-画里彩虹emoji| www.847038.com-山东体彩app注册| www.919792.com-手机彩票平台源码| www.974070.com-吉林新快三开奘结果| www.cai8383.com极速快三最大的漏洞| www.rq48.com-官方彩是什么意思| www.353789.com-q彩网址-| www.410619.com-老盘任九唯彩会官网| www.072387.com-福彩3d论坛静态板| www.518941.com-江苏不匠彩快3| www.612594.com-重庆福彩手机版下载| www.717896.com-87彩店竞彩下载| www.802407.com-竞彩总进球数规律| www.896894.com-双彩开奖走势图今晚| www.978718.com-老版好彩客安卓版| www.bd93.com-内蒙古体彩兑奖地址| www.x52.cc-彩票交流群是真的吗| www.263.org-国际彩票娱乐| www.5908.cn-彩礼都给谁了| www.21973.cc-约彩365骗人| www.592991.com-彩虹六号手游安卓版| www.301505.com-中彩网首页开奖公告| www.73459.com-大众彩票app安卓| www.59986.cc-香港彩圣网免费资料| www.860827.com-快彩怎么玩容易中奖| www.937813.com-福彩信彩网论坛| 乐彩网www.4189d.com| www.251266.com-彩之家官方下载| www.990751.com-好彩票软件| www.wo75.com-2345彩票网软件| www.225380.com-英国时时彩官方开奖| www.474477.com-彩票计划导师能信吗| www.588084.com-体彩图谜5188| www.355942.com-彩票网源码下载| www.210321.com-幸运彩票下载| www.806265.com-559彩票-| www.938958.com-澳客彩票正规吗| www.998862.com-彩乐汇官方下载| www.73fl.cc-福彩3d无错断组| www.1527.win-体彩7位数复式投注| www.050050.cc-最新体彩开奖结果| www.152533.com-福彩三地天天彩报| www.16dl.com-万豪彩票助手怎么样| www.382037.com-彩票解密术-| www.531379.com-彩票万能公式方程| www.612122.com-m5彩票app-| www.711205.com-福利彩票预算| www.801851.com-福彩3d大花猫今天| www.883766.com-黑彩快三应该咋玩| www.985661.com-933彩票官方版| www.az83.com-快三平台骗局| www.7990.top-托班彩虹伞-| www.572358.com-好彩网牛网-| www.161770.com-美国快开彩票| www.996.link-七星彩中奖怎么扣税| www.12sl.com-篮球外围彩票网站| www.765484.com-七星彩彩版湛江加急| www.871641.com-利彩一分快三稳定性| www.986888.com-全天时时彩计划数据| www.br62.com-幸运快三投注规律| www.17.me-大彩鲸网页版| www.984.biz-七星彩彩票长局奖表| www.664.in-一代彩神专家专栏| www.717952.com-彩虹色-| www.09zi.com-体彩封机时间| www.0763.xyz-官网彩票开奖下载| www.rc40.com-香港体彩走势图| www.07bk.com-体彩竞彩返奖率| 计划软件-好彩堂跑狗马会现场| www.1870.la-q彩98邀请码| www.400581.com-最新七星彩试机号| www.602893.com-彩虹六号过审失败| www.800007.com-上海彩票有哪些| 500万彩票www.5441s.com| www.21665.cc-有彩票店的微信号码| www.647398.cc-14场足彩贴吧| www.tc51.cc-好听点的彩票昵称| 亿彩网www.793093.com| www.e01.pw-足彩中几个亿会吗| www.26bw.com-福彩八仙过海| www.532893.com-澳门快5彩是什么| www.666527.com-九州彩票提现不到账| www.751625.com-瑞彩祥云作弊器| www.830361.com-查彩票用什么软件| www.299575.com-凤凰vip快三下载| www.371342.com-红旗彩票北京快三|