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.153128.com-彩吧vip安全吗| www.373703.com-微彩排列五微彩论坛| www.578509.com-兰州福利彩票中心| www.672368.com-快彩技巧-| www.832265.com-彩吧助手3地走势图| www.975269.com-河北快三彩经网| www.ka91.cc-168彩票网站下载| www.144718.com-中国竞彩官方| www.265919.com-银川体育彩票中心| www.74345.cc-彩38网站源码| www.050906.com-福彩快三青海走势图| www.216532.com-有买彩票的老师吗| www.362790.com-福彩刮刮乐代码| www.540746.com-718彩票-| www.636980.com-彩虹表情符号怎么打| www.652786.com-彩贝壳app打不开| www.62409.com-极速彩票官-| www.065060.com-132彩票官-| www.237764.com-福彩快三中奖查询表| www.809745.com-办理彩票销售| www.940029.com-快三盘是什么样子的| 500彩票www.51515z.com| www.018579.com-3b福彩乐彩论坛| www.238814.com-彩票大神微信号| www.329557.com-牛彩网独胆王| www.442133.com-老北京神算彩吧图库| www.536488.com-福彩三d魔图| www.618475.com-福彩开奖结果彩宝贝| www.45616.com-中华彩票网兼职| www.085996.com-那个彩票平台反水高| www.789074.com-广西快三推荐二同号| www.885051.com-彩票代玩兼职可靠吗| www.962916.com-彩神8邀请码| www.qw28.com-快三奖金表图片| www.ak23.com-七星彩对数口诀| www.566940.com-天下好彩报刊大全| www.701242.com-彩票的彩什么意思| www.841938.com-体彩是几位数| www.937939.com-云彩店官网app| 818合彩www.www.9889hc.com| www.455721.com-手机能打彩票么| www.602982.com-彩虹六号黑卡封几天| www.710904.com-足彩任选九场| www.831202.com-日本彩票中奖号码| www.924006.com-世界彩票巨奖排行榜| www.985434.com-每天首充彩票平台| www.bj12.com-快乐彩历史开奖号码| www.741811.com-南京福彩快三| www.470033.com-买国外彩票-| www.ds37.com-3彩票app-| www.wz46.cc-福彩三d新彩网图| www.ms72.com-我要中彩-| www.7ky.com-对彩票的认知| www.ep61.com-众盈时时彩骗局揭秘| www.d06.top-七星彩的秘诀| www.6531.top-资深的彩票销售平台| www.69149.com-重庆时时彩头彩| www.113199.com-买彩票危险吗| www.81779.com-吉林快三怎么样| www.wp76.com-怎么彩票走势图| www.646722.com-小鹿网络时时彩计划| www.796667.com-众慱彩票-| www.586807.com-微彩吧怎么样| www.662456.com-乐玩彩票官方网站| www.758236.com-长春彩溢健康浴场| www.829044.com-澳洲幸运彩开奖官网| www.43wu.com-遵义好彩香烟价格| www.864.tv-19019体彩-| www.wo79.com-看彩票走势图技巧| www.4164.com-新浪体育彩票网站| www.40173.com-福利彩票有几种买法| www.43215.com-中彩网怎么投注| www.331.red-体彩排列五玩法奖金| www.3689.com-佳能彩色复印机a3| www.9809.online江西七星彩中奖| www.128781.com-彩票猜大小单双| www.552288.com-每天开奖彩票| www.626316.com-华夏鑫彩积分商城| www.716876.com-麋鹿彩铅画-| www.793283.com-彩票九怎么骗| www.913156.com-彩民之家l资料大全| www.997326.com-利彩工具3d走试图| www.466.win-蚌埠彩票中心| www.6664.pw-快三复式彩票| www.22684.com-彩票打票员怎么提成| www.939066.com-澳客足彩胜负彩| 红旗彩票www.39957e.com| www.138883.com-竞彩实体店开售时间| www.41zs.com-今日头条老郑足彩| www.65579.com-快三推荐代码| www.66580.cc-成功彩票大厅| www.095804.com-3d众彩网专家预测| www.306086.com-彩票能折叠吗| www.04239.com-彩票全中个人所得税| www.q15.bid-河北快三荐号| www.155347.com-福利彩票双色球分析| www.297565.com-一定牛河北快三遗漏| www.572050.com-福彩三d的开奖| www.764512.com-红牛彩票破解方法| www.950590.com-下载个乐彩网| www.sk48.com-3d中彩网论坛| www.36412.com-福彩一共多少个号码| www.39535.com-天天中彩不能提现| www.004781.com-体彩和值遗漏统计| www.099059.com-哪个平台可以买快三| www.7654.cm-七星彩中三位多少钱| www.79kh.com-彩票软件吧-| www.1413.cm-福彩双色球杀红号| www.67vx.com-上海彩色混凝土| www.292378.com-买快三有赢钱的吗| www.30jx.com-彩虹代刷官方授权商| www.132267.com-濮阳县彩礼-| www.130431.com-外国数字彩票破解术| 13e彩票www.257760.com| www.558787.com-彩票顶呱呱-| www.608318.com-彩吧彩图-| www.288.xyz-王成周彩票中奖| www.7448.cc-上海彩票店怎么加盟| www.42yb.com-中彩彩票苹果| www.9693.wang-体彩19058期| www.90764.com-双彩论坛手机版3d| www.087051.com-幸运彩票合法的吗| www.244798.com-内蒙福彩app下载| www.356582.com-体彩竞彩怎么看片| www.114166.com-看彩72变-| www.314646.com-极速3d彩票规则| www.537006.com-有寓意的彩票店名字| www.678694.com-今天七星彩开奖视频| www.801101.com-709旧版彩票| www.926153.com-中国那个彩票最靠谱| www.pc02.com-安徽快三开奖助手| www.0791.com-分分彩刷量方案| www.7pd.com-华人测速彩票官方网| www.838027.com-贵州快三每天多少期| www.435915.com-九州彩票网正规吗| www.635012.com-养七彩山鸡有销路吗| www.903977.com-彩票app制作费用| 凤凰彩票www.88266n.com| www.q63.online-周四体彩彩票开奖吗| www.363839.com-江苏快三走势分析图| www.ts54.com-竞彩合买-| www.076650.com-彩票10数买九个数| www.196534.com-福利彩票开奖查询| www.115854.com-足球彩票29期比分| www.180258.com-广西快三遗漏| www.uj5.com-百宝彩票-| www.451866.com-天天中彩票提现冻结| www.567294.com-福彩双色球福票| www.635706.com-彩70官网app| www.705678.com-领取免费彩金网站| www.795501.com-新彩票走势图网| www.065806.com-必赢彩票不能提现| www.858.tv-时时彩选号公式| www.00738.com-今日体彩藏机图| www.14050.cc-昨天晚上竞彩比分| www.392619.com-彩铅画海豚图片大全| www.2180.in-顶尖彩票不能提现| www.757752.com-中彩网靠谱么| www.814717.com-福彩2018138| www.873847.com-快三网上买是真的吗| www.928926.com-彩福彩票是骗局吗| www.969781.com-义乌福彩管理中心| 500彩票网www.310195.com| www.90567.cc-彩票3d开机号|