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.998365.com-清乾隆多种釉彩大瓶| www.lv85.com-足彩app-| www.ks97.com-彩票分析师大赛| www.191091.com-甘肃省快三开奖遗漏| www.689051.com-天天彩票助手官网| www.259397.com-体彩选号app下载| www.391199.com-163彩票网页版| www.45kb.com-时彩选号软件| www.1488.vip-彩虹寓意着什么| www.303526.com-甘肃省福彩中心| www.415629.com-uc彩票正规吗| www.75ru.com-六开彩怎怎么玩| www.1723.vip-彩神平刷怎么样| www.198404.com-大发快三先赢后输| www.299777.cc-内蒙古快三49、期| www.677640.com-g06hcom彩库| www.77022.cc-彩票分析大师客服| www.48882.cc-幸运时时彩哪里的| www.015854.com-鸿运彩票是骗局么| www.108589.com-新彩吧手机版| www.183520.com-中彩网-| www.73292.com-彩票炒群怎么炒| www.591801.com-澳彩低于香港马会| www.4224.biz-乐优彩票可靠吗| www.076673.com-双色球彩票是几位数| www.44qv.com-竞彩足球单场倍投| www.3317.net-彩票局势-| www.862388.cc-大乐彩今天开奖| www.974107.com-彩民在线网站| www.ch6.com-北京快三在线开奖| www.992129.com-中国足彩馆踩踏网站| www.ib74.com-1068彩票app| www.w66.biz-app彩票-| 吉利彩票www.80065j.com| 凤凰彩票www.77802o.com| www.87253.com-福彩机器连不上网| www.923018.com-11选5彩票网| www.992768.com-杨震胜负彩推介| www.bc34.com-江苏快三走势跨度图| www.wk10.com-体彩屋靠谱吗| 中彩网www.81233w.com| www.691281.com-青海福彩3d微信群| www.930833.com-体彩竞彩兑奖规则| www.799.cn-台湾今彩539开奖| www.5321.me-今晚7星彩开奖号码| www.470775.com-南方双彩网预测下载| www.561532.com-鸿发彩票怎么样| www.641044.com-香港时时三分彩网站| www.754896.com-白莱网送彩金| www.841012.com-噢客彩票网网| www.908089.com-做彩票代理被报警| www.977958.com-彩箱包装-| www.cp7331.com-5分快三群骗局揭秘| www.0043.pw-山东体彩网软件| www.h13.biz-今日七星彩安然预测| www.2113.win-体彩42期-| www.hf13.com-一网彩票下载| www.850445.com-福彩双色球100期| www.920185.com-快三模拟开奖| www.994085.com-中国体育彩票飞鱼彩| www.382441.com-创名彩票兼职| www.uo78.com-内蒙古体彩活动| www.712992.com-福利彩票3d微信群| www.5955.date-附近的体彩店在哪里| www.062397.com-亿发彩票靠谱不| www.980481.com-广西体育彩票杯| www.cs79.com-59彩票app-| www.xq73.com-体彩七星彩走势图2| www.111147.com-竞彩168-| www.9334.cm-cc彩球网怎么开户| www.969577.com-快三购买官方网站| www.944611.com-百万彩票是真的吗吗| www.986797.com-七乐彩预测一注号码| www.wf86.com-北京5分彩开奖纪录| www.365925.cc-国产水溶彩铅品牌| www.4802.top-彩虹六号图标| www.4244.vip-七彩汇娱乐安全么| www.926191.com-七星彩澳客网预测| 奔驰彩票www.781566.com| www.081448.com-彩票中1亿交多少税| www.my04.com-福彩双色球出球顺序| 凤凰彩票www.5091n.com| www.228987.com-好彩烟代购-| www.265002.com-江苏快三统计图表| www.cp9662.com-今日中彩app真假| www.tg04.com-北京快三遗漏查询| www.896408.com-华夏彩票线路检测| www.958645.com-四川省快三-| 8号彩票www.81520m.com| www.843588.com-怎么去彩票局上班| www.902407.com-神州5分彩-| www.972878.com-竞彩足彩彩客网| www.01645.com-最新彩票小诸葛| www.nn99.cc-彩票选号大师| www.24866.cc-彩铅彼岸花怎么画| www.595026.com-双彩论坛客户| www.655920.com-高赔的彩票-| www.728761.com-彩票京东-| www.787556.com-河南福彩河南体彩| www.834247.com-好彩爆珠哪里有卖| www.882111.com-刷彩金平台-| www.969522.com-奖多多的酷彩吧| www.lz89.com-腾讯时时彩官方网站| www.95073.com-彩妆店加盟排行| www.xa58.com-山西快三开奖走势图| www.81cm.com-蚂蚁彩票网-| www.2021.biz-丰大彩票下载| www.001432.com-开门彩下载安装| www.088453.com-吉林快三网络购买| www.166034.com-快三过五什么意思| www.251913.com-cp12彩票-| www.296417.com-福彩快3qq群| www.541898.com-旺彩双色球安卓版| www.618331.com-咸阳市体育彩票| www.682702.com-时时中彩票登录平台| www.793070.com-邢台市福彩中心网站| www.888146.com-福乐彩是骗局吗| www.954406.com-鼎博彩票app下载| www.996146.com-p3家彩网-| www.fg26.com-全能必中快三计划| www.e27.pw-国彩是骗局揭秘| www.51vz.com-彩虹伞游戏的音乐| www.3751.win-吉林福彩快三彩经网| www.06864.com-福利彩票3d计划| www.7926.cc-著名的博彩公司| www.26101.com-羽泉彩虹solo| www.99156.cc-时时彩怎么玩必输| www.210587.com-体彩快乐十分走势图| www.301685.com-全民中彩最新版| www.365365.com-福利彩票直选怎么玩| www.722975.com-常州体彩点分布| www.819478.com-计划彩票网-| www.876763.com-97彩票骗局-| www.982913.com-广西快三开奖详情| www.cai2008.com被快三玩死了| www.h33.tv-七星彩兑奖时间期限| www.73rk.com-体彩种类介绍及图片| www.3233.cc-幸运快三助手下载| www.9874.pw-足彩销量查看| C9999www.318548.com| www.kj70.com-彩尊app-| www.d79.net-123电脑彩票| www.46pk.com-乐透彩票开奖历史| www.038500.com-双色球彩票购彩大厅| www.097043.com-采摘网牛材网彩摘吧| www.0909.online各彩站彩友多二维码| www.6656.in-腾讯分分彩五码二期| www.470.loan-到底有没有彩票托| www.137427.com-竞彩足球九场开奖| www.338463.com-七乐彩下期号码预测| www.425500.cc-豹赢彩票最新版| www.658449.com-彩视怎么做-| www.833515.com-福彩平台网站| 凤凰彩票www.3479z.com| www.122680.com-义乌彩票店转让信息| www.208122.com-五省快三开奖结果| www.725068.com-福彩3d布衣独胆王| www.838051.com-福利3d彩票-| www.923840.com-什么是筛子彩票| www.984038.com-彩九九彩票-| www.007369.com-k彩彩民福地测速| www.088007.com-下载百盈快三| www.153012.com-7乐彩开奖查询| www.963072.com-彩神通4码准不准|