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.170857.com-长春快三怎么玩| www.2981.com-福利彩票315| www.839092.com-时时彩计划个位大小| www.301173.com-南方双彩旧版| www.365366.cc-3d精彩十分-| www.507768.com-天马彩票平台怎么样| www.543643.com-乐彩网3d论坛陈华| www.622907.com-全讯彩票官网| www.692826.com-体彩天齐网字图谜| www.780228.com-重庆时时彩时间结果| www.737588.com-三d彩报金老鼠| www.182953.com-宁夏快三49期| www.126843.com-中国体育彩票排列3| www.562.in-彩票店微信售卖| www.9102.vip-水溶彩铅画动漫人物| www.61293.cc-彩票一分快三走势图| 大赢家彩票www.598061.com| www.067946.com-多赢吉林快三计划| www.258712.com-365足彩网-| www.817682.com-3d彩民之家开机号| www.902375.com-南国报彩票版| www.ne01.cc-手机彩票软件排行| www.73.cc-唤醒幻想吧全彩福利| www.620336.com-淘之家彩票预测网| www.654450.com-时时彩五星独胆软件| www.0111.website彩色是颜色词语吗| www.155761.com-彩票倍数-| www.984234.com-彩店宝彩票靠谱吗| www.369861.com-体彩排列五走势综合| www.466044.com-5d彩超多少钱一次| www.551232.com-足彩代理违法吗| www.624215.com-福彩3d速查表大图| www.703898.cc-爱彩乐e球彩| www.734538.com-凤彩的意思-| www.810192.com-3d丹东全图好彩网| www.884048.com-杏彩登入-| www.954507.com-彩宝彩票下载苹果| 创世纪彩票www.36787b.com| www.291662.com-内蒙古福彩双色球| www.091298.com-22彩票ios-| www.07rv.com-筒井彩芽生日| www.805398.com-中国福利彩票推荐号| www.531380.com-彩铅古风绘画| www.609054.com-体彩卖到几点开门| www.686994.com-中彩那天微型课视频| www.770360.com-体育彩票3排5排| www.mn21.com-时时彩四星走势图| www.10lj.com-七星彩专家彩宝贝| www.019.com-苏宁彩票加盟| www.3940.in-全国彩礼地图| www.119071.com-百盈快三网址多少| www.271877.com-五省五省快三走势图| www.481607.com-福彩主任被抓新闻| www.444036.com-心脏彩超sv低| www.345037.com-中国体彩网点| www.540940.com-香港快三是福彩的吗| www.682853.com-有没有合法彩票软件| www.7608.top-新浪爱彩是啥平台| www.237846.com-大发快三如何推广| www.365306.cc-北京体彩销售站点| www.672013.com-梦见中彩票-| www.10166.cc-手机竞彩网-| www.25891.cc-彩虹周杰伦mp3| www.co08.com-幸运快三彩票怎么玩| www.0336.com-齐鲁风彩大乐透| www.957734.com-和乐彩票怎么样| www.92697.com-怎么找竞彩客户端| www.065926.com-彩虹六号围攻| www.778320.com-彩贝壳客服电话| www.94744.com-中国彩票销售额排名| www.572796.com-华宇app买彩票| www.700079.com-两分快三app| www.791453.com-中超彩票哪里买| www.866105.com-腾讯5分彩票官网| www.927733.com-极速快三直播| www.981148.com-七彩冰淇淋粉| www.007004.com-腾讯qq彩票合法吗| www.680345.com-爱中彩票官方开奖| www.768140.com-福彩好还是体彩好| www.848911.com-老时时彩开奖宝典| www.341553.com-诺亚彩票手机下载| www.0714.date-百万帝国彩票| www.724022.com-内蒙古彩快三走势图| www.83448.com-竞彩让平有哪些特点| www.930874.com-奇门测彩取消法| www.459087.com-盛世彩票官网地址| www.62830.com-158彩票在线| www.360198.com-七星彩手机直播现场| www.501835.com-k彩一彩原始邀请码| www.xc86.com-分分钟彩票软件| www.423.cm-最全面的彩票网站| www.348787.com-淘之家大发快三| www.132946.com-福建体彩票36选7| www.674674.com-财政部互联网彩票| www.810522.com-盈彩彩票钱提不出来| www.499088.com-分分彩如何玩定位胆| www.fz57.com-导师彩票带赚| www.11646.com-彩乐乐网站倒闭了吗| www.720079.com-新浪彩票机选一注| www.785505.com-xr有原彩显示吗| www.845556.com-福彩胆是什么意思| www.897993.com-彩票合买口号| www.953622.com-马来西亚的彩票| 818合彩www.www.9889hc.com| www.642388.com-福彩总汇图-| www.835918.com-广东彩王图-| www.909708.com-3d今天2鱼玩彩| www.628948.com-体育彩票可信度高吗| www.02438.com-安卓彩票-| www.4112.xyz-彩虹六号苹果版| www.692023.com-时时彩平台出售价格| www.061322.com-怎么注册彩票账号| www.3838.space-足球36o胜负彩| www.dw84.cc-福彩网app邀请码| www.586857.com-足球彩票怎么算钱| www.491570.com-黑彩平台哪个可靠| www.565399.com-福彩3d怪字怪帖| www.632482.com-七星彩下期出什么奖| www.9957.cc-仲博彩票登录平台| www.61916.cc-领航彩下载-| www.018948.com-福彩三地试机号预测| www.uh79.com-贵州快三玩法规则| www.8eg.com-计算机推算彩票| 凤凰彩票www.5091e.com| www.gn79.com-河南快三智慧彩| www.d56.cc-ai足彩-| www.43bs.com-重庆试试彩走势| www.7eg.cc-中国红五元彩票| www.318057.com-福彩试机号金码今天| www.626006.com-彩票网购买-| www.709270.com-分分彩改号-| www.781237.com-微彩站安卓-| www.855385.com-七星彩能买复式的吗| www.918871.com-有多少人玩大地彩票| 体彩网www.aa3890.com| www.mk14.com-体育竞彩足球app| www.139535.com-盈彩五分快三| www.269739.com-彩票k3网址是什么| www.343305.com-网上购买福利彩票| www.409010.com-体彩快乐扑克奖金| www.555601.com-乐彩网最新开奖公告| www.370976.com-什么是新彩-| www.747372.com-安徽快三今日开奖号| www.462673.com-福彩3d一品香今晚| www.592672.com-彩虹无人机公司待遇| www.663223.com-足彩赔率分析| www.731423.com-上海体彩网首页| www.325228.com-3d字迷体彩开奖| www.447772.com-龙江福彩下载安装| www.525392.com-百事彩票-| www.621987.com-运彩网下载-| www.671586.com-重庆时时彩追杀吗| www.750705.com-第一盛兴彩票| www.8310.top-重庆新时时彩走势图| www.069744.com-双彩论坛字迷区| www.139366.com-如意彩票网登录| www.203334.com-彩神3app-| www.262018.com-皇都彩票一用户登录| www.913366.com-58彩票网址-| www.964427.com-下载快乐彩票| 玩彩网www.77wcw.com| www.025337.com-丽水黑彩-| www.586835.com-上海竞彩足球店| www.678182.com-福彩预测形态|