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.160802.com-七星彩资料早版牛爹| www.828925.com-做梦梦到自己中彩票| www.907684.com-合肥体彩领奖地址| www.0rp.com-菊花彩铅手绘图片| www.1949.vip-保时捷彩票平台| www.188743.com-快三两个数有钱吗| www.g45.com-七星彩头尾开奖结果| www.639.in-福彩三d同期号| www.9435.vip-欢乐彩票官网诈骗| www.69as.com-金冠彩票下载平台| www.5891.wang-福彩发号中心| www.766975.com-2017竞彩普及日| www.8511.cn-时时彩怎样赢钱| www.1560.vip-甘肃陇彩宝-| www.354511.com-福彩新彩网字谜| www.914518.com-网赌彩票漏洞赚钱| www.993844.com-足彩14场玩法介绍| www.mi17.com-好彩投下载-| www.23fo.com-132彩票手机最新| www.385084.com-彩票中一等奖机选| www.578615.com-青海体彩一等奖| www.677202.com-临沂彩色胶片| www.773848.com-王雷中谈国外竞彩| www.848038.com-彩票怎么看几等奖| www.916521.com-博彩黑吃黑-| www.977371.com-世界杯足彩哪里买| www.425900.cc-赢彩彩票软件| www.41uk.com-老盘任九唯彩会官网| www.03788.cc-到底应不应该买彩票| www.954178.com-w彩注册-| www.ad38.com-安徽体彩中心地址| 大赢家彩票平台www.781217.com| www.280239.com-足彩胜负14场开奖| www.6404.org-彩票33安卓| www.355729.com-竞彩奖金个税| www.454233.com-足球竞彩网258| www.558771.com-七色彩虹寓意是什么| www.383383.com-自制选号彩票app| www.873963.com-贵阳福彩网上申请| www.944471.com-福彩是骗局-| 亿彩www.6832l.com| www.fn98.com-富贵彩票下载手机版| www.wo91.com-怎么从走势看彩票| www.355133.com-福彩3d怎么看走势| www.710850.com-体育彩票新浪走势图| www.ak3.com-福彩3d开机号| www.660545.com-彩票出码分析仪| www.910321.com-百度乐和彩网| www.804396.com-山西彩票网上买| www.906638.com-福利彩票能选哪些号| 天际彩票www.tj92.com| www.292877.com-3d新彩网总汇| www.69eg.com-南海七星彩论坛图规| www.8885.cm-足彩庄家永远赚钱| www.070696.com-河南商丘彩礼多少钱| www.03550.com-七星彩可以赚钱吗| www.599815.com-彩票超过一万兑奖| www.219235.com-百盈共享彩票大全| www.744134.com-福彩抽奖活动| www.926833.com-达人彩票合法| www.vx49.com-快三全骰-| www.369422.com-旧版一定牛彩票| www.635908.com-下载手机天天中彩吧| www.634871.com-建盏出彩图片| www.96594.com-彩票手机做号软件| www.186318.com-内蒙快三走势图下载| www.098842.com-福彩包括哪些| www.23.win-国家即将对黑彩开刀| www.37gd.com-dd彩票平台真假| www.3613.org-福彩七乐彩中奖情况| www.39183.cc-体彩app购彩| www.7154.cc-穆棱七彩影城影讯| www.308756.com-大乐透彩票号多吗| www.688998.cc-上海体彩网官网下载| www.810508.com-博乐彩票骗局模式| www.923078.com-网易天天爱彩票| 全民汇彩票www.52303b.com| www.043259.com-玩彩票app安卓| www.07173.com-中国福利彩购买软件| www.5750.cc-体彩七位数投注技巧| www.129001.com-福利彩票分分彩| www.oj44.com-吉林市福彩-| www.0112.cc-彩票方面-| www.6020.vip-福利彩票在线购买| www.017158.com-青海快三号码分析表| www.07ku.com-体育彩票摇奖机| www.65278.com-广东好彩一开奖号码| www.9995.cn-多彩办公大师| www.701551.com-五亿彩票网是哪里的| www.141004.com-99彩票合不合法| www.5679.cn-安徽大乐透福利彩票| www.105695.com-时时彩中彩票软件| www.221185.com-uu快三下载-| www.837608.com-福彩3开机号试机号| www.910345.com-百度乐彩登陆| www.972475.com-优彩彩票手机版下载| www.ql1.cc-大发快三提前开奖| www.229021.com-我要买体彩-| www.336368.com-提现正常的彩票网站| www.490517.com-网彩吃大赔小| www.238702.com-遇到彩票托还赚了| www.34374.com-招商银行彩票| www.717849.com-彩民周刊编辑组专家| www.833922.com-好彩36好彩3包串| www.915622.com-购彩网骗局揭秘| www.975089.com-福彩2元刮刮乐下载| www.dp67.com-快三追号欠下巨款| www.uc24.com-内蒙古体彩中心| www.30tv.com-七彩玫瑰花-| www.9628.top-下载彩易网-| www.767108.com-河北石家庄福彩自助| www.867614.com-七星彩网易开奖| www.931523.com-网投快三是什么| www.977633.com-宝马彩票手机版下载| www.00uj.com-体彩3等奖-| www.975713.com-长葛彩礼一般给多少| 金冠彩票www.49956l.com| www.jz83.com-常州彩票中奖新闻| www.2504.me-幸运鑫福彩3d| www.203204.com-熊猫在线彩票下载| www.285428.com-内蒙古快三跨度表| www.348755.com-打开乐彩网-| www.474847.com-福彩字迷图总会| www.563682.com-柬埔寨彩票客服| www.456831.com-体彩排三图迷| www.02rv.com-雨后彩虹比喻什么| www.75jd.com-足彩单双什么意思| www.126067.com-重庆福彩手机报下载| www.568336.com-微彩店靠谱吗| www.84ls.com-网页玩时时彩被骗| www.666905.com-昆明乐彩写真机| www.795178.com-www.梦想彩票| www.880704.com-代买彩票兼职| www.283697.com-彩票有二位数字的吗| www.926180.com-红中彩票app| www.576982.com-好彩店官方app| www.53ln.com-福彩高频彩是啥| www.4682.vip-吉林快三开奖号| www.365844.cc-七乐彩怎样中奖方法| www.45876.cc-中华福彩app| www.x12.site-时时采彩开奖玩法| www.039515.com-彩票合买系统在哪| www.93798.cc-竞彩论坛哪个好| www.ll4.com-网上买快三输了钱| www.nh51.com-彩票大app大全| www.844684.com-彩票下面的码是什么| www.31wd.com-中国十大彩宝| www.2003.vip-易彩亿-| www.736712.com-浦东体育彩票中心| www.80nf.com-盛世彩票是骗局吗| www.707723.com-快3彩票助手| www.770555.com-七彩连锁酒店官网| www.406218.com-代理彩票赚钱容易吗| 凤凰彩票www.66652f.com| www.95132.com-明哥足彩-| www.131665.com-体彩总对总-| www.138.mobi-彩虹屁素材-| www.972720.com-彩虹六号经典语录| www.974692.com-彩票大的网址大全| www.cp8898.cc-北京快三预测号| www.a72.org-中国福彩官网首页| www.ng27.com-竞彩足球彩客网| www.688388.com-重庆福彩网输了| www.711735.com-彩礼钱开到100万|