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天

知道了
1分快三 www.566383.com-微投彩票是真是假| www.870753.com-cp彩票下载安装| www.949152.com-电脑彩屏怎么办| www.61225.com-彩票开奖查视频| www.444646.com-蓝球竞彩大小分预测| www.659264.com-全国中奖彩票| www.822992.com-大乐购彩票-| www.136337.com-广西体彩官网兑奖| www.133874.com-六开彩开奖结果开| www.308593.com-彩73彩票领导者| www.394860.com-彩虹玫瑰花语图片| www.530322.com-时时彩五星万能五码| www.665353.com-竞彩店宣传图片| 500万彩票www.www.98528f.com| www.846787.com-竞彩必发盈亏| www.654752.com-七星彩预测图规| www.796493.com-分分彩定位胆怎么玩| www.916464.com-甘肃快三奖金是多少| www.987939.com-仲彩娱乐登录| www.lb90.com-大发彩票官网黑平台| www.6dc.com-体彩今日开奖彩宝貝| www.116330.com-小彩虹是什么意思| www.383622.com-彩客网在哪下载| www.90rs.com-上海快三彩票| www.069981.com-云南体彩票11选5| www.392069.com-福彩体彩足彩网大全| www.598134.com-竞彩任选九场| www.8260.cc-福彩8首页下载| www.93546.com-快乐三分彩走势图| www.484811.cc-体彩宁夏11选五| www.708232.com-彩状元彩票是骗局吗| www.861915.com-qq7彩票网址| www.ra82.com-快三长龙经验| www.23393.cc-时时彩中奖助手| www.003465.com-下载彩票站-| www.39665.cc-天天彩票找不到了| www.089620.com-阿里彩票是违法的不| www.je95.com-深圳福彩官网| www.922418.com-北京足彩招聘| 万博彩票www.387708.com| www.mu57.com-天天中彩彩票下载| www.29rg.com-lol电竞彩票| www.250.live-靠谱的网上买彩票| www.3900.biz-七星彩万能三码| www.045959.com-快乐十分钟彩票平台| www.153750.com-喜乐彩网址-| www.361169.com-万达娱乐彩票app| www.454813.com-快乐双彩开奖规则| www.85jh.com-足彩任九场开奖时间| www.81rc.com-摩卡彩票-| www.j91.com-速赢彩合法么| www.620512.com-七乐彩票违法吗| www.271659.com-好彩1玩法技巧| www.443579.com-意彩软件下载| www.550781.com-全民中彩票合法吗| www.641062.com-金凤凰网站彩票网| www.721976.com-彩票开奖118期| www.828807.com-微信上的彩票微助手| www.918596.com-苹果买彩票的软件| www.979955.com-快三彩票怎么买| www.se20.com-彩500下载网址| www.08eg.com-好看的彩铅画风景| www.83yv.com-福彩3d脑筋急转| www.cp539.com-内蒙快三昨天走势图| www.tf06.com-体彩418走势图| www.07bj.com-体彩刮刮卡中奖图片| www.095804.com-3d众彩网专家预测| www.506543.com-五行花甲预测彩票| www.618293.com-体彩的公益活动| www.765548.com-888彩票123-| www.898950.com-仁信彩票是真的吗| www.978976.com-彩票在线购买| www.jf40.com-外地彩票怎么兑奖| www.088434.com-手机足彩比分直播| www.183433.com-快三游戏规则| www.21rb.com-西甲竞彩公司赞助商| www.279450.com-时时彩官网啥时候停| www.358975.com-下载体彩开奖结果| www.443996.com-好乐多彩票网址| www.545955.com-开奖查询彩票| www.607619.com-惠州福彩申请流程| www.678424.com-足彩胜负彩历史开奖| www.757797.com-众彩易购是假的吗| www.826940.com-腾讯三分彩官网| www.902546.com-如何赚黑彩平台的钱| www.963974.com-彩票双色球分析软件| TT彩票www.526093.com| www.661837.com-黑牛吧邪恶全彩| www.3920.xyz-个位走势图中彩网| www.5575.cc-正版资料一彩牛网| www.29294.cc-彩虹频道app下载| www.67363.com-胜彩这个是黑平台么| www.017896.com-刚力彩芽丑闻| www.096700.com-千亿彩票手机版下载| www.844707.com-彩票年底停售时间| www.906058.com-安徽快三一天是多少| www.974723.com-彩票真难中-| www.ts72.com-安徽省快三今| www.820936.com-彩钢夹芯板寿命| www.895589.com-会员登陆9b彩票| www.958613.com-贵阳市彩票中心地址| www.cai8833.com吉林快三一天多少期| www.le66.com-燕赵福彩网-| www.e65.space-大中华彩票官方网站| www.448229.com-彩票系统软件安徽| www.cai0700.com福彩快三app下载| www.85627.cc-附近的体育彩票是| www.065448.com-油性彩铅画教程| www.132470.com-河南那边的彩礼多少| www.220322.com-乐彩网官方app| www.288217.com-快开福彩是真的吗| www.370622.com-进球彩最新开奖结果| www.508369.com-彩票怎么捡漏| www.554546.com-肇市福彩中心| 大赢家彩票平台www.715585.com| www.90xa.com-违法彩票平台举报| www.91qe.com-福彩三d最新技巧| www.00017.cc-福利双色球体彩| www.958045.com-福彩双色球开什么号| 金牌彩票www.58699.cc| www.350124.com-博乐彩票注册登录| www.22696.com-福彩网上平台| www.656071.com-英国星彩-| www.18539.com-好彩网官网-| www.137984.com-e8彩票-| www.441455.com-大众彩票安卓版| www.954910.com-澳洲5分彩杀号| www.2670.pro-福彩74期开奖结果| www.108288.com-快三彩票挂机软件| www.298002.com-快三数字组合图片| www.390045.com-河北七星彩走势图| www.938.cm-三国无双星彩| www.9709.loan-彩票开奖王中王| www.130604.com-河南驻马店订婚彩礼| www.nr97.com-福利彩票兑奖方法| www.903803.com-进球彩开奖结果| www.979127.com-旋子彩画分布图| www.ol58.com-福彩有几个玩法| www.3251.biz-重庆官方有分分彩吗| www.106748.com-彩彩票选号技巧| www.400177.com-彩票33安卓最新版| www.8434.loan-体彩排列三大小遗漏| www.871684.com-利彩彩票版下载安装| www.98um.com-黑客攻击私彩| 亿彩彩票www.588yc.com| www.ch78.com-幸运快三计划网址| www.jj59.com-送彩金的彩票平台| www.414881.com-关小刀足彩推荐今日| www.fc20.com-官方时时彩是真的吗| www.224543.com-彩神ll下载-| www.362057.com-爱乐透彩票app| www.569581.com-福彩3d寻马图久保| www.772454.com-广西体育彩票客户端| www.25ec.com-老彩民村心水之家| www.435.com-今天快三预测| www.101619.com-彩票aqq排行榜| www.85143.com-爱博彩票网-| www.265514.com-乐彩论坛预测| www.79ro.com-福彩中了三个号码| www.933505.com-彩票60分-| 金凤凰彩票www.406577.com| www.52qy.com-高频彩调整新闻| www.208484.com-十分彩app-| www.291655.com-最大的彩票平台排名|