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.198581.com-真正玩彩票赚钱的人| www.359093.com-双色彩票推荐号码| www.73485.com-体彩7星19038| www.32172.com-足彩比分50-| www.94315.com-网友带我玩pc福彩| www.088828.cc-今日头条彩票推荐| www.183285.com-甘肃快三走势| www.263044.com-福彩7等奖多少钱| www.533772.com-七星彩开什么号码呢| www.019763.com-体彩加盟电话| www.616221.com-竞彩3串2-| www.747429.com-购彩网7798-| www.826522.com-苏宁彩票靠谱吗| www.909862.com-彩票双色球出号公式| www.976287.com-查询彩票双色球开奖| www.cp8771.com-快三是福彩还是体彩| www.pw00.com-大资本彩票是骗局| www.548943.com-彩82邀请码-| www.639349.com-够力七彩长条奖表| www.279769.com-在网上怎么买彩票| www.469148.com-168彩票开奖网址| www.812932.com-华彩人生-| www.886287.com-古风女背影彩铅| www.0585.xyz-网友教我做彩票| www.931627.com-北京单场推荐彩客网| www.990510.com-1分快三彩票网| www.hl42.com-4s彩票4scc-| www.7kj.cc-广东体彩配送| www.164.cm-福少彩票平台| www.730660.com-竞彩足球新浪| www.846490.com-河南兰考结婚彩礼| www.960634.com-1399彩票-| 彩多多www.78949g.com| www.774239.com-机选彩票双色球复试| www.577221.com-七星彩讲座视频直播| www.764511.com-天天彩票正规不| www.19882.cc-河南省快三技巧| www.093017.com-彩钢围挡安装图片| www.260288.com-快三是赌博还是彩票| www.924984.com-福彩彩票下载| 中彩网www.2408a.cc| www.ik86.com-长沙所有体彩投注站| www.e84.cc-七乐彩今晚开奖视频| www.38jk.com-积石山彩陶王简介| www.645.net-时时彩苹果版| www.6631.com-福彩双采最大| www.25958.com-彩虹是什么写句子| www.75527.cc-福彩3d彩吧图迷3| www.4443.in-奇妙时时彩软件下载| www.13017.com-福彩购买技巧查询| www.69625.com-九九集团彩票官网| www.687380.com-139体彩-| www.854161.com-中国时时彩票| www.959686.com-摩纳哥三分彩骗局| www.008129.com-卖私彩定罪量刑标准| www.30049.com-金利彩票大发快三| www.081162.com-彩票遗传数值| www.260326.com-彩票赌博输钱| www.71vz.com-福利彩票2018| www.726771.com-那个app能买彩票| www.807779.com-中彩福彩票-| www.897864.com-七星彩开将记录| www.972553.com-彩铅山水画-| www.mg61.com-爱乐彩十一选五| www.62gr.com-体彩5p开奖号码| www.267698.com-彩票这么玩-| www.7cw.com-吉林三地彩票| www.cp9895.com-快三和值算法| www.e00.xyz-足彩入门零基础| www.534240.com-易中彩网站-| www.672720.com-福彩3d走势彩宝网| www.760927.com-广东好彩1app| www.874546.com-中国山西福彩网| www.936316.com-体彩自助刮刮乐机器| www.984713.com-梅花易数测彩票| www.sl8.com-时彩害了多少人| www.02438.com-安卓彩票-| www.ai22.com-昨天福彩出什么| www.0871.cm-全发国际彩票| www.19915.com-平台快三不给提现| www.875541.com-新疆时彩票开奖号码| www.552772.com-甘肃快三助手免费版| www.672206.com-特彩吧app41期| www.778193.com-淘彩网合法吗| www.910306.com-福彩开奖列表| www.999595.com-170彩票预测| www.po92.com-随机选号福利彩票| www.6011.cm-打彩票上-| www.974837.com-南国彩票论-| www.is68.com-买福彩-| www.gl42.com-查福彩开奖结果| www.1815.tv-一彩化妆品怎么样| www.9299.net-中国彩票没有公信力| www.182881.com-大发快三官方开奖| www.288685.com-五分快三什么意思| www.393475.com-彩客网双色球推荐号| www.213271.com-彩软件-| www.380685.com-七彩网一分快三| www.493234.com-姓名选号大乐透彩票| www.912404.com-七乐彩杀码论坛| www.967509.com-福建彩票托-| www.05423.com-七星彩私彩网投注册| www.59093.com-中彩易下载-| www.021372.com-哪个博彩返水高| www.097750.com-福彩站转让-| www.643206.com-一分快三玩法介绍| www.298606.com-今天六开彩开奖结果| www.1784.vip-国内最牛彩票投注站| 福彩网www.055n.cc| www.609053.com-彩经网工具箱下载| www.101425.com-足彩欧赔看盘技巧| www.188674.com-福建快三遗漏一定牛| www.270888.com-七彩app下载安装| www.525159.com-彩票重庆-| www.581563.com-七彩几位数-| www.654162.com-时时彩号码遗漏统计| www.718234.com-中国体彩客户端| www.790396.com-天天中彩吧彩图汇总| www.863072.com-新浪排列三数字彩票| www.938241.com-玩彩票挣钱的人| www.986455.com-7158彩票-| www.ed8.com-下载中彩娱乐app| www.ra07.com-上海快三开奖规则| www.23xy.com-九亿彩票站-| www.371.mobi-五福彩彩票网址| www.4195.cm-彩票奖金税率怎么算| www.rp54.com-五分钟一开的彩票| www.1455.cc-澳门博彩业追债名单| www.03344.cc-网络彩票怎么戒掉| www.60441.com-腾讯分分彩必中方案| www.012044.com-体彩排列三六码遗漏| www.073643.com-体彩排3彩图总汇| www.131143.com-2019彩礼新政策| www.193821.com-中彩论坛香港资料| www.254293.com-爱乐彩官网下载| www.313506.com-彩神vip-| www.371999.com-做彩票代理赚钱吗| 博亿彩票www.664by.com| www.rv60.com-体彩11选5浙江| www.79pw.com-南京彩票培训学校| www.bh53.com-易彩网是不是骗局| www.993037.com-彩神88网页版| www.vz1.com-3d彩宝网-| www.870.cm-重庆时时彩五星缩水| www.6474.me-福利彩票三d推荐号| www.34197.com-购彩网欢迎你| www.68695.cc-大花虎彩吧图库2| www.778356.com-彩助手缩水工具| www.894564.com-彩经网3d形态走势| www.954224.com-3d彩票太湖谜语| 亿彩彩票www.588yc.com| www.qh08.com-好彩双爆珠价格| www.847850.com-山东彩礼排行榜| www.923448.com-竞彩和赌博的区别| www.983448.com-1彩登陆-| www.cp0768.com-快三定胆口诀逢3| www.447270.com-乐和彩登录-| www.545058.com-彩票选号来自灵感| www.661653.com-竞彩易中技巧| www.758549.com-675彩票平台| www.867303.com-最新海南七星彩预测| www.921204.com-谁有彩神8网址| www.969123.com-体育大乐透彩票| 188彩票www.51558.com|