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.689881.com-云南福彩快乐十分遗| www.863392.com-彩票接口商-| www.938879.com-黑龙江体彩官方网站| www.997406.com-下载app500彩| www.co35.com-彩客站是什么| www.f45.hk-专业彩票工具| www.640.com-福彩3d组3技巧| www.954856.com-五分彩历史开奖号码| www.tz14.com-体彩宣传语-| www.73nf.com-福利彩票最晚领奖| www.17131.com-福彩3daa牛材网| www.444877.com-智能彩票分析软件| www.066666.cc-重庆市彩票越换中心| www.351139.com-买彩票最多中了多少| www.088629.com-上海福彩快-| www.773660.com-彩票新注册送体验金| www.864797.com-手机彩膜的坏处| www.931738.com-双色球彩票必中咒语| www.995691.com-北京福彩pk拾玩法| www.eg20.com-体彩大7-| www.978193.com-彩钢板尺寸规格| www.087043.com-十二釉彩大瓶| www.753936.com-购彩之家真的吗| www.944909.com-百姓彩票网打不开| www.db72.com-41彩票网首页| www.83hy.com-分分彩彩种有哪些| www.865841.com-熊猫彩票怎么样| www.954090.com-体彩竞彩胜平负规则| 天天彩票www.101062.com| www.466999.cc-七乐彩开机试机号| www.365407.cc-933彩票下载安装| www.475975.com-福临门彩票-| www.565525.com-福彩詹天佑点评| www.635103.com-七彩影城凯德店影讯| www.393039.com-明天彩票开奖吗| www.522193.com-腾讯分分彩有暗箱吗| www.393119.com-彩铅荷花图-| www.542084.com-福彩3d彩票大盈家| www.633570.com-213cc彩票-| www.727673.com-山东经经福彩在线| www.831960.com-彩票店网上怎么接单| www.911905.com-天天彩选4规则| www.978985.com-体彩26期-| www.kh10.com-福彩快三是不是真的| www.928839.com-海南七星彩至尊长条| www.999757.com-如何破解快三买豹子| www.iy70.com-福彩獎-| www.93499.cc-竞彩主队让一球负| www.381473.com-周五有什么彩票| www.51863.cc-牛蛙彩票是哪个网站| www.350117.com-时时彩多少分钟一期| www.072009.com-亚盘竞彩转换| www.492020.com-3d黑彩中奖倍率| www.615999.com-福建快三怎么玩稳赚| www.78905.com-福彩3d书籍-| www.53555.cc-美团有彩票吗| www.066106.com-彩虹宝宝音频| www.146333.com-7158彩票-| www.97589.com-两分时时彩开奖结果| www.510996.com-沂水彩虹谷好玩吗| www.591858.com-彩票捡钱-| www.678614.com-安卓精英彩票| www.765191.com-足彩怎么玩求详解| www.830892.com-义乌彩票店转让| www.891761.com-双色球彩票开奖| www.433968.com-福利彩技巧-| www.632451.com-双色球彩票打印模糊| www.754598.com-双彩网下载及安装| www.875491.com-45彩票最新版| www.977806.com-中国福利彩票快餐| www.jw97.com-彩票跟投软件| www.gj43.com-广西快三遗漏值| www.881527.com-lol博彩app| www.948011.com-双色球中彩网一擂台| www.993465.com-足彩怎么兑奖| www.sy9.com-江西快三历史开奖| www.nz68.com-足彩最新最快开奖| www.733814.com-福彩水果农场| www.902623.com-玩黑彩有人赚了| www.kl84.com-私人彩票平台怎么开| www.2750.com-体彩可以买几倍| www.lg17.com-中彩彩票平台多久了| www.6em.com-彩票数据算法| www.486.live-台湾福星彩票| www.203352.com-官方江苏快三| www.784677.com-福彩三地连线专业版| www.919131.com-河南福彩网快3开奖| 500彩票网www.65707b.com| www.277031.com-广西快三一定牛今| www.287165.com-安徽快三中奖规则| www.464494.com-年后体彩几号开售| www.698617.com-怎么算快三-| www.852813.com-中体彩彩票客户端| www.168498.com-内蒙快三今日必出号| www.299540.com-福彩3d快三-| www.397127.com-长沙福彩中心电话| www.554639.com-大富彩票网信得过吗| www.788734.com-彩票缩水是什么意思| www.902548.com-彩票即开-| www.cai5666.com河南快三视频直播| www.380598.com-合买彩票抄单意思| www.559032.com-棒棒彩票下载app| www.975537.com-彩票365官方网站| www.cx45.com-彩神3下载-| www.679811.com-中国新彩吧首页| www.678138.com-3d乐彩字谜画谜| www.783993.com-彩99下载wz-| www.866301.com-河南体彩481任2| www.938158.com-甘肃快三投注必中| 体彩网www.aa3890.com| www.748609.com-体彩七位数中奖| www.842607.com-怎么看彩票真假| www.914518.com-网赌彩票漏洞赚钱| www.965581.com-快三234下期预测| 中彩网www.91233t.com| www.br71.com-一分快三计划网址| www.775395.com-彩票有多少位数| www.730399.com-竞彩大小球哪里买| www.838149.com-255跟高频彩票| www.930617.com-彩票交税-| www.60gu.com-双彩球开-| www.25352.cc-经典快三靠谱吗| www.t67.top-app118彩票-| www.61er.com-赌彩网站信誉排名| www.75502.com-体彩彩票是正规的吗| www.044839.com-足彩310猜几场| www.74511.com-金彩彩票是不是骗局| www.037703.com-旧版彩票大师必中| www.466790.com-黑龙江省体育彩票| www.801602.com-快餐彩票-| www.875928.com-研究彩票走势有用吗| www.931582.com-彩票资讯彩客网推荐| www.974585.com-众彩幸运每一天登录| 大赢家彩票平台www.370583.com| www.340510.com-轩彩娱乐能赚钱吗| www.93fv.com-微彩吧怎么下载伴奏| www.2865.cn-安徽体彩专管员待遇| www.393544.com-彩票双色球专家选号| www.511224.com-神州数字三彩票| www.657404.com-竞技足球彩票| www.739080.com-彩神通手机版ios| www.800316.com-彩20彩票投注| www.867561.com-彩票网站均暂停售彩| www.925339.com-彩6网页版-| www.ip62.com-乐乐彩票是真假| www.k02.top-速赢彩一分快三规律| www.351212.com-冠军彩票导航| www.019237.com-福彩中奖明细| www.384518.com-福利彩票属于国企嘛| www.541981.com-彩票超级大乐透开奖| www.629371.com-如意彩票下-| www.707398.com-深圳风采福利彩票| www.798263.com-体育彩票让球胜平负| www.871424.com-三d预测众彩网| www.951911.cc-5360彩票网平台| www.992585.com-猜大小彩票有规律嘛| www.dp47.com-东彩骗局-| www.738685.com-天津福彩机器申请| www.810207.com-七乐彩彩票中奖规则| www.879711.com-体彩前景分析| www.940026.com-吉林快三稳定盘| www.990976.com-金星彩票-| www.jf9.com-八八彩票-| www.100227.com-禁止销售彩票|