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.702.com-做私彩代理-| www.597897.com-福满天体彩店| www.tm47.com-福彩加盟电话| www.939477.com-请问彩吧彩票合法吗| www.517788.com-今天福利彩票结果| www.66516.cc-宁夏自治区福彩中心| www.143733.com-体彩分析预测软件| www.331874.com-体彩屋注册邀请码| www.872445.com-遵义市彩票中心电话| www.989094.com-腾讯分分彩规则| www.dm22.com-省份快三有假吗| www.zg63.com-鑫彩网大发快3| www.39pr.com-七星彩内部信息| www.466.com-快三号码选择| www.4252.top-竟彩比分500| www.263272.com-河北快三预测软件| www.424150.com-三国星彩2p-| www.602882.com-彩虹六号直播在哪看| www.08000.cc-彩票中奖的梦境| www.045045.com-老谢说彩19019| www.166573.com-快三开奖结果湖北| www.734311.com-福彩生肖开奖表| www.55323.com-彩博888平台下载| www.un73.com-新2彩票app下载| www.874341.com-体彩七星彩中奖号码| www.cp9332.com-分分中彩app| www.r97.cn-江苏快三下期推荐号| www.5662.cc-重庆时时彩停吗| www.604075.com-关于对彩票的看法| www.962715.com-旺旺时时彩安卓| www.dj22.com-海南七星彩玩法规则| www.vy65.com-手机玩快三骗局| www.nm59.com-14场胜负彩中奖| 乐彩网www.lcw199.com| www.065819.com-赢彩彩票骗局| www.102424.com-二分彩是哪里的彩票| www.50jl.com-14场足彩胜平负| www.4239.loan-福彩好彩3开奖每注| www.688884.com-澳洲三分彩计划软件| www.350699.com-手机后彩膜批发| www.440329.com-彩票契诃夫-| www.250313.com-彩中彩网站-| www.5963.bid-酷彩彩票app下载| www.69241.com-幸运五分彩开奖记录| www.29321.cc-彩天下-自助服务厅| www.729018.com-福彩门户ok8us| www.524477.com-918彩票查询| www.664983.com-福彩35开j-| www.794566.com-微信没有彩票功能| www.883261.com-快彩合法吗-| www.963015.com-体彩绿翡翠9中奖率| www.cp067.com-江苏快三和值走势图| www.586731.com-微彩平台登录| www.747999.com-六六红彩app| www.10151.com-大乐透中彩网擂台赛| www.75418.com-800万彩票app| www.120048.com-足彩指数500| www.862278.com-k彩手机版下载安装| www.380644.com-超级体彩大乐透结果| www.501057.com-易彩云彩票邀请码| www.583346.com-2元彩票最高中奖多| www.655577.com-江苏快三推荐什么| www.731892.cc-历年河北彩票中奖| www.807566.com-男子守号8年中福彩| www.890432.com-幸运时时彩计划在线| www.964349.com-彩票怎么看才懂| 网易彩票www.560621.com| www.mr20.com-彩八苹果版下载| www.1fu.com-体彩排列五中后三位| www.698038.com-彩票篮球中奖规则| www.598348.com-休彩排列5开奖结果| www.06460.com-新浪网彩票开奖信息| www.15fv.com-腾讯时时彩游戏规则| www.536890.com-彩字五行中属什么| www.621193.com-什么彩一分钟开一次| www.770481.com-黑彩庄家跑路| www.872320.com-贵阳市体育彩票中心| www.948086.com-t体彩排列三| www.cp9308.com-河北快三一定牛遗漏| www.yv29.com-众赢团队彩票| www.491134.com-中国彩网开奖结果| www.221234.com-助赢彩票计划| www.306656.com-吉祥彩票主页| www.388009.com-腾讯分分彩后二组选| www.505255.com-职业黑彩玩家| www.82he.com-江西体彩有哪些| www.01051.com-体彩触屏版-| www.299923.com-彩票走势怎么看| www.401778.com-竞彩足球计算机器| www.530556.com-时时彩输死人了| www.642878.com-特彩吧高手网499| www.732561.com-大彩网官网-| www.14hb.com-上海彩经网快三开桨| www.495404.com-立白彩漂去黄怎么样| www.916822.com-彩票天下233| www.271639.com-500彩票极速快3| www.387566.com-手机贴汽车彩膜| www.556660.com-黑彩怎么做庄| www.616015.com-彩票伪造头奖| www.984673.com-彩票模拟器开发| www.ff21.com-福利彩票5分钟一期| www.c08.top-福彩三d晚秋和值| www.xk6.com-深圳福彩网-| www.879752.com-福彩行业-| www.91uj.com-网上彩票代玩兼职| www.967246.com-重庆时彩胆拖玩法| 500万彩票www.599581.com| www.743422.com-吉利快三下载| www.625775.com-快8彩票官网下载| www.697532.com-七星彩规则及奖金| www.792381.com-晒彩票要遮住哪里| www.862996.com-更多精彩皮肤打字| www.928869.com-安装劬力七星彩桌面| www.977877.com-彩色纸箱包装印刷| www.cai34.cc-北京快三推荐号码| www.5gw.com-福甘肃快三彩开奖| www.299046.com-福彩快三在哪下载| www.387506.com-下彩触屏版足球彩票| www.544515.com-彩票就是买不中| www.604135.com-都皇彩票app| www.663239.com-中国竞彩首页网| www.720079.com-新浪彩票机选一注| www.780636.com-福体彩票开奖号| www.838991.com-有人靠玩彩上岸吗| www.898021.com-福利彩票促销语| www.954422.com-彩28彩票注册| www.997132.com-百度彩票重庆时时彩| www.uk5.com-甘肃福彩3d查约| www.rj99.com-500彩票网3g版| www.111288.com-易彩快三破解版| www.886786.com-大大彩票可靠吗| www.34949.com-澳门意大利彩金项链| www.9769.cm-福利彩票缴款通| www.115789.com-新婚姻法彩礼新规定| www.47jz.com-东方彩票开奖网| www.7029.biz-竞彩篮球玩法说明| 阿里彩票www.al9888.com| www.963845.com-福彩大家乐规则| www.qs65.com-千亿团队彩票| www.618815.com-青岛福彩兑奖地址| www.397410.com-足球彩票彩客网| www.813647.com-多赢在线彩票手机版| www.912708.com-六壬与奇门测彩| www.988674.com-期期中彩票合法吗| www.hx90.cc-大运彩票平台| www.890190.com-cba有体彩吗| www.ym20.com-快三属于福彩吗| www.007840.com-七星彩票开奖号| www.130056.com-中华福彩网-| www.230616.com-彩八彩票会坑人吗| www.318174.com-彩票大厅360| www.817926.com-胜负彩19031| www.011.cm-陕西福彩快十分开奖| www.791574.com-中国福利彩票咋查| www.725.red-分分彩后2公式| www.761262.com-快三辅助软件骗局| www.ov97.com-虚拟足球e球彩规律| www.836.date-重庆五分彩开奖号| www.306025.com-好想中彩票-| www.x41.net-今晚福彩票中奖现场| www.822456.com-被爱博彩票套路| www.982768.com-cc彩票下载-| www.op83.com-河北体彩快三| www.875595.com-恒大时时彩是真的吗|