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天

知道了
优彩333彩票 www.891333.com-彩票为什么要统计| www.990242.com-官方时时彩怎么玩| www.zl1.com-彩票开奖双色球时间| www.rm94.com-基诺彩的诀窍| www.15jc.com-体彩实体店二维码| www.307651.com-快三13点和值| www.77ia.com-彩娃张晓芳-| www.3451.cn-彩金38免费送| www.7182.win-宝乐彩票合法吗| www.309855.com-微信小程序彩票| www.388312.com-华彩一点通-| www.520236.com-兴义彩票中心| www.681528.com-辽宁体彩中心地址| www.780768.com-app彩票打开| www.872310.com-乐彩网下载手机版| www.946836.com-彩板围挡价格| 华夏彩票www.hx1164.com| www.co27.com-500购彩大发快三| www.1qj.com-为什么喜欢彩票| www.163053.com-易彩网邀请码在哪里| www.023446.com-数字型彩票玩法介绍| www.282808.com-高手彩坛资料大全| www.395155.com-福彩开奖日期星期几| www.526305.com-帮人代买彩票| www.604111.com-彩票论坛幸运飞艇| www.672698.com-玩体彩外围犯法吗| www.750598.com-中彩在线提现提不出| www.832160.com-七星彩31期摇号| www.910983.com-福彩玩彩老头预测| www.977028.com-洛阳涧西区彩礼| www.ae08.com-手机彩票网论坛| www.25779.cc-彩票驿站的网址| www.004927.com-彩票开奖专家预测| www.121104.com-彩票群起名-| www.024627.com-7星彩中奖规则规则| www.mr24.com-中彩网北斗今日预测| www.13.club-体育彩票多少位数字| www.69nf.com-彩票盈多多-| www.891025.com-彩票推广引流| www.957784.com-333彩票下载安装| 天天彩票www.7782z.com| www.473475.com-中国彩票软件开发| www.567132.com-百宝乐彩票安全么| www.663890.com-正规秒秒彩平台| www.738323.com-彩票朋友圈软文| www.807578.com-美国彩票16亿开奖| www.541889.com-1216网彩-| www.732813.com-江苏体彩021弋| www.869915.com-彩票号码复制如何算| www.78757.cc-竞彩足彩北单| www.204896.com-快三图片跨度图片| www.354430.com-怎么样买彩票能中奖| www.514963.com-彩妆网店加盟| www.692.live-下载时时彩助赢计划| www.815887.com-燕赵风彩-| www.1618.com-kk彩票网是黑网么| www.16889.cc-云发购彩票的网址| www.of47.com-福彩开奖结果今天| www.84iu.com-彩票不让提款| www.741129.com-乐彩网手机版下载| www.933785.com-福利彩票在哪里兑奖| www.101812.com-竞彩足球推荐一定牛| www.313017.com-华夏彩票手机版| www.15579.com-彩铅零基础多练练| www.77ce.com-七星彩摇一摇选号机| www.177668.com-内蒙古快三开奖情况| www.579544.com-5050彩票首页| www.707363.com-彩票是人为的吗| www.52583.cc-江苏快三快乐彩| www.456.cc-美国人买彩票方法| www.787335.com-七星彩局王图纸长条| www.873268.com-780彩票-| www.960674.com-代玩彩票赚取佣金| 凤凰彩票www.77801h.com| www.031169.com-106官网彩票充值| www.18869.cc-998彩票app-| www.74628.com-七乐彩奖金多少钱啊| www.735588.com-彩票百分之百输钱| www.812301.com-采开头的四字成语彩| www.902253.com-怎么举报彩票站| www.967047.com-大沥福彩中心| www.kf.com-玩彩票算是赌博吗| www.ot22.com-正规彩票购彩软件| www.943162.com-福彩三胆计算方法| 惠民彩票www.hm6622.com| www.122485.com-替别人刷彩票犯法嘛| www.15012.com-全民彩票跟投靠谱吗| www.843298.com-体育彩票基金会| www.40672.com-123+彩票网-| www.n13.xyz-热购彩票靠谱不| www.546765.com-彩票为什么要刷流水| www.350825.com-最火手机彩膜图片| www.444863.com-彩票中三亿交多少税| www.83fn.com-幸运彩票会黑钱| www.303699.com-甘肃省福彩中心在哪| www.525066.com-黑桃k彩票注册| www.125734.com-玩彩票赚钱吗| www.906345.com-北京彩票票面| www.982130.com-信彩是什么软件| www.bg59.com-中国彩骗局-| www.xl00.com-快三稳赢-| www.5863.cc-中奖的彩票是什么样| www.qw08.com-彩票辅助软件| www.22uo.com-易算时时彩手机版| www.do11.com-彩经网3d走势图| www.32dv.com-彩虹影视纯a影库| www.018635.com-中彩彩票骗人| www.6946.pw-七彩虹收购承启| www.375882.com-七星彩排列图| www.502622.com-福彩通有风险吗| www.744328.com-美狮彩票062| www.812602.com-彩票双色球走势预测| www.879460.cc-内蒙古彩票中心电话| www.949743.com-北京快三截止时间| www.991898.com-快三走势图下载| www.dr5.com-今日快三走势图江苏| www.qg86.com-好彩白1871-| www.03tn.com-长春黑彩庄家稳赢吗| www.ik13.com-166官网彩票平台| www.479043.com-竞彩投注高手| www.14138.com-梦见死人七星彩数字| www.677371.com-淘彩票安卓-| www.771684.com-体育彩票申请流程| www.860088.com-5050彩票下载| www.908071.com-俄罗斯1分彩的计划| www.963079.com-排列三下载彩票| 网易彩票www.074wy.com| www.79658.com-宁夏福彩双色球开奖| www.079852.com-55彩票官方最新版| www.089539.com-彩票怎么样才算中奖| www.718911.com-彩虹羽泉歌词含义| www.796534.com-福彩快三的开奖规律| www.856011.com-福彩七星彩玩法介绍| www.907880.com-合肥开彩票店| www.960479.com-泰安市彩票站点| www.999562.com-福彩3d和值定位图| www.cm33.cc-彩神两天独胆| www.09ww.com-福彩双色球几号停| www.67ek.com-体育彩票害人输千万| www.0768.in-三分钟快三单双预测| www.fd07.com-足球彩票四大欧赔| www.411686.com-乐彩走势计划| www.521832.com-中国体彩网下载| www.697949.com-今日彩报-| www.kd40.com-彩票1分快三计划| www.r50.org-彩票中了不能提现| www.221277.com-时时彩苹果官方版| www.85ab.com-足彩妖刀推荐靠谱吗| www.699073.com-体彩中心副主任| www.770978.com-逆袭分分彩计划下载| www.857288.com-极速赛车福彩| www.908753.com-福彩彩票大厅| www.958094.com-青海福彩1到6选号| www.999175.com-快三大小单双微信群| www.ft2.cc-时时彩组三规律口诀| www.105607.com-胜负彩18095期| www.202596.com-贵州体育彩兑奖址| www.15ko.com-彩票对联大全集七字| www.lg6.cc-快三彩票网站大全| www.cp6623.com-北京快三最大遗漏| www.318378.com-三分彩官网开奖号码| www.521318.com-福利彩票高手群| www.356139.com-数学彩票计算公式| www.672525.com-彩票投注单打印机|