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天

知道了
密歇根神奇彩票 www.129954.com-南海七星彩特区论坛| www.122271.com-彩民论坛74849| www.96ot.com-万达彩票登录| www.40785.com-20号彩票-| www.tz49.com-彩票偏态分析| www.33424.cc-福彩水果农场| www.561852.com-赌彩是什么-| 3G彩票www.c145.vip| www.qe28.com-七彩app平台| www.429928.com-创意水彩笔画图片| www.553153.com-500万彩票直播| www.0259.cn-时时彩奖金多少| www.04179.com-彩票看中几等奖| www.1993.website足彩负其他-| www.ql69.com-博牛彩票平台下载| www.27725.com-姜山足彩冷门| www.8885.wang-竞彩上税-| www.e26.org-国彩网-| www.4ey.com-澳客网彩票官网首页| www.31738.com-易彩网首页-| www.031966.com-十一选五彩票能买吗| www.016499.com-彩票十分钟开奖规则| www.815184.com-燕赵福彩官网新闻| www.251.in-彩票休市到几号| www.7043.pw-体育彩票2串1篮球| www.73700.com-体彩排列三数字累加| www.ja7.com-内蒙古快三牛| www.55567.com-七乐彩中6位数| www.da04.com-人人中彩票腾牛网| www.up96.com-彩票刷流水平台包中| www.947053.com-最热门的高频彩票| www.xg8.cc-贵州中一等奖彩票网| www.tn25.com-安徽快三中奖规则| www.579493.com-体彩排列三杀号定| www.126873.com-3d彩票魔图-| www.0959.com-跟单买彩票-| www.850837.com-生日买彩票-| www.75hz.com-广州足彩领奖去哪| www.74xs.com-我要看彩票-| www.681022.com-台湾彩券539| www.cai0877.com彩票上海快3开奖| www.wb81.com-七星彩今晚开奖直播| www.17ro.com-彩票大年初几开奖| www.062422.com-谁有瑞彩祥云邀请码| www.662392.com-七星彩截止投注时间| www.744325.com-彩票管理新规定| www.40552.com-瑞彩祥云作弊器| www.017151.com-重庆时时彩论坛大全| www.100055.cc-彩票网络销售| www.234758.com-福利彩票app| www.390311.com-网彩快三-| www.542158.com-怎么查询体彩| www.023409.com-七乐彩下期预测| www.106772.com-七星彩打什么奖| www.5946.pw-传统彩违法吗| www.106057.com-高频彩票倍投计算器| www.28ou.com-怎么下载彩票网| www.1457.vip-动物卡通彩铅简笔画| www.8556.loan-大象彩票网站登入| www.37734.com-下载彩虫-| www.333738.com-彩票百位振幅走势图| www.t54.club-湖北彩票中奖5次| www.c14.xyz-u9彩票软件下载| www.246635.com-快频彩20分钟| www.2025.pro-河南福彩下载安装| www.07244.com-彩票限号一般会开吗| www.06.me-神州乐彩输了五万| www.97qk.com-彩票3d试机号口诀| www.2276.in-大乐透彩票中奖规律| www.009908.com-优信彩票登录| www.104113.com-胜负彩直播比分直播| www.777294.com-彩八仙官网苹果版本| www.925786.com-彩富网资料同大全行| 彩客博www.8667l.com| www.669283.com-彩票统计软件app| www.867947.com-七星彩资料-| www.593852.com-竞彩即时比分直| www.191888.com-人人中彩票苹果下载| www.470688.com-三的乐彩网摘文集| www.62kp.com-天恒彩票app| www.0987.top-我要买彩票大乐透| www.7271.top-彩虹r台分享码| www.121196.com-从网上怎么买彩票| www.866452.com-体育彩票481规则| www.635410.com-复式彩票选号器| www.7695.top-士乐彩开奖号| www.877832.com-台湾五分彩开奖查询| www.946566.com-施工彩钢围挡| www.983104.com-彩客竞彩下载| www.cp6775.com-江苏快三规律破解| www.190619.com-快三有没有规律| www.285087.com-彩票靠概率取胜| www.360354.com-体肓彩票玩法| www.438159.com-哪里可以网上购彩| www.523946.com-七乐彩有app吗| www.587628.com-旺彩双色球怎么支付| www.38783.com-大富豪彩票游戏首页| www.012176.com-我想下个福利彩票| www.109978.com-正规时时彩有哪些| www.327285.com-彩票开奖号码网址| www.421296.com-体彩大乐透6+1| www.519016.com-腾讯的彩票竞猜关了| www.587788.com-乐彩彩票vip| www.654501.com-台州福彩官方网| www.713109.com-江苏快三微信诈骗群| www.776369.com-时时彩前三杀一码| www.180111.cc-快三开奖中奖规则| www.259903.com-体育彩票规则介绍| www.326486.com-查询彩票开奖结| www.387644.com-华彩注册-| www.526516.com-体彩七星彩开彩结果| www.619951.com-中国福彩老总| www.5428.me-华彩人生官方| www.082066.com-下载荣博彩票| www.537150.com-哪个网站买彩票靠谱| www.628060.com-广东体彩下载软件| www.009248.com-福彩pc-| www.29719.com-福利彩3d软件| www.81979.com-计算彩票概率| www.046883.com-安卓彩票平台下载| www.913707.com-大发彩票安全吗| 腾讯彩票www.tx27.com| www.977012.com-惠安街道彩礼标准| www.ee00.com-大发快三邀请码吧| www.502278.com-多彩投佣金-| www.8185.cc-澳门博彩股大跌| www.oh0.com-甘肃省体彩11选5| www.383068.com-16期七星彩-| www.561017.com-福彩3d天正八卦图| www.630433.com-下载全民彩票| www.697358.com-全民彩票代玩| www.760531.com-好彩妹口头禅视频| www.858447.com-湖北福利彩票开奖| www.953215.com-台湾福星彩官方网站| www.999308.com-福彩詹天佑预测分析| www.ea87.com-彩票幸运农场玩法| www.982350.com-四九彩票共享大全| www.766805.com-彩虹糖的美好寓意| www.0934.date-万豪彩票ios版| www.4045.live-最新彩票扣税标准| www.89122.cc-248彩票怎么样| www.048441.com-快三时时彩怎么玩| www.369026.com-福彩三d5000期| www.506287.com-吉林快三历史走势| www.602061.com-银魂中3亿彩票| www.682291.com-足球彩票微信名字| www.800813.com-冮苏快三推荐号码| www.913992.com-七天彩票骗局| www.985211.com-728彩票线路| www.ah10.com-特区彩票论坛开奖| www.993896.com-玩彩票官方大平台| www.av67.com-体彩走势图-| www.510413.com-彩虹的约定歌词全词| www.291700.com-广西福彩官网app| www.502955.com-彩友多进不了| www.569665.com-合买彩票提成| www.654122.com-杨幂品彩图片| www.885834.com-周杰伦彩虹歌词含义| www.980825.com-彩61信誉平台| www.cp9395.com-合法彩票平台| www.691916.com-快三群主赚钱吗| www.3760.vip-今晚的七星彩开什么| www.98684.com-网上大发快三能玩吗| www.055569.com-快三大小稳赢倍投法|