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.3803.in-竞彩蓝球混合投注| www.27482.com-竞彩霸主双色球预测| www.89839.cc-体彩各彩票销量| www.051384.com-重庆时时双彩网| www.305039.com-七星彩开奖历史全部| www.380911.com-7乐彩什么时间开奖| www.651608.com-永利彩票怎么样| www.776923.com-快三拉花附口令教学| www.875402.com-彩票中奖的数学分析| www.964655.com-彩票推算大师| www.cai6477.com快三开奖上海| www.ni52.com-大发快三总平台计划| www.03cu.com-彩票最大弃奖| www.82iq.com-九江福利彩票中心| www.2776.bid-彩界之首双色球三胆| www.8985.biz-竞彩网彩网360| www.69288.com-彩票追号万能计算器| www.035432.cc-三态平衡分析彩票网| www.131298.com-农村彩礼顺口溜| www.217868.com-澳客彩票电脑版首页| www.301083.com-七乐彩50期走势图| www.380528.com-七乐彩万能号码| www.544758.com-大公鸡七星彩app| www.637283.com-彩虹娱乐官网| www.736608.com-上海体彩网11选5| www.816629.com-江苏快三登录| www.893611.com-手机下载双色球彩票| www.967451.com-彩票群聊名字| www.fq95.com-快三猜一个好如何玩| www.zm43.com-彩票福彩双色球开奖| www.34hh.com-足彩奥克网-| www.0847.vip-彩票摇奖软件| www.7856.vip-彩票工具软件破解| www.30952.com-时彩计划软件手机版| www.78563.cc-竞彩最新开奖结果| www.037047.com-超级彩票助手官网| www.162390.com-福彩九宝图-| www.259106.com-竞彩官网下载| www.336673.com-体彩真假-| www.418823.com-龙彩居士排列三预测| www.526032.com-竞彩计划投资推荐| www.651783.com-彩票黑科技软件下载| www.741690.cc-免费送彩金的游戏| www.818948.com-绵阳市福彩中心地址| www.898466.com-微信彩票帮手扫一扫| www.968444.com-风采网彩票-| www.ai14.com-七星彩第四位杀号| www.su57.com-彩票试玩-| www.16sx.com-张k彩-| www.075.org-彩票16网站-| www.4130.com-彩虹805-| www.9762.top-惟默彩宝-| www.68348.com-福彩3d如何中奖| www.029890.com-彩经网3d绝杀六尾| www.109234.com-百彩网网址大全| www.181798.com-河北福彩-| www.256748.com-中国福利彩票规则| www.333486.com-手里能买彩票吗| www.414025.com-挂彩是什么-| www.518589.com-辽宁省福彩中心主任| www.590698.com-彩礼钱法律规定多少| www.668593.com-金三角博彩公司图片| www.750001.com-怎样登录豪彩| www.821272.com-青岛福彩中心待遇| www.892480.com-竞彩足球有漏洞吗| www.961682.com-福彩快三开奖日期表| 500彩票www.202340.com| www.hz00.com-快三带人骗局| www.a59.pw-977cc彩票-| www.29hs.com-彩票平台哪里找| www.0937.red-合买彩票平台| www.7696.cc-彩妆美容化妆学校| www.26757.cc-神州乐彩诈骗案例| www.71186.com-河南体育彩票电脑版| www.042558.com-多彩贵州城建设| www.137894.com-中国福彩中奖查询| www.216044.com-体彩玩法-| www.288940.com-好123彩票开奖| www.517696.com-必胜彩票-| www.577573.com-凤凰公益彩是什么| www.654092.com-江西快三一天几期| www.794566.com-微信没有彩票功能| www.870178.com-五福彩彩票是真是假| www.978679.com-天天福彩重听在线| www.an80.com-福彩3d过滤器软件| www.sd42.com-时时彩走势分析软件| www.10te.com-天天中彩票不能买了| www.81xy.com-足彩4串1全包| www.1763.cn-快三一注能中多少钱| www.9749.in-彩八仙计划app| www.51249.com-风彩彩票靠谱吗| www.93728.com-足彩推荐平台哪个好| www.055194.com-彩票开奖-| www.154800.com-足彩胜负彩怎么领奖| www.241163.com-蒙娜丽莎彩铅| www.314417.com-飞鱼彩票8选3| www.379572.com-湖南动物彩票开奖结| www.520506.com-百盛彩票软件下载| www.588213.com-体彩排列五谜语| www.660826.com-体彩开奖软件| www.770203.com-好彩堂下载app| www.855439.com-疯狂赛车彩票| www.915767.com-加盟体育彩票加盟费| www.973604.com-福彩快三要取消| www.lf7.com-一分快3彩票网| www.oi06.com-长春市福彩中心| www.4pz.cc-足球竞彩二串一心水| www.60bt.com-工行银彩通中奖返款| www.0186.vip-彩云国同人红依恋| www.7846.vip-彩票有高人吗| www.23525.cc-彩神争霸88-| www.63386.cc-足彩19042推荐| www.033325.com-大华彩票app| www.115855.com-足彩胜平负概率计算| www.182035.com-福彩快三开奖走势图| www.251082.com-爱彩彩票软件| www.318955.com-江西彩票作假事件| www.385390.com-彩乐园ll官网| www.545933.com-彩票站如何申请| www.622858.com-体彩有多假-| www.688774.com-武汉快三走势图| www.761601.com-体彩网排列五走势图| www.865183.com-华彩论坛-| www.922646.com-河南南阳彩礼| www.975263.com-腾讯赛车彩票官网| www.ko7.com-分分快三高手计划| www.nk68.com-新浪足彩网页| www.v98.me-诺亚彩票手机下载| www.45nl.com-南通体彩中心| www.400.tm-正规投注足彩app| www.3458.cc-彩寶網-| www.8572.cn-算彩票-| www.61026.com-非法网络彩票| www.018102.com-星彩3d哪里可以看| www.079266.com-吉林快三最新遗漏| www.134598.com-体育彩票排列5查询| www.202098.com-利彩app官网下载| www.267020.com-中国体彩开奖公告| www.465742.com-郑州5d彩超-| www.544542.com-彩派网-| www.628355.com-彩票赊账-| www.690168.com-足彩凯利方差网| www.760318.com-三星彩走势图| www.860256.com-500彩票官方网| www.915290.com-体彩加盟需要多少钱| www.969522.com-奖多多的酷彩吧| www.cp0036.com-看安徽快三开奖结果| www.kw02.com-网易福彩新快三| www.zw13.com-广西福彩选号3助手| www.20yo.com-今天晚上福彩| www.666.tv-全民彩票安卓版下载| www.3939.cc-竞彩足球开奖半全场| www.8682.com-七星彩机选购买投注| www.49879.com-手机足彩软件排行榜| www.010688.com-怎么注册福利彩票| www.069968.com-彩神辅助器-| www.129802.com-全国开奖七星彩| www.193464.cc-快三对子技巧顺口溜| www.254839.com-彩票软件哪个送彩金| www.319310.com-网易彩票网官网| www.381279.com-爱资料彩票之家| www.564311.com-彩福快三是官方的吗| www.622058.com-速彩沈宇简介| www.683198.com-致富彩票是干嘛的|