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.096031.com-港彩免费资料大全| www.9048.biz-头彩app安卓| www.8985.top-天津体彩开奖| www.kz06.com-万博彩票手机app| www.29qw.com-水彩星空鹿图片| www.650536.com-小班彩虹伞的玩法| www.904744.com-免费买彩票-| www.979958.com-彩票吃票行为| www.01611.com-足彩推荐靠谱的软件| www.62285.cc-彩票网大赢家| www.660580.com-陕西体彩新11选5| www.807185.com-温州市体育彩票店| www.66fg.com-七乐彩单式玩法| www.4619.top-体彩中奖超过1万| www.713195.com-体彩大乐投开奖时间| 购彩之家www.gczj7.com| www.749301.com-彩票吃票有人管吗| www.81111.cc-福彩3d猜谜第四版| www.739082.com-彩神通破解版| www.cp8388.com-天天快三是合法的吗| www.7676.cm-福利彩票店面| www.xc15.com-彩票中奖号码双色球| www.1074.org-邯郸体育彩票站点| www.278835.com-快三秒奶茶经营模式| www.452395.com-七乐彩选号精准技巧| www.590060.com-竞彩官方赔率| www.698078.com-杭州市体彩中心地址| www.362347.com-合乐彩票怎么样| www.c34.cn-彩民福地登录| www.374904.com-七星彩头尾规律软件| www.96os.com-百度彩票还能用吗| www.76ig.com-宏盛彩票软件官网| www.5742.xyz-体彩号码怎么选号| www.23351.cc-彩票端口-| www.037015.com-彩票中奖内部人买| www.035322.com-至尊争霸彩票a| www.71rv.com-体彩七位数去哪兑奖| www.1878.link-2020彩网吧-| www.1105.com-在手机上怎么买足彩| www.33394.cc-排列三新彩吧推荐| www.97153.com-网彩何时能重启| www.077377.com-高频彩种类-| www.507361.com-3g彩票网址大全| www.589132.com-310彩票网-| www.679761.com-3d彩神通-| www.782561.com-七星彩南国彩票头尾| www.866093.com-手机怎么买足球彩票| www.232467.com-体彩足球玩法介绍| www.66219.com-千禧彩票导航页| www.044481.com-福彩江苏-| www.129765.com-买彩票守号-| www.199500.com-湖北福利彩票| www.976429.com-昆明彩票中奖| www.cp1178.com-内蒙快三一定牛推荐| www.617558.com-7号彩票下载安装| www.700818.com-首充送彩金套利| www.771994.com-东方彩票注册送47| www.838296.com-成都彩钢围挡租赁| www.899216.com-七星彩票彩种| www.964760.com-时时彩万能49规律| 9号彩票www.80767a.com| www.1722.cn-掌上赢彩官网| www.884781.com-购彩网入口-| www.980694.com-利彩平台软件| www.na1.cc-七天彩-| www.py38.com-518彩票登陆| www.03ga.com-风之彩app-| www.578997.com-360彩票全国开| www.329327.com-湖北福利彩票中心| www.903459.com-赢彩吧app主页| www.977847.com-下彩网是正规的| www.ag39.cc-快三最大遗漏号码| www.63fl.com-彩票预测平台合法吗| www.9109.vip-这期七星彩出什么奖| www.254961.com-易购彩票-| www.925884.com-爱乐透手机彩票门户| www.994368.com-微彩在线是骗局吗| www.em05.com-快彩拉人有什么原因| www.vl26.com-分分快三时时计划| www.42ml.com-湖南福彩数字3| www.2412.top-时时彩定位五码公式| www.05533.com-深圳快乐彩奖金| www.198186.com-买贵州快三开奖结果| www.338042.com-绍兴彩民中奖| www.962504.com-今日彩圣字谜汇总| www.cai5855.com彩票开奖河南快三| www.643163.com-乐彩33破解-| www.080691.com-吉林省体彩11远5| www.803581.com-掌中彩官方投注| www.n91.net-年会送员工彩票| www.87720.com-腾讯三分彩官网| www.069600.com-神彩网高手榜| www.126669.com-快三游戏中奖规则| www.186909.com-7星彩中几个号有奖| www.530416.cc-福利彩票双色球图标| www.642299.com-3d福彩标志-| www.121831.com-宁夏省福彩中心地址| www.318649.com-刷彩票赚佣金的平台| www.551185.com-怎样玩转内蒙古福彩| www.638038.com-竞彩店倒闭了| www.721077.com-体彩合买跟单| www.429699.com-创意水彩画动物图片| www.539046.com-乐盈彩app官网| www.624911.com-uu彩票网可信吗| www.767864.com-彩票分析预测大乐透| www.847723.com-体彩店招聘-| www.921398.com-中国合法网上彩票网| 3G彩票www.c132.vip| www.fp16.com-燕赵福彩快三| www.200056.cc-福彩开奖是多少| www.93348.com-竞彩怎么看冷门| www.936071.com-湖北快三跨度遗漏表| 彩票控www.7777hv.com| www.pj49.com-河南农村天价彩礼| www.00xx.com-美丽的彩虹像什么| www.526272.com-3d可以网上购彩吗| www.934649.com-彩70官网-| www.7279.top-满堂彩官方网登录| E彩堂www.9818o.cc| www.9390.biz-彩票三地二十四期| www.605732.com-吉祥彩05005| www.121451.com-588彩票网官方| www.22466.com-e彩堂买彩票靠谱吗| www.89456.com-三分时时彩出号规律| www.088554.com-众盈娱乐五分快三| www.090131.com-广西福利彩票网官网| www.14yp.com-河南福利幸运彩| www.164208.com-乐优彩票官网| www.507767.com-竞彩的返奖率是多少| www.878554.com-赛车彩票是骗局吗| QQ彩票www.89894m.com| www.892997.com-快三的玩法和规则| www.953352.com-江苏快三单双计划网| www.987834.com-福彩30选5走势| www.pj2.com-新手买彩票怎么买| www.wr01.com-福彩手机购彩软件| www.01808.cc-彩虹六号搞笑名字| www.3526.cc-i8cp彩票线路| www.713515.com-购买体育彩票的软件| www.783411.com-22彩票平台跑了| www.846343.com-民政部长和福利彩票| www.901601.com-手机黑彩快三| www.955246.com-爱彩必中-| www.994069.com-9928彩票-| www.ac1.cc-河南快三预测号码| www.mk85.com-快乐彩介绍-| www.3649.cn-七乐彩带坐标走势图| www.01844.com-老公总是玩彩票| www.44740.com-福利三分彩有规律| www.577178.com-箭牌彩虹糖有几款| www.659407.com-彩票开p62-| www.735261.com-初玩彩票怎么玩| www.837654.com-竞彩足球滚球怎么玩| www.930554.com-七星彩梦兆查询| www.978741.com-河南省福彩发行中心| www.cai989.cc-快三最大网站| www.067810.com-福彩一笕表图| www.661922.com-竞彩八串大奖| www.773724.com-快3彩票过滤软件| www.874212.com-免费搭建彩票平台| www.5dk.com-稳赚不赔的彩票计划| www.45uw.com-新足彩吧百度贴吧| www.829829.com-耀州彩票店转让信息| www.935256.com-166彩票苹果版|