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.599613.com-彩票只能在实体店买| www.731645.com-湖北快三和值跨度| www.813757.com-海南快三真的假的| www.890549.com-足球彩票神人| www.963003.com-彩铅画山水图片大全| 彩票5www.648148.com| www.077671.com-桃彩骗局-| www.487434.com-趋势王彩票推荐| www.617677.com-高额彩礼图片| www.717985.cc-中国体彩报左木预测| www.859203.com-体彩排三开奖号查询| www.985874.com-注册免费领彩金| www.16qs.com-万盛彩票主页| www.58509.com-苹果彩票是不是真的| www.236356.com-北京彩票快3开奖| www.603947.com-u信彩票-| www.749039.com-中彩网为何提不出款| www.874484.com-老杜说彩票-| www.076777.com-彩票数字是多少组| www.181777.com-内蒙快三爱彩乐网站| www.259550.com-大乐透走图彩吧助手| www.349799.com-人们是否应该买彩票| www.453653.com-竞彩足球258比分| www.560087.com-民政部福彩作弊案| www.16164.cc-江苏体彩中心主任| www.gk92.com-体彩排列三、众彩网| www.14cs.com-彩金宏辉漏洞| www.3220.cc-在手机上可以玩彩吗| www.119719.com-即开彩app官网| www.b78.net-抚州中彩票-| www.0378.cn-96彩票苹果-| www.9138.in-网上代竞彩体育| www.72261.com-中国福利彩票图片| www.066052.com-福利彩票代理怎么开| www.177525.com-分分快三骗局| www.16110.com-彩票稳赢计划| www.96241.com-福彩千亿案件| www.125072.com-u9彩票网站靠谱吗| www.603888.cc-全民彩票旧版首页| www.380101.cc-奥客彩票手机网| www.1235.vip-查询吹吹七星彩论坛| www.23420.com-四季彩登录平台| www.4837.org-福彩快三3保本技巧| www.4883.biz-信彩黑平台曝光| www.532846.com-7星彩复式玩法介绍| www.937038.com-福星彩是什么| www.93bp.com-生日送彩票的评论| www.60076.com-福体彩票开奖号| www.187597.com-内蒙古五星时时彩| www.06fa.com-3g彩票网地址| www.72068.com-快餐彩票-| www.583057.com-福利彩票购买网站| www.770937.com-七彩阳光广播操教案| www.907728.com-七乐彩中奖规则图片| 全民汇彩票www.52303q.com| www.658036.com-微信群买彩票赚钱| www.809038.com-竟彩足彩500比分| www.919826.com-真彩票纸打高仿彩票| 聚彩网www.290282.com| www.8fj.cc-幸运彩票可靠吗| www.78157.com-3d中彩涂迷-| www.087481.com-快三和值有猫腻么| www.225329.com-福彩快三的规律| www.89483.com-元角分的彩票平台| www.570949.com-钟嘉欣好彩妹图片| www.70841.com-境外黑彩犯法吗| www.033800.com-如意彩票是不是合法| www.131553.com-2019安阳彩礼| www.224470.com-1加彩票-| 快彩在线www.2632o.com| www.ep77.com-快彩害了多少人| www.u16.bid-江苏快乐彩-| www.42rg.com-福州彩钢围挡| www.293995.com-幸运快三实时计划| 快彩www.81678t.com| www.7828.cc-竞彩高手经验谈| www.78673.cc-香港天天彩票246| www.097821.com-福彩机转让信息| www.ww09.com-送彩金的赌博平台| www.352.website双色球中彩网论坛| www.15651.cc-彩铅画画-| www.48815.com-2分时时彩-| www.xv59.com-被澳发彩票黑钱| www.89sl.com-龙江体彩快十分开奖| www.377358.cc-正规qq彩票-| www.tr4.com-贵州快3开奖爱彩乐| www.088074.com-发财网彩票-| www.901998.com-福彩3d黑彩倍率| www.966145.com-发彩网是怎么赚钱的| www.um2.cc-123彩票开奖网| www.667225.com-新加坡彩票在哪里买| www.615371.com-福利彩票真会中奖吗| www.802156.com-彩谜天地联销图下载| www.995.win-三彩彩票官网网址| www.092058.com-百信彩票bx11| www.680982.com-七星彩能赚钱吗| www.u92.org-1240中华彩票网| www.76uz.com-彩票中奖方法和技巧| www.5217.xyz-派彩的正负什么意思| www.16221.com-宾果彩票-| www.85vh.com-彩66平台-| www.2341.vip-三分时时彩精准计划| www.28851.com-利用体彩结果赌博| www.99705.cc-中国体彩直播开奖| www.117461.com-体彩下载哪个软件好| www.332014.com-免费下载人人中彩票| www.433528.com-中彩票的方法有哪些| www.546528.com-体育彩票申请范本| www.610963.com-彩69app-| www.674146.com-彩票走势图开奖公告| www.733209.com-江苏体彩大乐透网| www.60730.com-完美彩票官方网下载| www.286428.com-玩彩的胆神独胆| www.2837.pw-好彩头平台官网| www.518172.com-牛彩彩票软件下载| www.701663.com-我就想开彩票店| www.834959.com-焕彩-| www.967472.com-体彩快乐双彩走势图| www.394022.com-分分彩数据哪里来的| www.137704.com-亚洲彩票是真的吗| 大赢家彩票平台www.183572.com| www.251371.com-2020彩票网-| www.387627.com-彩票没中奖表情| www.855064.com-微讯彩票app| www.cp347.com-快三代理怎么挣钱| www.683.red-时时彩什么平台好| www.9394.biz-高频彩种服务好| www.828044.com-中体彩大乐透走势图| www.908107.com-守七星彩领奖视频| www.965342.com-uu购彩无法提现| 新盈彩www.xinyc3.com| www.lg84.com-红彩网安卓-| www.h77.org-快三算和值-| www.38hb.com-七星彩怎样拖| www.2344.vip-时时彩幸运28计划| www.505403.com-快乐88彩票-| www.55eb.com-933彩票怎么样| www.110489.com-66彩票65616| www.400319.com-特区网七星彩票论坛| www.310201.com-亿网彩票源码| www.669978.com-狂想p3彩票字谜| www.813634.com-宁夏体彩网点| www.909161.com-七星彩玩发-| www.992309.com-3d福彩预测-| www.lu84.com-腾讯时时彩怎么玩法| www.88ys.cc-精彩十分选号技巧| www.202237.com-福彩双色球开奖| www.131.xyz-夸女孩子彩虹屁语录| www.6778.cm-幸运彩票靠谱吗| www.66812.cc-领取彩票-| www.046622.com-义乌福彩加盟电话| www.570010.com-凤凰彩票线路检测| www.654664.com-大彩色打印机| www.730576.com-老梁揭秘彩票的秘密| www.816447.com-福彩pk10投注| www.890405.com-手机上下载全民彩票| www.943848.com-703彩票最新版| 中彩网www.91233w.com| www.34573.com-彩迷网在哪里找| www.023718.com-彩专家网址-| www.080887.com-润联大吉新3d彩票| www.153572.com-k彩彩民福地| www.211211.cc-福利彩票三选三怎玩| www.235837.com-足彩直播-|