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.029907.com-中国五洲彩票| www.667600.com-彩票官员米老鼠| www.828267.com-点点彩票下载| www.959142.com-鉴别彩票的真假| www.327355.com-福彩神牛七乐彩预测| www.419479.com-体育彩票申请资格| 500万彩票www.98528f.com| www.sc07.com-快三机选号码查询| www.219724.com-爱彩乐平台是真的吗| www.7821.cc-福彩3d职业玩家| www.49890.com-时时彩大奖计划| www.540815.com-彩红兔同志-| www.365041.cc-菲律宾做博彩| www.0991.net-优彩社会论坛| www.34ed.com-3d彩界精英双胆| www.6938.top-七彩云南全国分店| www.65050.cc-竞彩彩票靠谱吗| www.265182.com-今晚快乐双彩开奖| www.363913.com-廊坊福利彩票大奖| www.456376.com-红彩直播盒子哪个好| www.78139.com-3d彩票技术培训| www.113819.com-彩掌柜计划群| www.th10.com-快三跳法视频| www.22rb.com-彩票是假的吗新闻| www.580518.com-疯狂赛车彩票怎么样| www.et2.cc-彩票256手机版| www.wv74.com-金沙线上赌博送彩金| www.897818.com-彩票说说搞笑| www.985459.com-每日首充彩票| www.vi2.com-新加坡乐和彩| www.96bv.com-首页彩票走势网| www.9881.biz-今晚六给彩开奖结果| www.480160.com-和彩云修改手机号| www.587071.com-有谁玩微彩吧| www.661118.com-网易彩票能买双色球| www.493658.com-家彩搜索3d试机号| www.583856.com-鼎丰彩票网址| www.655240.com-爱彩乐专家推荐号| www.722901.com-1688彩票网站| www.833171.com-百娱乐彩票-| www.909191.com-哪个体育彩票软件好| www.970197.com-今天江苏快三预测号| www.cai03.cc-玩快三是什么意思| www.356967.com-彩票的意义-| www.454987.com-彩票访官方平台好吗| www.230329.com-518彩票app-| www.578910.com-体彩店怎样装修| www.705342.com-体育彩票领奖规则| www.801298.com-互联网彩票团彩| www.906127.com-大连体彩站出租| www.984107.com-辽宁福彩网手机版| www.04js.com-彩富天下-| www.805781.com-万万亿彩票-| www.885558.com-567彩票官网版| www.957481.com-248彩票平台| 天天彩票www.83560.com| www.58qp.cc-足球竞彩qq群| www.138789.com-彩鸿网-| www.309565.com-福彩双色球凤彩网| www.388720.com-福彩3d和值遗漏表| www.532563.com-7星彩怎么玩规则| www.625033.com-彩票竞价话术| www.707783.com-快三回血大师| www.139463.com-彩票资料共享大全| www.272297.com-一分快三赚钱技巧| www.344732.com-506彩票下载| www.753281.com-澳发彩票手机版下载| www.892205.com-快三全能必中软件| www.962218.com-快三造假-| www.cp6318.com-在手机买彩票平台| www.196645.com-'彩票开奖结果丨| www.446756.com-彩票无损刷水| www.609427.com-分分中彩票网址| www.173508.com-彩票快三怎么玩稳赚| www.c64.net-快乐5分彩怎么玩法| www.13ay.com-多彩香烟价格表| www.90rs.com-上海快三彩票| www.93929.com-足彩预测18132| www.070963.com-江苏快三开将号| www.590220.com-星彩网彩票注册| www.666226.com-e乐彩输钱-| www.737636.com-福彩3d专栏电脑版| www.801856.com-高频彩套利原理| www.868682.com-7星彩中奖查询结果| www.931311.com-香港星彩txvip| www.978831.com-贵州好彩香烟| www.bc5.cc-彩票一分快三的技巧| www.nl62.com-足彩比分直播网| www.0iy.cc-无忧四溢彩打一生肖| www.48ym.com-北京七彩祥云| www.44871.com-京彩彩票-| www.586905.com-足球彩票一般多少钱| www.667194.com-南国彩票社区| www.736293.com-彩票亿元大奖经历| www.799291.com-大钱庄彩票网址| www.862947.com-大智慧彩票江苏快3| www.917484.com-必赢彩票-| www.968535.com-五亿彩是真的吗| 500彩票www.50788o.com| www.ov7.com-体彩11选择5今天| www.pv21.com-彩票九最新版本下载| www.3681.in-乐彩vip有几个| www.896996.com-36o彩票购彩大厅| www.955868.com-手机买彩票能开挂吗| 天朝彩票www.hd5658.com| www.772589.com-私彩修改软件| www.876840.com-福星彩开奖现场| www.939666.cc-彩富高手网-| www.985201.com-360彩票资讯网| www.21331.cc-澳洲28是彩票吗| www.xi36.com-怎样下载甘肃福彩| www.824786.com-七星彩精彩图分析| www.885820.com-福利彩票选号机| www.946979.com-室内彩色水泥地面| www.984501.com-熊猫竞彩app直播| www.cp5123.com-3d走势图乐彩网| www.120209.com-江苏快三彩票店转让| www.203652.com-福彩5d是每天开| www.261725.com-3d研彩网-| www.1117.site-竞彩兰球推荐| www.210669.com-一分钟极速快三计划| www.278001.com-体彩11选5浙江| www.343748.com-赚彩票-| www.904165.com-融彩网是什么| www.975243.com-体彩自助投注| 500彩票网www.690776.com| www.5718.in-附近福利彩票站位置| www.777444.com-澳客彩票是否靠谱| www.225021.com-彩票投注站app| www.cai8944.com全国彩票开奖| www.rd04.com-彩6官方下载3.0| www.8559.cn-彩运8用户注册| www.52078.com-爱音乐彩铃电信官网| www.003325.com-基诺彩票奖金| www.101659.com-竞彩足球即时指数| www.183886.com-江苏快三同号推荐| www.250713.com-连中彩票app下载| www.2910.com-幸运彩河南福彩网| www.501112.com-希腊当地的彩票| www.578597.com-快三单注奖金多少钱| www.903263.com-幸福彩票靠谱吗| www.206169.com-易彩买彩票真的吗| www.292255.com-八八彩票登录平台| www.04477.cc-微信登陆彩票软件| www.979381.com-体彩七位数走势图表| www.nd36.com-彩票开奖11选五| www.2659.com-竞彩足球竞彩报| www.637990.com-上海吴中路竞彩店| www.766492.com-世界杯足球赛竞彩| www.211248.com-乐彩彩票5分快3| www.530641.cc-乐彩客网址导航| www.66364.com-宝乐彩提现-| www.590266.com-竞彩分析app| www.681114.com-福彩开奖录像| www.802301.com-精彩大片app| www.890512.cc-u9彩票app-| www.976198.com-农村彩礼顺口溜| www.43091.com-安装中彩网-| www.366390.com-法郎彩真品图| www.033241.com-鹤壁彩票中奖| www.364024.com-彩虹色的伞-| www.7019.cn-成都七彩田野地址| www.89376.com-东升彩票app下载| www.098859.com-电脑彩正版藏宝图|