QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery css3响应式图文卡片滚动轮播特效

jQuery css3响应式图文卡片滚动轮播特效

这是一款jquery和css3响应式卡片图文列表轮播布局。基于owl-carousel图片滚动插件,通过bootstrap制作响应式卡片布局,组成炫酷的图文卡片轮播特效。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<!--响应式框架-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

<!--图标样式-->
<link rel="stylesheet" >

<!--滚动样式-->
<link rel="stylesheet" href="css/owl.carousel.min.css">

<!--核心样式-->
<link rel="stylesheet" href="css/style.css">

2、head引入js文件

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>

3、body引入HTML代码

<div class="container">

	<div class="row">
		<div class="col-md-12">
			<div id="news-slider" class="owl-carousel">
				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-1.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 5, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-2.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 7, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-3.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 9, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-4.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 11, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<script>
	$(document).ready(function() {
		$("#news-slider").owlCarousel({
			items:3,
			itemsDesktop:[1199,2],
			itemsDesktopSmall:[980,2],
			itemsMobile:[600,1],
			pagination:false,
			navigationText:false,
			autoPlay:true
		});
	});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
大发快3 www.96zs.com-奔驰彩票网站多少| www.548854.com-彩6邀请码-| www.791544.com-京东可以买彩票吗| www.026865.com-足球竞彩34彩票| www.190956.com-河北快三玩法与算式| www.1011.org-彩乃奈奈番号封面照| www.061094.com-六壬金口诀测彩| www.2291.com-网易彩票开奖走势图| www.9343.vip-临沂孙大夫彩票空间| www.2091.cm-江苏福彩快三彩彩乐| www.20260.com-被大发彩票骗| www.72669.cc-精彩视频下载| www.42fq.com-彩票开奖哪里直播| www.0575.win-意甲万博博彩| www.970118.com-辽林体育彩票官网| www.dd24.com-江西体彩官网| www.zo31.com-中国足彩网app| www.50vt.com-快三赔率图-| www.811478.com-彩票qq35com| www.885361.com-体彩天下大厅| www.473955.com-彩票投注网-| www.277466.cc-浙江怎么没有七星彩| www.003731.com-盈盈彩计划群| www.031997.com-七星彩开结果奖历史| www.158050.com-足彩19047期| www.19183.cc-传奇彩票8-| www.040658.com-怎样玩体育博彩| www.7022.vip-360彩票合法吗| www.56852.com-彩乐网c49.cc| www.984256.com-竞彩猫可以投注吗| www.f01.top-体育彩票手机购买| www.944.cm-内河5分彩开奖结果| www.726433.com-什么溢彩-| www.812675.com-史上最大彩票资讯网| www.894114.com-财神会彩票手机登录| www.956750.com-哪个彩票软件好用| 网易彩票www.074wy.com| www.838386.com-苏州快三结果预测| www.80008.cc-彩票领先团队骗局| www.731406.com-手机怎样买足球竞彩| www.807015.com-山东体彩客户端下载| www.878365.com-新彩网彩神通试机号| www.592618.com-够力七星彩票开奖表| www.1881.host-淘彩票计划-| www.9727.xyz-安徽快三和值计划号| www.254918.com-中国竞彩足球app| www.re33.com-河南跑马彩票走势图| www.4176.org-七彩彩票真的假的| www.44976.com-打彩票流水兼职| www.903422.com-万豪彩票助手旧版| www.963799.com-竞彩足球让平规律| 大赢家彩票网www.83033l.com| www.831072.com-577彩票安全吗| www.936162.com-金冠彩票骗局揭秘| www.026576.com-足球博彩怎么买| www.148806.com-韩国有快三-| www.hh83.com-幸运中彩票下载| www.38ww.cc-彩库宝曲最新开奖| www.6523.biz-巴西3分彩开奖网址| www.12881.cc-福彩极速快三计划| www.000001.com-福彩快3辅助| www.104422.com-360竞彩足球| www.175893.com-安徽省快三形态走势| www.819909.com-28万彩礼灭门惨案| www.43em.com-篮彩预测分析| www.517378.com-七星彩彩民论坛首页| www.35lp.com-美国纽约州彩票网站| www.938.cn-三国无双星彩被捏| www.5535.win-彩虹宝宝第二季全集| www.10890.com-河北彩票网注册账户| www.56060.cc-中500万彩票的码| www.547744.com-8k彩票安卓下载| www.751384.com-今日彩票图纸| www.871846.com-丰彩涂料-| www.10520.com-进球彩走势图| www.77092.cc-中国彩票吧网站| www.859981.com-2分时时彩计划免费| www.965346.com-uu悠悠彩票-| 天天彩票www.626747.com| www.jp30.com-五百彩票网-| www.036234.com-彩票走势大全安卓| www.154458.com-带玩彩票赚钱| www.230265.com-北京快三是官方的吗| www.306714.com-k8彩票网-| www.954515.com-浙江省福利彩票| www.996643.com-黑龙江福彩领奖地址| www.gs16.com-093彩票软件下载| www.g49.xyz-苹果彩票网址| www.44hc.com-96彩票网-| www.222378.com-甘肃今天快三开奖| www.311575.com-体彩彩票网上购买| www.cp8538.com-甘肃快三开奖结果| www.nw72.com-福彩头奖怎么领取| www.03fg.cc-彩票k线软件安卓| www.72co.com-双彩票几点开奖时间| www.337856.com-彩讯28开奖-| www.bg23.cc-彩678是真是假| www.vv99.com-彩票导师先带你赢| www.16wq.com-竞彩分析师招聘汇总| 500彩票www.959591.com| www.vt81.com-彩票代理违法吗| www.02om.com-高德彩票怎么玩法| www.74ou.com-利奥彩票注册| www.552283.com-白彩论坛-| 盛大彩票www.ct8844.com| www.958690.com-福利公益彩票| 三星娱乐www.570323.com| www.518241.com-安徽好彩开奖结果| www.rm04.com-博彩是违法的吗| www.37ki.com-够力七星彩表下载| www.33196.cc-福建福彩双色球报| www.528113.com-赢彩王软件可靠吗| www.599946.com-彩票号段-| www.655595.com-七星彩票手机下载| www.985408.com-足彩猜胜负中奖规则| www.ls9.com-七星彩-| www.ps24.com-竞彩猫曲昌春| www.16ww.com-宝马时时彩下载| www.400.tm-正规投注足彩app| www.4157.cm-彩虹电视剧-| www.9016.vip-百度彩票app一元| www.506798.com-彩票看走势技巧| www.592448.com-清乾隆釉彩大瓶| www.671628.com-合6六开彩资料| www.745712.com-棒棒彩票大发3| www.801228.com-6a彩票app-| www.875513.com-体彩排列5中奖秘籍| www.547703.com-博彩e族体彩预测| www.622202.com-甘肃彩票中奖去哪领| www.691660.com-天天玩竞彩-| www.934301.com-福彩动物总动员公式| www.995334.com-北单竞彩app| www.kf9.com-江苏一定牛快三遗漏| www.tm13.com-福彩申请电话| www.22gh.com-海口七星彩开心论坛| www.252185.com-旺彩彩票网-| www.330543.com-七天彩历史邀请码| www.467649.com-彩票图表走势| www.cz55.cc-快三坑爹-| www.ur96.com-快三大小有规律吗| www.71.cx-滴滴彩票坑人吗| www.63lk.com-彩票代销者调查表| www.2525.pw-网购彩店-| www.7607.cn-爰采网胜负彩| www.407255.com-网上能买七星彩吗| www.34pg.com-七星彩有人中过吗| www.1095.cn-竞彩如何分析欧赔| www.303045.com-22彩票输死人| www.368292.com-彩铅风景画落日| www.928717.com-来自旺彩社区人民钱| www.969657.com-福彩3d5d速查表| www.ep63.com-8亿彩骗局-| www.vb14.com-三彩彩票网-| www.02cm.com-港彩图库大全| www.59id.com-02彩票下载安装| www.2499.pw-上户彩-| www.371017.com-彩票站转让合同范本| www.464007.com-红蓝绿波表彩图| www.547234.com-彩票对冲刷流水| www.689387.com-大众网彩票游戏| www.971.cm-七星彩算法技巧视频| www.555009.com-人人红中彩票| www.605777.com-吉林福彩对奖地点| www.wy10.com-七星彩论坛特区|