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.796480.com-天天乐购彩票有吗| www.381495.com-今天有什么彩票开奖| www.163123.com-福彩定胆杀号| www.276208.com-七星彩复式投8| www.198139.com-1分快三骗局| www.881294.com-博彩app运营| www.390705.com-怎样注册彩票帐号| www.307939.com-派彩网二维码| www.395664.com-彩民社区55887| www.3639.cm-湖北快三机选| www.16795.cc-瑞彩祥云幸运快3群| www.4590.org-现在彩票还能买吗| www.19820.com-手机制作彩票app| www.61520.cc-多米彩票官网| www.663771.com-百度号彩票登录网址| www.420921.com-爱乐透彩票下载安装| www.538120.com-99福彩怎么样| www.260857.com-猜谜彩票-| www.9028.top-nba总冠军彩票| www.755055.com-茶光福彩网点| www.288543.com-足彩8串1技巧| www.7001.vip-大玩家彩票官方网站| www.55420.com-彩博888网址| www.019421.com-贵阳市体彩中心| www.105657.com-迪尼斯彩票-| www.367892.com-星空蓝鲸彩铅画| www.516398.com-即时开彩安卓版下载| www.613203.com-宁夏福彩管理中心| www.705661.com-网易彩票有人中奖吗| www.99pk.com-彩票看走势技巧| www.222482.com-彩票注册送28元| www.339611.com-买彩票输钱的案件| www.26et.com-杨哥说彩双色球今天| www.2941.live-体彩店效果图| www.55434.com-彩博888平台合法| www.025926.com-8号彩票兼职| www.53cj.com-95彩票网页版| www.622312.com-福彩3d天机壁码| www.161097.com-pk彩票骗局-| www.96366.cc-台湾彩票返奖率| www.15181.com-嘉兴彩票店-| www.88476.cc-彩518app-| www.062684.com-大发优信彩票| www.081111.cc-买彩票念什么咒语| www.210452.com-大发快三可以玩吗| www.ro2.com-福彩好运2-| www.2xo.cc-完美彩票网托| www.820848.com-七星彩新浪爱彩| www.6188.name-博乐彩票是不是假的| www.634954.com-时时彩怎样才能稳赚| www.513109.com-好彩烟出口版| www.69gp.com-网络彩票销售公司| 云博彩票www.882186.com| www.5110.xyz-增城福利彩票| www.jb47.com-中国足彩网赛事中心| www.7654.cm-七星彩中三位多少钱| www.620921.com-黑马时时彩人工计划| www.71621.com-3d天天彩吧-| www.084585.com-掌上赢彩下载| www.147881.com-快三组合走势| www.222343.com-快三人工计划软件| www.307128.com-彩票几点不买双色球| www.388997.com-腾讯2分彩开奖记录| www.498228.com-3d777福彩-| www.8934.shop-中国福利彩票93期| www.586609.com-送28彩金棋牌| www.750447.com-豪彩v1p-| www.6796.xyz-福利彩票开奖彩票| www.ex94.com-uu快三精准计划| www.xz55.com-韩国彩票怎么买| www.83sh.com-彩票中奖几位数| www.30092.com-大连体彩中心怎么走| www.710203.com-彩彩大咖直播| www.823007.com-福彩怎么兑奖流程| www.893310.com-彩票大师最新官网| www.959429.com-官崎彩-| 91彩票www.9155d.cc| www.184428.com-湖北体彩11选5| www.037748.com-免费七乐彩缩水软件| www.766616.com-至尊彩快3-| www.838354.com-澳彩欧赔分析技巧| www.901851.com-今天彩票-| www.960090.com-赠彩金的app| 凤凰彩票www.5091f.com| www.866556.com-昨天的福利彩票| www.548185.com-网购彩票哪个软件好| www.137368.com-七星彩电脑在线选号| www.54yh.com-红河州彩票中心电话| www.131438.com-彩票未领奖2018| www.089188.com-七星彩开奖第48期| www.279847.com-分分彩算法破解| www.30440.com-大连四星彩票店| www.494282.com-3d福彩太湖图库| www.598029.com-彩票投注怎么样| www.684908.com-3d字谜画谜新彩吧| www.769876.com-好彩18036-| www.838245.com-海南彩票七星彩开奖| www.909368.com-彩吧图谜第三版| www.995899.com-足彩竞彩平台| www.gf51.com-湖北彩票官方网| www.wj03.com-福彩快三在哪下载| www.3125.cm-体彩排列五怎么玩| www.011694.com-福彩中心放假吗| www.954690.com-下载体彩大乐透| www.vg8.com-安然七星彩专家预测| 彩票5www.550243.com| www.rl58.com-云南畅游快三到几点| www.30fp.com-福彩昨天晚上出啥| www.7rj.com-体彩门头标准图片| www.210275.com-快三开奖查询宁夏| www.720448.com-七星彩最新开奖号| www.292897.com-彩票砍龙神器| www.632616.com-中国彩票中奖真与假| www.ih84.com-九龙坡区彩票| www.35ej.com-最新南国彩票七星彩| www.556546.com-亿游彩票网注册帐号| www.5068.me-网上的彩票-| www.25418.com-合肥体彩兑奖流程| www.167525.com-北京快三助手下载| www.989919.com-彩漂液的使用方法| www.01726.com-送彩金的游戏平台| www.276508.com-快三广西开奖| www.375723.com-安徽宣城彩票中奖| www.hn96.com-快三三同号遗漏查询| www.149258.com-体彩29选7走势图| www.16112.com-新浪爱彩可以买吗| www.627921.com-大发彩票是不是诈骗| www.u19.com-生彩宝怎么设置胆码| www.356.pw-怎么购买外国的彩票| www.706996.com-用微信能买彩票吗| www.950915.com-时时彩彩神通| www.mt66.cc-易盈彩票苹果下载| www.6765.cc-如意彩app下载| www.08086.com-网购大乐透彩票| www.47323.com-好客彩app-| www.83785.cc-玩彩票的好处| www.839964.com-pc蛋蛋国际彩票| www.007227.com-明星彩票app| www.912378.com-绵阳附近体彩店| GO彩www.gocp2.com| www.953454.com-竞彩即时支持比例| www.dy39.com-吉林快三盘有鬼吗| www.26nw.com-乐彩字谜图谜论坛| www.2831.top-乐利时时彩现场直播| www.62ir.com-彩票软件app推广| www.2308.vip-彩吧水果图-| www.7653.top-体育彩票门头材质| www.961854.com-四川省福彩领奖流程| www.dg63.com-江西体彩大乐透| www.15xt.com-优乐彩票app下载| www.1287.me-香港潮剧彩楼记| www.78671.cc-乐彩的官方网址| www.520747.com-福彩历史中奖号码| www.27219.com-新2福彩论坛| www.017838.com-双色球彩票怎么买| www.538572.com-3d彩报今天-| www.2gr.com-福彩3d和值购买| www.006746.com-体彩任选三规则| www.oo15.com-彩客网app官方| www.444643.com-西安莲湖区福彩转让| www.530849.com-世爵彩票平台怎么样| www.785673.com-跑马彩票3分钟| www.962384.com-陈华赌一胆福彩| 大彩网www.660665.com|