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.vu22.com-体彩是什么-| www.94dq.com-现在还有基诺彩票吗| www.5188.com-博彩论坛白菜专区| www.i60.bid-南方双彩网软件| www.59pj.cc-北京福彩彩票| www.1414.xyz-收中奖彩票送礼| www.20874.com-彩神ix下载平台| www.761720.com-彩票之家网址| www.900438.com-河十一选五爱彩乐| 500彩票www.66653f.com| www.lc80.cc-怎么做彩票庄家| www.55644.cc-七星彩中奖规则表| www.529681.com-体彩6+1中奖查询| www.731964.com-进口彩妆加盟| www.822354.com-顶呱呱彩票-| www.891268.com-彩票号码统计器| www.045728.com-国彩票网-| www.050358.com-微信黑彩群判多久| www.536708.com-浙江福彩3d派奖| www.685556.com-福彩和差运用| www.835250.com-彩票预测软件有哪些| 500彩票www.52072h.com| www.637338.com-小米彩虹电池耐用吗| www.819654.com-合买彩票的好处| www.900632.com-3d彩界小少爷毒胆| www.968515.com-重庆时彩独胆公式| www.iy.cc-下载北京彩票快3| www.qp79.com-pc福彩是合法的吗| www.604447.com-国家合法的网上彩票| www.20217.com-彩票是人为的吗| www.066456.com-好一点的彩票平台| www.4375.biz-即开型体育彩票| www.091688.com-深圳牛牛彩骗子| www.zw39.com-时彩后13458| www.51ko.com-体育体彩中奖排行榜| www.0438.net-懂球帝买足彩| www.911830.com-51彩票全天计划| www.an89.com-福彩3d过滤器下载| www.g52.cc-新浪竞彩比分直播| www.66972.cc-福彩待遇-| www.654128.com-微彩排列三五奖表| www.36250.com-彩友吧预测专区总汇| www.98722.com-足彩串-| www.77325.cc-购彩网手机下载| www.122154.com-福彩6十l生肖开奖| www.159958.com-app下载送彩金| www.253761.com-北京pk彩票官网| www.957548.com-彩乐透-| 亚洲www.703890.com| www.n47.cn-福彩排列三试机号| www.009.me-亿彩五分快三计划| www.33080.cc-极速时时彩开奖器| www.108772.com-玩彩有赢的吗| www.395061.com-彩虹哥卖号-| www.hq25.com-今日贵州快三开奖| www.a66.vip-足彩14场秘籍| www.30qg.com-分分彩靠什么开奖| www.732.mobi-天天精选竞彩| www.5011.xyz-彩乐园lll下载| www.319478.com-北京快三奖金对照表| www.375244.com-快三输钱太快了| www.665383.com-七乐彩试机号| www.796119.com-彩票怎么选择号码| www.999160.com-福彩3d彩图大全| www.972049.com-印尼五分彩开奖官网| www.yn66.com-大马彩票成绩| www.776.cm-重庆时时彩预测器| www.6217.cc-福利彩票025| www.27766.com-三四五福彩-| www.148557.com-黑龙江省福利彩票网| www.253044.com-456好彩票下载| www.423518.com-七星彩坐标-| www.524898.com-分分彩百度贴吧| www.595518.com-福彩43期预测| www.658777.com-体彩排列三出奖结果| www.543603.com-迅盈彩票怎么样| www.727474.com-大爆奖彩票谁注册过| www.796586.com-体彩竞猜输了好多钱| www.860388.com-彩票计划9cb| www.911805.com-彩票快开型取消吗| www.967276.com-老彩票qq群-| 9号彩票www.80767o.com| www.45rd.com-盛大彩票是真的假的| www.361078.com-打错彩票中奖怎么办| www.315198.com-时时彩怎么玩才能赚| www.0796.net-共赢彩票进入| www.216829.com-彩宝网3d走势图带| www.432236.com-彩66彩票登录官网| www.598132.com-七乐彩19023| www.13557.cc-网洛彩票平台哪个好| www.851068.com-彩礼4万6-| www.967194.com-即时开彩旧版| 彩经彩票www.996099.com| www.3099.me-世界杯彩票买不了| www.25914.cc-彩虹是什么比喻什么| www.004832.com-彩票开奖双色球日期| www.455.live-彩票托是怎么工作的| www.5394.top-草莓彩铅画教程图解| www.23386.com-时时彩人工五星计划| www.882095.com-彩票网投哪个网站好| www.958860.com-查询彩票中奖| www.53968.com-28彩票注册链接| www.012778.com-七星彩35期-| www.078778.com-七星彩奖金计算| www.168911.com-快乐彩开奖结果| www.241829.com-七星彩复式怎么玩| www.315018.com-七彩视界官网| www.426159.com-足彩胜负彩新浪预测| www.545801.com-福利彩票过户| www.611981.com-最新万彩吧下载安装| www.681407.com-怎样玩高频彩| www.749607.com-罗彩韫-| www.832823.com-xj788彩客网| www.891821.com-时彩是什么-| www.953294.com-彩神争霸‖谁与争锋| 星际www.m.55xj.vip| www.664359.com-福彩七乐彩怎么玩| www.2006.cc-乐彩彩票二十分| www.89954.com-977时时彩-| www.518276.com-彩球游戏教案| www.868121.com-南国彩票开奖结果| www.943615.cc-连连中彩票app| www.987337.com-福利彩票去哪兑奖| www.ap31.com-贵州体彩中心官网| www.rl22.com-5分钟快三-| www.07au.com-彩铅橘子的画法教程| www.720203.com-七星彩规则| www.335926.com-福彩河北快三| www.145799.com-福彩犯法吗-| www.635806.com-a彩平台总代注册| www.715839.com-k8彩票官方网站| www.777162.com-苹果手机购彩| www.850905.com-腾讯时时彩平刷| www.901491.com-吉林福彩快三庄家| www.998061.com-北京彩票体彩| www.wz8.cc-老彩民高手论| www.qp97.cc-福彩基金用途范围| www.46yn.com-大乐透彩乐乐杀号| www.013530.com-七星彩走势图机选| www.80772.com-燕赵风彩新闻| www.6008.pw-福彩宝石机规则| www.52446.com-3d选号彩报汇总| www.94187.com-福利彩票包括啥| www.18539.com-好彩网官网-| www.523974.com-e彩票正规手机版| www.599665.com-每天买一注彩票| www.659675.com-大通彩票直播网址| www.446258.com-彩票开奖php源码| www.298204.com-手机赌博北京快三| www.368803.com-越南高频彩票5分彩| www.451431.com-黑龙江福彩麻将玩法| www.379696.com-彩票怎么分吵架| www.529362.com-旧版彩库宝典下载| www.856909.com-幸运飞艇时时彩软件| www.923278.com-秒速时时彩在线预测| www.981941.com-金彩网首页-| www.cai2728.com快乐彩开奖结果| www.764085.com-43彩票下载安装| www.887247.com-足彩翻倍跟单靠谱吗| www.960641.com-a9彩票是真是假| 全民乐彩票www.2934y.com| www.ih18.com-山东福利彩票| www.zv67.com-彩35彩票平台| www.28dy.com-意彩官网首页|