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.130789.cc-蚂蚁彩票计划| www.90hm.com-三d彩吧助手| www.078934.com-彩16官网下载地址| www.07yv.com-七彩星txt百度云| www.587755.com-万彩吧网址资料| www.282521.com-时时彩后四9码| www.1280.xyz-佳彩d669-| www.354376.com-福彩新彩网手| www.08967.com-福彩3d群聊微信号| www.26989.cc-彩票搞笑图片大全| www.613610.com-平安线路彩票| www.702909.com-彩客竞彩-| www.773868.com-安徽彩票开奖查询| www.6936.wang-e彩票云博科技| www.22863.cc-湖南中国体彩网| www.44833.com-杭州体彩十一选五| www.044433.com-兰州快彩票开奖| www.552787.com-时彩赚钱专业团队群| www.434555.com-815周彩票-| www.57257.cc-彩77苹果二维码| www.417769.com-盛大彩票下载网址| www.523384.com-喜乐彩票怎么玩法| www.072509.com-湖北快三二同号遗漏| www.940571.com-飞鱼彩票技巧攻略| 金冠彩票www.49956c.com| 中国福利彩票www.3478p.cc| www.jn79.com-腾讯快三是什么| www.886524.com-福彩快3导航| www.54wf.com-南国体彩论坛特区网| www.599873.com-体彩买双色球| www.900028.cc-天天竞彩安卓| www.970395.com-彩票天天乐app| www.lq8.cc-湖北快三奖金规则| www.we26.com-六给彩票香港下载| www.3272.win-福彩问户-| www.15496.com-彩库宝典资料大全| www.479258.com-竞彩佣金百万| www.18820.cc-8亿彩网页登录| www.341763.com-重庆时时彩五星在线| www.557735.com-彩票728安卓| www.434986.com-彩经网前三走势| www.636218.com-彩虹织机织趣网| www.336951.com-买彩票app那个好| www.098291.com-江苏体育彩票e球彩| www.95762.com-澳客足彩超级平台| www.ex44.com-快三追号万能计算器| www.245888.com-体育篮球竞彩网| www.191230.com-彩票走势怎么分析| www.73pf.com-皇冠彩票代理| www.yp41.com-延吉市体育彩票站| www.tj70.cc-乐炫彩票网址| www.935598.com-天天爱彩票红包| www.33590.com-新浪体育彩票网开奖| www.ny93.com-亚洲彩票是不是真的| www.9mf.com-七星彩单式票复式| www.85hi.com-陕西福彩中心电话| www.365892.cc-福彩和值遗漏分析| www.092254.com-福彩双色球福建中奖| www.211753.com-福彩6选3怎么玩| www.321017.com-全民竞彩彩票下载| www.62900.com-彩1彩票下载安装| www.194088.com-极速快三是骗局吗| www.277648.com-手机中福彩票安全吗| www.365394.cc-体彩7码遗漏| www.456376.com-红彩直播盒子哪个好| www.14ml.com-杞县结婚彩礼钱多少| www.74613.com-彩票推荐网-| www.208658.com-石家庄快三开奖结果| www.016606.com-福彩胆拖投注计算| www.112672.com-一分时时彩刷反水| www.823409.com-附近最近的彩票点| www.501837.com-那个软件能买足彩| www.07978.com-长沙体育彩票店| www.86323.cc-三彩女装加盟费| www.53159.cc-彩96下载苹果版| www.79ln.com-彩乐园2官方网站| www.77742.com-彩票软件彩票集团| www.00487.com-手机彩票软件提现| www.0195.cn-99福彩怎么样| www.267767.com-河南农村天价彩礼| www.933379.com-500彩app-| www.bd30.com-喜乐彩票合法吗| www.698803.com-注册华夏彩票| www.790371.com-杏彩官网注册地址| www.868996.com-55彩票是真的假的| www.962524.com-买彩票哪个app好| 福利彩票www.99677l.com| www.823930.com-七星彩卖到几点| www.923591.com-安吉彩票案件判刑| www.981658.com-中国体彩报电子报| www.727356.com-快彩奇迹团队| www.1062.vip-和彩名堂类似的软件| www.875163.com-快乐彩票幸运快3| www.975661.com-重庆时时彩骗局曝光| www.yf6.cc-彩票规则介绍| www.c77.net-五洲彩票app下载| www.44pa.com-红树林彩票网址| www.081204.com-淘金网买足彩骗局| www.902.cm-彩票中3000万| www.8242.xyz-基诺彩的诀u8d| www.47990.com-大玩家彩票下载| 天天彩票www.7782a.com| www.ee11.com-分分彩最牛回本技巧| www.cp431.com-吉林快三官网代理| www.280022.com-大发快三系统破解版| www.155154.com-388迎新彩金| www.252026.com-旺彩软件下载| www.949241.com-湖北快三网络购买| www.172675.com-快三平台靠什么赚钱| www.299227.com-福彩兑奖地点| www.397645.com-春节体彩上班时间| www.539201.com-时时彩如何看跨度| www.605699.com-梦见鸡彩票号码| www.669553.com-时时彩大数定律| www.4724.org-黑彩提现不了怎么办| www.486609.com-呼市福彩在线游戏| www.682326.com-河北省彩票开奖| www.408333.com-中国体彩票大乐透| www.536957.com-彩票有哪几类| www.615150.com-央视报道彩票新闻| www.7079.cn-汇彩网是黑平台吗| www.23158.com-购买体育彩票的软件| www.ub73.com-彩票开奖查询123| www.5540.live-彩票全计划稳定| www.22952.com-中彩那天教学设计| www.731439.com-代玩彩票兼职赚钱| www.792303.com-彩票店领奖额度| www.867918.com-南国彩票七星彩论| www.927540.com-世界杯买体彩| www.977797.com-七星彩上十期开奖| www.cp850.com-河南快三投注平台| 必发彩票www.8970.com| www.82tl.com-vb彩票程序设计| www.73cq.com-中国福利彩票赛车| www.85258.com-排列三开机号利彩网| www.183889.com-快三预测号码今天| www.367777.com-花间美人古风彩铅画| www.185375.com-彩票咋选号-| www.301584.com-福彩3d谜语大全| www.440999.com-复式体育彩票计算| www.548093.com-三三娱乐彩票平台| www.625293.com-九龙彩票909cc| www.717677.com-广东省体彩兑奖地址| www.809074.com-中博彩票-| www.873639.com-彩票计划源码| www.931606.com-体彩19047期| www.977816.com-足彩去哪买-| 500彩票www.602471.com| www.878147.com-彩票网站哪个靠谱| www.948851.com-七乐彩守号能否中奖| www.994859.com-重庆实时彩开奖记录| www.vs1.cc-七星彩专家预测推荐| www.788256.com-福彩现场直播新浪| www.44810.com-百信彩票-| www.73wz.com-彩票3d号码分布图| www.019241.com-瑞彩祥云平台优化站| www.369311.com-福彩六十一开奖查询| www.553608.com-竞彩足球比赛延期| www.097156.com-广西南宁快三| www.892540.com-全民彩官网下载安装| www.80kt.com-彩票网哪家最靠谱| www.788132.com-新浪足彩开奖| www.cai1955.com北京快三开奖直播| www.864765.com-305彩票app-|