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天

知道了
亚洲28 www.oi97.com-七星彩19048期| www.065384.com-福彩88骗局-| www.683085.com-彩票禁止网上购买了| www.sy96.cc-够力七星彩老版| www.1496.vip-彩虹相片-| www.918073.com-重庆老时时采彩走势| www.cp7633.com-七星彩玩法-| www.199883.com-河南福彩22选五| www.306675.com-彩票靠谱平台| www.4523.cn-排列5e4彩吧| www.35442.com-彩99旧版ios版| www.003726.com-竞猜足彩比分计算器| www.219049.com-百姓彩票网官网下载| www.337125.com-3d福彩蓝精灵a| www.470000.com-境外足彩推荐网站| www.127297.com-日彩网怎样才能中奖| www.710334.com-加微信玩彩票| www.259176.com-快三单码十多期不出| www.131660.com-河南彩民双色球中奖| www.331650.com-体彩排列三四机号| www.482193.com-体彩排列五怎么兑奖| www.72575.com-全能中彩票app| www.4040.cx-88彩票客户端| www.36631.cc-澳彩與歐賠-| www.548937.com-彩播贝贝密码房合集| www.672537.com-时时彩彩八仙安卓版| www.862959.com-泰安体彩中奖新闻| www.06pw.com-彩票摇号的猫腻| www.77cc.com-万彩办公大师有毒| www.303599.com-福彩瑞app-| www.33770.cc-河北福彩快3概率| www.011153.com-极速分分彩开奖记录| www.n16.me-彩票5分快3怎么玩| www.ct65.com-优信大发快三app| www.2th.com-网易彩票提现流水| www.88yh.cc-热购彩票网址| www.307667.com-派彩每日推荐大乐透| www.306086.com-彩票能折叠吗| www.197333.com-海南彩票大赛| www.363455.com-网络红人秦艽小彩虹| www.453997.com-什么是彩钢瓦| www.593216.com-七彩阳光镜面完整| www.680781.com-怎样戒掉买彩票| www.121288.com-网易彩票可信吗| www.568049.com-精彩广告语-| www.8411.net-做博彩程序员犯法嘛| www.88834.com-彩票买卖统计| www.331555.com-趋势王彩票分析官网| www.402112.com-7星彩专家号码推荐| www.132011.com-河南濮阳订婚彩礼| www.59fy.com-中国福利彩票aqq| www.8041.xyz-87彩店客服电话| www.77905.com-3d彩吧精华布衣2| www.04iz.com-彩铅入门需要的工具| www.0151.cn-好看的彩色饺子图片| www.0tf.com-千百万彩票登录| www.423456.cc-七星彩星期日走势图| www.624568.com-彩票都有几种玩法| www.737609.com-怎么刷彩金-| www.398640.com-众彩娱乐官网666| www.9081.com-简单彩铅画女孩风景| www.8688.me-7七星彩开奖结果| www.936100.com-够力七星彩画规下载| www.dc65.com-怎么考取足彩分析师| www.u14.com-深圳福彩投诉| www.071144.com-上海招聘竞彩分析师| www.930174.com-518彩票网登陆| www.017154.com-彩票店怎么赚钱| www.101631.com-500彩票真的吗| www.169362.com-广西快三助手| www.241911.com-七星彩开奖玩法说明| www.867992.com-福星彩库-| www.970940.com-买彩票如何中奖| www.xm1.cc-快三坑了多少人| www.wh62.com-彩票走势怎么看| www.31lz.com-彩票奇门预测方法| www.1157.pw-彩票术语定胆| www.8868.vip-3d彩的域名-| 中彩网www.91233p.com| www.0573.biz-新的足球彩票| www.9420.in-华人娱乐彩票登录| www.965111.cc-福彩魔鬼推算图| www.751729.com-下载娱乐彩票6| www.848915.com-万彩吧彩票开奖| www.597217.com-下载易彩集团| www.66432.com-马云写的彩票号| www.751877.cc-1彩娱乐代理| www.1584.cn-全国彩票收藏交流会| www.7969.xyz-博彩ui-| www.26311.cc-彩吧彩票上的大神| www.79833.com-宁夏i体彩11选5| www.026515.com-外国足球职业博彩人| www.748844.com-2020彩票网黑| www.834509.com-好彩蓝莓爆好抽吗| www.894272.com-博友彩怎么登录| www.962737.com-3d彩吧牛彩图库| 大赢家彩票平台www.081503.com| www.885991.com-彩票在线平台| 金掌柜www.83993e.com| www.743342.com-金山彩票手机版| www.855897.com-七乐彩中六位多少钱| www.935414.com-一代彩神专栏| 同乐彩票www.029509.com| www.lz54.com-七星彩早版区| www.1mg.com-乐彩首页17500| www.051410.com-超级快三-| www.383966.com-七六彩票-| www.739346.com-竞彩网站网点| www.229236.com-彩票店赊账打快三| www.303896.com-一分快三稳赢公式| www.369641.com-爱彩票网址-| www.479700.com-福彩3d新手入门| www.824339.com-七星彩内部资料| www.53716.cc-时时彩一期免费计划| www.877750.com-福彩票双色-| www.049513.com-五福彩是不是骗局| www.002049.com-各种彩釉大瓶全称| www.698150.com-彩铅星空画教程视频| www.qa36.com-132彩票安卓版| www.113764.com-下载火箭彩票| www.2678.xyz-体彩6码最大遗漏| www.3dr.cc-热购彩票靠谱吗| www.cp8466.com-10分快三计划软件| www.123641.com-燕赵福彩首页| www.691853.com-足彩胜负彩澳客网| 18W彩票www.703027.com| www.686959.com-体彩管网-| www.345528.com-彩票真能中奖吗| www.563052.com-肥城体彩三亿| www.52446.com-3d选号彩报汇总| www.498127.com-彩票试玩赚佣金| www.699365.cc-福彩七乐彩奖池| www.791382.com-彩票对-| www.868128.com-周三是什么彩票开奖| www.50824.com-七星彩黑马赌王| www.361311.com-彩泥制作大全小动物| www.466589.com-七乐彩在那里兑奖| www.310333.com-长春市体彩中心地址| www.471839.com-爱心彩票网黑不黑| www.539267.com-彩票餐馆-| www.338750.com-赢彩吧平台-| www.kc18.com-168彩票网合法吗| www.140078.com-彩票777www| www.951204.com-立彩是什么东西| www.312038.com-前三彩票平台| www.990412.com-网购彩票下载| www.370193.com-ee彩正规吗-| www.572886.com-福彩61生肖玩法| www.448855.com-双色球彩票机选| www.892275.com-3d通福彩在哪下载| www.952412.com-时彩平台-| www.995425.com-易彩堂怎样赎钱| www.cp9259.com-中彩票下载-| www.kc92.com-中彩网字谜-| www.yq03.com-韩国福彩851期| www.10fj.com-彩票中五位数多少钱| www.741147.cc-澳门有哪些合法彩票| www.876365.com-体彩排三断组今天| www.947992.com-四川体彩中心电话| www.989769.com-彩漂能洗鞋吗| www.cb.com-安慰快三-| www.xu58.com-官方认证快三彩票| www.67ny.com-体彩大乐透5亿得主| www.0890.shop-3d彩宝贝专家字迷|