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天

知道了
江苏11选5 www.009824.com-华彩团队怎样盈利| www.122566.com-福彩旗下的彩神网| www.195750.com-福彩三d开奖号码| www.290961.com-杏彩最新登录地址| www.363072.com-彩9彩票安卓版下载| www.467886.com-今日体育彩票中奖号| www.561714.com-大玩家彩票刮刮刮| www.639408.com-彩票店倒闭的多吗| www.725611.com-彩票为什么赢小输大| www.806109.com-双色球维彩视频| www.877707.com-香港1997彩票| www.947690.com-马云收购的彩票平台| www.997522.com-时时彩源码论坛| www.av75.com-怎么样看彩票走势图| www.ud05.com-123彩票网站彩| www.10bs.com-1235cc彩票-| www.365596.cc-彩铅表现技法| www.488799.com-彩票2元网排5| www.594062.com-宝乐彩票平台| www.671157.com-p三彩经网走势图| www.781792.com-分分彩挂机必死| www.861163.com-今日福彩三d字谜| www.925452.com-家彩网体彩胆码推荐| www.981549.com-河南体彩481玩法| www.es3.com-重庆时时彩网址| www.pm09.com-大发时时彩计划公式| www.977736.com-体彩世界杯竞猜规则| www.3283.win-聚彩彩票平台登入| www.52010.cc-惠普彩色打印一体机| www.056151.com-彩票黄金分割计算法| www.909595.com-九宫预测时时彩| www.630650.com-我中啦彩票网靠谱吗| www.80ny.com-智投彩票合法吗| www.580264.com-彩票排列五中奖| www.705005.com-下载体彩3d-| www.827995.com-小站宝彩票ios| www.450.tv-磁县彩票店转让信息| www.7090.in-湖南长沙七彩集团| www.22333.com-时时彩挂机方案思路| www.88557.cc-偷中奖彩票怎么判| www.062539.com-如何对网络黑彩报警| www.185536.com-河北快三的走势图| www.260325.com-网络彩票赌博被骗| www.343922.com-红旗彩票官网电脑版| www.426692.com-七星彩电脑版下载| www.527569.com-福彩快三上期中奖| www.597161.com-福彩图库大全| www.675935.com-彩票头奖-| www.755656.com-6s彩膜-| www.915077.com-淘宝没有彩票了吗| www.973769.com-下彩网网站-| www.ag57.cc-熊猫网彩票-| www.3yd.cc-足球彩票有关的股票| www.63aq.com-3的新彩网-| www.1593.wang-七星彩预测牛彩网| www.7798.top-竞彩总进球数高手| www.516132.com-彩一彩票诈骗| www.60718.com-038彩票几年了| www.670292.com-中国哪种彩票最公正| www.ge44.com-彩迷论坛-| www.2931.com-绿和彩今期开什么号| www.13wj.com-246123天好彩| www.99xz.com-惠州福利彩票双色球| www.298513.com-甘肃快三历史遗漏| www.525273.com-福彩3d中彩票| 豪彩VIPwww.ay7799.com| www.82tu.cc-微信快三信誉群| www.9496.loan-彩钢琉璃瓦机价格| www.268195.com-天吉彩吧论坛首页| www.418908.com-凤凰彩票网直播开奖| www.598367.com-1902期七星彩| www.731185.com-南粤好彩三特别号码| www.880906.com-彩客彩票007网站| www.997783.com-排三走势乐彩网| www.rz97.com-彩票中奖真实故事| www.85mw.com-陕福利彩票开奖结果| www.6231.top-大旺彩票的推广码| 大赢家彩票平台www.723013.com| www.355794.com-竞彩中奖需要交税吗| www.15cb.com-彩票店装修方案| www.22103.com-彩票两元网中奖| www.796002.com-享彩app-| www.599227.com-下载盈利彩票| www.800842.com-精英彩票高手网| www.2509.cn-彩票计划86-| www.282813.com-彩票规律-| www.cp2803.com-老快三游戏-| www.g90.cn-彩宝彩票有安卓版| www.837778.com-乐彩33和众飞| www.29xc.com-小学彩铅画图片大全| www.07353.com-彩色混凝土做法| www.553711.com-竞彩足计算器| www.693660.com-3d彩票今日开奖号| www.ss74.com-上海快三免费计划| www.692900.com-奥客彩票比分直播| www.869891.com-彩8对战在线版| www.cx70.com-时时彩哪个好app| www.0350.pro-超级时时彩计划| www.31191.com-福彩六大专家杀号| www.9392.online体彩世界杯投注| www.294385.com-彩票1516网址| www.818725.com-十四场胜负彩投注| www.428556.com-青蛙过河福彩| www.gj26.com-一分钟快三骗局| www.87rf.com-凤彩网预测软件| www.190283.com-快三二不同胆拖| www.308279.com-长春逸彩-| www.397528.com-用户登录福彩易购| www.551834.com-小乐彩平台-| www.698703.com-福彩3d走勢圖| www.785990.com-xr屏幕上有彩点| www.917901.com-彩吧助手试机号排三| www.982374.com-重新时时彩开奖号码| www.zj.com-北京快三开奖查询| www.xk73.com-鑫彩国际彩票| www.hl53.com-藏宝阁4s彩票| www.115331.com-移动彩票财务清算| www.038122.com-湖北一定牛彩票网| www.521266.cc-黑彩破解器app| www.707018.com-怎么买河南快三| www.022449.com-恒大时时彩是真的吗| www.278496.com-正规彩票网投平台| www.544450.com-如何教我买彩票| www.607531.com-南昌福利彩票店| www.717234.com-排三分析预测彩吧| www.803586.com-彩圣网挂牌资料| www.914946.com-广西快三计划网址| 梦想彩票站www.43131q.com| www.662613.com-七星彩每晚几点开奖| 杏彩www.00840i.com| www.573589.com-老时时彩开奖k线图| www.637703.com-111彩票下载| www.698151.com-嘉兴福彩领奖地址| www.757210.com-二手工地彩钢围挡| www.809955.com-体彩的号码-| www.876514.com-福彩3d太作假了| www.985434.com-每天首充彩票平台| www.4601.cc-河南福彩销量| www.9222.vip-航天彩虹干嘛的| www.79583.cc-福彩3d字谜迷| www.185951.com-时时彩漏洞计算方法| www.350178.com-负债累累彩票救命| www.783193.com-网络售彩网站| www.895854.com-彩票123网址大全| www.981751.com-大成彩网是真的吗| www.qd46.com-彩94app-| www.069398.com-体彩足球直播比分| www.231650.com-江苏快三所有号码| www.108530.com-最新彩票软件| www.029873.com-567彩票官网版| www.831813.com-广西体彩领奖地址| www.82mi.com-七星彩分顺序吗| www.1927.tv-福彩3d组选统计表| www.333337.cc-彩票开奖网站源码| www.467234.com-七乐彩每天几点停售| www.553574.com-成都竞彩网点| www.024619.com-中国体育彩票单式票| www.630580.com-竞彩足球名报分析| www.774658.com-七乐彩复式选号| www.cp029.com-快三自创绝密技巧| www.7126.xyz-新德里彩票走势| www.18111.cc-彩客网竞彩完整比分| www.gm89.com-驻马店彩礼-| www.89970.cc-七星彩摇号吗|