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.dq84.com-甘肃快三今日推荐号| www.05xl.com-3g彩票专家-| www.78ds.com-靠彩票发财的人| www.365951.cc-彩铅画背景图| www.464708.com-基诺型彩票高频吗| www.552212.com-江西快3爱乐彩| www.750216.com-爱中彩票平台怎么样| www.841799.com-彩票属于哪种五行| www.925587.com-当彩票打票员累死了| www.992813.com-中彩国际下载| www.qb2.com-长春逸彩快三查询| www.sz77.com-6个数字的彩票| www.31wc.com-周六可以买什么彩票| www.553.me-易购彩官网首页| www.08199.com-哪里的彩票销售系统| www.66889.com-七呈彩开将结果| www.027046.com-彩票计划师是真的吗| www.121450.com-彩票微信计划群导师| www.206305.com-彩票端靠谱吗| www.275848.com-千万彩票下载| www.356347.com-数学和彩票的关系| www.991944.com-三分彩如何看规律| www.98af.com-体彩中心高管案件| www.4108.org-彩虹七号普通多少钱| www.01310.com-国彩彩票免费下载| www.51400.com-我要加盟彩票| www.98758.cc-竞彩365直播| www.067685.com-微微彩票是干嘛的| www.137614.com-中国体彩有什么报纸| www.219528.com-中国彩吧-| www.295211.com-福彩快开游戏调整后| www.367067.com-简单彩铅花卉插图| www.477044.com-亚搏彩票公司| www.560082.com-体彩排列是5走势图| www.630792.com-好友游戏彩票app| www.704331.com-彩票黑平台查询| www.784205.com-彩票一分快三走势图| www.863046.com-晚上有开福利彩票吗| www.931912.com-中彩首席导师金振国| www.987302.com-竞彩大小球什么意思| www.cp8667.com-中国人人快三| www.oa46.com-彩八彩票下载安装| www.7nb.com-彩铅手绘美食| www.56hv.com-福彩保障下载| www.0373.xyz-体彩双色球开奖号码| www.6072.com-釉中彩的碗好不好| www.08299.cc-湖南体彩排列三| www.52863.cc-好彩网挣钱是真是假| www.495464.com-自助彩票机合法| www.608791.com-彩票机开机故障| www.678793.com-天天中彩票提款冻结| www.769131.com-唯彩看球ios下载| www.am52.cc-星彩三邪恶-| www.254197.com-好运彩彩票平台| www.365732.cc-福彩3d组选3| www.499541.com-51彩票网软件下载| www.578526.com-兰州体彩转让| www.658459.com-登录彩视-| www.785508.com-彩票守号中了4个| www.875362.com-快钱彩票app| www.937655.com-彩37彩票网站| www.983923.com-彩票365怎么充值| www.cp967.com-福建快三专家推荐| www.114318.com-福彩3d开奖结果| www.235028.com-反水彩票平台13%| www.328659.com-360福彩3d之家| www.652892.com-天下彩49cc-| www.ak86.com-808加急彩版| www.tl56.com-炫乐彩票安卓| www.17vz.com-吉林快三能赢钱吗| www.90ti.com-查福彩上期中奖号码| www.6970.net-时时彩四星杀号规律| www.163072.com-福彩类似排列五| www.332274.com-rg彩票-| www.456185.com-彩票中了到期了咋办| www.561802.com-鸿彩美发浩然直播| www.647444.com-体体彩大乐透| www.324258.com-乐彩充值到个人| www.425588.com-彩票中奖查询结| www.560040.com-吉林福彩快三遗漏| www.626252.com-盈丰彩票登陆| www.702353.com-竞彩足球连续跟单输| www.789383.com-卡姿兰彩妆加盟店| www.870799.com-傲赢彩票app下载| www.1px.com-随州体彩中心在哪里| www.66xh.com-彩票游-| www.1135.net-足彩改期怎么算| www.506595.com-福彩三弟字谜总汇| www.632224.com-融彩网平台怎么样| www.730682.com-新浪彩票网预测| www.809588.com-众乐彩官网下载| www.888232.com-智彩网-| www.974776.com-体育彩票有多少球| 好乐多www.www.c760c.com| www.ko85.com-快三有多少种| www.452663.com-彩漂洗衣液的作用| www.581391.com-天天中彩网2344| www.679494.com-人人中彩被黑| www.766973.com-东莞彩乐糖果| www.947980.com-众彩网迟丽颖| www.990197.com-乐彩网软件下载| www.423478.com-七星彩星期二走势图| www.568403.com-售彩色复印机租赁| www.663337.com-七乐彩开奖结果| www.759068.com-微彩托的套路| www.833809.com-新浪开奖直播彩票| www.902517.com-博亚彩票-| www.967659.com-呼市福彩中心| 中彩网www.81233hh.com| www.fi22.com-注册送19元彩金| www.ww76.com-南方双彩3.0版| www.567723.com-228彩票网-| www.653885.com-500竞彩比分网| www.755229.com-购人人彩违法吗| www.823055.com-山东非无特彩涂板| www.888123.com-解梦七星彩大全查询| www.963767.com-歌曲彩虹羽泉| 亚洲www.296180.com| www.ek17.cc-天齐网彩吧论坛网| www.st87.com-168彩票开奖| www.33rx.com-腾讯60秒彩票软件| www.0312.cn-哪一类彩票销量最好| www.6781.net-彩红世界下载安装| www.21277.com-买什么彩票中奖率大| www.63043.com-足彩奖金预测| www.035720.com-广西福彩新快3| www.113705.com-吉彩论坛3d-| www.180488.com-一分快三骗局| www.407990.com-福彩中心元旦放假吗| www.529807.com-中国福利彩票直播间| www.699908.com-万人彩-| www.778920.com-竞彩牛师傅-| www.854223.com-快三必出组合| www.920928.com-彩神l苹果版| www.972062.com-体彩排五走势图| www.156.live-超级时时彩全天计划| www.4080.pw-彩票软件送彩| www.9295.cn-乐彩vip平台| www.82808.cc-搜狐彩票图表大全| www.032341.com-彩78下载-| www.339110.com-时彩族怎么打不开了| www.0024.online彩票双色球摇号器| www.7870.pw-胜负彩18161期| www.1322.net-106官网彩票网页| www.836111.cc-丰彩-| www.907753.com-福利彩票有什么玩法| www.971685.com-足彩导航-| www.yp3.cc-彩票怎么看号码| www.qw59.com-二分时时彩-| www.02eq.com-更懂彩民彩吧| www.241500.com-彩吧彩票是官方的吗| www.359660.com-七彩祥云简笔画| www.449520.com-198彩登陆-| www.526731.com-时时彩包码二定| www.692600.com-98彩票网安卓| www.772333.com-时时彩交易平台| www.841382.com-彩妆-| www.cp167.com-1分快3彩票-| www.151357.com-即开型彩票概率分析| www.363769.com-古风彩虹漫画| www.444353.com-每天福利彩票试机号| www.539114.com-彩票追杀糸统| www.823256.com-彩票三b查找开机号| www.882468.com-英国五分彩是真的吗|