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.539991.com-姜丽快三花样| www.75us.com-万通彩票平台网址| www.zk6.cc-5d彩票开奖结果| www.954781.com-今晚开的彩票是什么| 幸运彩票www.572699.com| www.rm05.com-黑彩提前知道开奖号| www.ce9.com-好彩烟有几种| www.594008.com-商务频道福星彩运| www.865962.com-彩票开奖大全安装包| www.696385.com-竞彩足球胜平负混合| www.812996.com-银河彩票手机网投| www.513089.com-百度808彩票网| www.552623.com-江苏快三太坑人| www.683709.com-彩票实体店app| www.829243.com-彩558下载-| www.969597.com-福彩3d一贴吧| www.dj64.com-劬力七星彩奖表| www.587199.com-网络高频彩怎么举报| www.763376.com-足彩app贴吧| www.893769.com-大财神app彩票| www.999906.cc-网络彩票套路破解| www.17re.com-体育彩票初几开奖| www.kc60.com-555彩票网-| www.f50.net-7乐彩免费推荐| www.43ny.com-表现出彩是什么意思| www.134938.com-福彩快十玩法介绍| www.151691.com-中国彩票网站排行榜| www.300065.com-快三一分钟-| www.610293.com-做梦买彩票数字中奖| www.704891.com-最新足彩比分结果| www.830216.com-秒速时时彩下载| www.907989.com-七星彩彩票中5个数| www.974735.com-七星彩票论坛门| www.cp5328.com-北京快三走势图爱彩| www.35ot.com-彩票33安卓最新版| www.677531.com-用不了彩娃彩票| www.143879.com-竟彩足球胜平负| www.51240.com-青蛙彩票的资料大全| www.880107.com-徐文轩老徐3d说彩| www.959164.com-快三坑人-| 彩71www.197802.com| www.166976.com-福彩手机投注| www.04907.com-个人微信售卖彩票| www.72197.com-亿彩购物中心宁波| www.034973.com-天价彩礼害死人| www.17674.com-菠菜网注册送彩金| www.129749.com-看彩票双色球开奖| www.251538.com-电脑版中彩网双色球| www.331136.com-3d彩神通关注码| www.457027.com-恒彩线路检测| www.550514.com-博彩楼论坛-| www.637168.com-彩虹六号怎么玩| www.721433.com-足彩310电子版| www.797768.com-网上彩票能买吗| www.876765.com-香香彩票资料大全| www.957100.com-彩票能破解吗| 百姓彩票www.zuan222.com| www.71216.com-选彩-| www.026544.com-彩票分析师合法吗| www.775091.com-福利彩票147| www.867156.com-昨天的好彩票开奖| www.975264.com-双色球彩票中奖图片| www.cb74.com-玩儿快三能挣钱吗| www.we99.com-兰州市福彩中心兑奖| www.935955.com-3d小彩神高手论坛| 亚洲彩www.68568v.com| www.ld93.com-大彩网官方-| www.181775.com-河北快三开奖规则| www.818207.com-兰州彩票中心在哪里| www.898602.com-七星彩推荐号码预测| www.964695.com-新浪足彩任九投注| www.cp9455.com-官方彩票有哪些| www.06030.com-竞彩足彩彩票软件| www.68053.com-彩票中了秘密| www.028892.com-亿彩堂骗局-| www.52dy.cc-淮安彩礼2018| www.188548.com-q彩后购彩大厅| www.63963.com-足彩红七公微博| www.69646.com-博彩系统搭建平台| www.2836.cn-用你ip帮我玩彩票| www.188494.com-全发彩票网站| www.289606.com-快三有赚钱的吗| www.858678.com-凤皇购彩平台app| www.920052.com-摇彩票app-| www.np52.com-彩票模拟器开奖| www.9991.mobi-进口彩妆代理商| www.941377.com-体彩销售话术| www.fi76.com-二分快三全天计划| www.k45.pw-七天彩票网可信吗| www.903326.com-上海彩票网-| www.358214.com-新浪足彩竞猜网| www.462671.com-彩票的各种漏洞| www.552806.com-1号彩票网下载| www.99110.com-爱彩乐内蒙11选五| www.100308.com-乐彩网为啥打不开| www.179670.com-体彩卩3走势图| www.289975.com-福利彩票3d怎么玩| www.356102.com-体彩11选5宣传语| www.447992.com-合伙微信买彩票中奖| www.591912.com-胜利彩票赠送礼金| www.673127.com-福彩夏天-| www.740064.com-安徽快三快赢网预测| www.802460.com-时时彩幸运飞艇| www.869526.com-幸运彩票提现| www.975027.com-七星彩长条最新图片| www.cai8433.com福彩开奖-| www.sn46.com-时时彩固定6码胆| www.653.net-腾讯分分彩经验贴| www.365841.cc-渐变花朵彩铅片| www.472669.com-彩乐园网站是什么| www.561455.com-中彩在线最新消息| www.637032.com-彩虹5无人攻击机| www.718151.com-8亿彩是骗人的吗| www.785097.com-乐迎彩票怎么样| www.878653.com-有彩神通代理会员吗| www.957805.com-彩票快乐十分走势图| 500彩票网www.903559.com| www.0070.top-双色500彩票| www.9240.com-彩票培训师严玉进| www.ml98.com-安徽快三分布走势| www.5899.bid-忆彩票可靠吗| www.131483.com-古交彩礼价目表| www.812418.com-老件足彩博客| www.962269.com-彩神vii注册| www.6ss.cc-网购彩票解禁| www.116370.com-尤师彩票预测| www.223126.com-福彩3d跨度预测| www.335928.com-体彩怎样选号| www.257759.com-星彩新星彩福星中彩| www.370480.com-怎样看走势图买彩票| www.468366.com-彩88彩票授渔看彩| www.34487.com-彩88篮球彩票专家| www.846963.com-网购买竞彩-| www.939506.com-靠谱的玩彩平台| www.981414.com-网易竞彩推荐| www.82uo.com-竞彩之家论坛| www.257075.com-吉林爱彩乐官网| www.956981.com-hk彩网-| www.997217.com-足彩任九比分直播| www.fu9.cc-福彩时时彩开奖结果| www.nf24.com-彩票大赢家app| www.00lv.com-彩虹秒赞美化| www.56av.com-西安三彩服饰专卖店| www.0630.vip-双色球颖彩-| www.5190.com-爱彩乐咋看-| www.521545.com-燕郊彩票站转让信息| www.992623.com-喜乐彩网址-| www.393016.com-古风眼睛彩铅画| www.bs36.com-彩票过滤软件有用吗| www.400385.com-竞彩足球最新分析| www.320689.com-彩站专用电视走势图| www.383384.com-彩票选购-| www.468133.com-福彩石家庄市行唐县| www.571056.com-彩票之家大全| www.672393.com-吉林人玩彩3d胆码| www.770124.com-彩票743好彩| www.872987.com-快三直选一注预测| www.962649.com-彩票平台银河| www.cp6879.com-安微福利彩票| www.0476.cn-快三上网导航| www.022987.com-p3彩吧助手-| www.219542.com-山西省体彩快乐十分| www.844767.com-福彩用途-| www.892532.com-彩帝彩票ios|