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.644337.com-肖立刚推荐福彩3d| www.0853.cm-宝发彩票存在吗| www.879324.com-中国福利彩票一定牛| www.971715.com-玩彩票手机软件| www.rf38.com-彩票任三-| www.75ra.com-好彩店彩票软件下载| www.89dw.cc-打私彩什么罪| www.6434.com-彩票平台话术| www.55020.com-足彩比分胜负彩| www.053663.com-分析足彩收费违法吗| www.77910.com-网上买快三规律| www.093883.com-中国彩票造假| www.33739.cc-新快报彩票-| www.ul1.com-彩计划app-| www.765191.com-足彩怎么玩求详解| www.18336.com-竞彩足球跟单广告语| www.pq20.com-网易彩民彩票| www.236688.com-足球竞彩推荐预测| www.369451.com-福建省彩票网| www.520394.com-奖多多安全购彩页面| www.654484.com-全国福利彩票销售额| www.555499.com-3位数彩票-| www.297981.com-七星彩现场直播开奖| www.655674.com-官方彩票pcc蛋蛋| www.829227.com-怎么下载彩聊| www.989859.com-u9彩票网站是多少| www.qp68.com-快三号码表图片| www.0754.win-星宇购彩官方网站| www.37208.com-金山彩票安卓| www.039610.com-京东快彩多少年了| www.203204.com-熊猫在线彩票下载| www.338314.com-中山市福利彩票转让| www.523982.com-正版香港论坛彩票| www.715648.com-中国快三香港站| www.888999.com-百乐彩下载-| www.cai9766.com广西快三助手下载| www.y59.cc-彩票走势分析教程| www.181.pw-初二彩铅画动漫人物| www.271079.com-新加坡版好彩双爆珠| www.6241.pw-台湾威力彩开奖结果| www.887723.com-全国靠谱的彩票平台| www.cp2.wang-分分快三预测| www.08gy.com-七星彩番外小馒头| www.3108.vip-疯狂赛车是哪个彩票| www.134985.com-刷彩金是真的吗| www.9314.loan-香港有赛马彩票| www.312810.com-福彩3d杀码-| www.4782.cn-彩客竞彩彩票安卓版| www.019225.com-复式彩票多少钱| www.034994.com-福建快三一定牛遗漏| www.255955.com-休闲快三慢动作| www.g13.com-海南有什么彩| www.167.biz-彩票助赢网-| www.046662.com-福利彩票店豪华装修| www.273851.com-手机如何买彩票| www.gu03.com-梦想彩票登陆| www.6743.vip-福利彩票怎么网上买| www.083606.com-今日双色球彩票指南| www.760061.com-彩31彩票官方网址| www.957586.com-爱彩乐开奖结果查询| www.576509.com-可乐的彩票专栏| www.263251.com-3d新彩吧预测汇总| www.859457.com-七乐彩单式开奖规则| www.657752.com-网上彩运来app| www.62qk.com-天天中彩票实名不了| www.b08.cc-永利彩票官方网站| www.70ah.com-体彩481害人| www.3014.cc-安徽快三有多少组合| www.022498.com-今天买彩票能中奖吗| www.130534.com-体彩七星彩预测号码| www.136434.com-开户送彩金的网站| www.445593.com-牛彩3d布衣天下| www.gj16.com-北京福彩快3一定牛| www.823.cc-六开彩开奖直播现场| www.366344.com-国产彩电排名| www.797208.com-凤凤彩票-| www.524493.com-买黑彩违法吗| www.880579.com-快三推算图怎么看| www.9172.biz-海南七星彩万字表图| www.026450.com-今天3d天天彩图| www.354800.com-怎么样才能中奖彩票| www.692168.com-彩播是啥意思| www.839019.com-江苏快三能赢钱吗| www.8205.cc-徐州福利彩票| www.062888.cc-开彩票-| www.263616.com-菲律宾博彩不要去做| www.762368.com-87彩票客户端下载| www.194653.com-浙江福彩导航| www.772946.com-彩68官网下载| www.538379.com-百度彩票还可以买吗| www.811887.com-七星彩彩版专区| www.93369.cc-山东彩友沙龙怎么了| www.602433.com-福利彩票双色球胆拖| www.mk6.com-彩票快3网站| www.p20.club-微博彩票关闭了| www.4461.com-亚洲彩票网站是真的| www.231661.com-快三开奖所有号码| www.406676.com-18147期足彩| www.569078.com-两元怎样买彩票| www.775586.com-365彩票数据平台| www.907993.com-彩票预测网站源码| www.rv74.com-中彩网双色球手机版| www.872219.com-都匀福彩中心在哪里| www.e99.space-体彩金七乐下载| www.3134.cm-今天的体彩排三预测| www.55408.cc-做时时彩犯法吗| www.110523.com-美国强力球彩票| 网易彩票www.067wy.com| www.270792.com-好彩绿蓝双爆珠| www.6993.biz-吉林快三彩经网开将| www.57093.com-福彩3d藏机图字迷| www.ba4.com-快三三军怎么算中奖| www.083.site-秒速时时彩规律| www.36dn.com-彩票奖号能算出来| www.7848.xyz-排列3彩民分析| www.61064.com-彩吧vip输惨了| www.347005.com-七乐彩和值尾数杀号| www.582616.com-四场进球彩开奖结果| www.ec77.com-248彩票app-| www.30xx.com-中国福利开彩结果| www.291.in-七星彩去哪里买| www.127016.com-彩铅画景图片| www.262642.com-河北快三开奖走跨度| www.679629.com-太阳彩票app下载| www.865352.com-分分彩开奖记录软件| www.341206.com-沧州体彩网-| www.494808.com-浙江快乐彩票12先| www.638558.com-中国竞彩门店| www.620082.com-彩礼新规定是真的吗| www.910361.com-快三下期和值的公式| www.14293.com-福建体彩即乐彩方法| www.92541.com-l立彩-| www.tx8.com-易彩彩民福地登录| www.845813.com-699彩票安卓版| www.439369.com-广西彩票地图| www.687557.com-加微信、拉人玩彩票| www.ma02.com-一分快三软件| www.453656.com-江苏老快三推荐| www.803755.com-山西体彩11选5图| www.ep1.com-分分时时彩龙虎| www.14498.com-七星彩有胆拖玩法吗| www.63793.cc-快乐彩复式奖励| www.70442.com-顶尖彩票如何提现| www.092031.com-百万彩票赚钱套路| www.200696.com-昨晚彩票开什么号| www.376762.com-河南福利幸运彩| www.543468.com-3d三版彩报-| www.688972.com-专业玩彩胡-| www.922277.com-约彩彩票官方网站| www.ft87.com-福彩兼职是真的吗| www.261102.com-竞彩倍投计划表格| www.912391.com-可靠的购彩app| www.987908.com-大赢家幸运快三| www.251273.com-彩票讨论app| www.881579.com-苹果手机博彩app| www.14wj.com-福彩开奖和值| www.759669.com-五福彩票通用版网站| www.cai3688.com快3彩票官网下载| www.882309.com-广西快三计划app| www.952059.com-103彩票-| 大赢家彩票网www.178311.com| www.b78.com-时时彩后三有多少注| www.34dt.com-原生彩票app源码| www.864232.com-178彩票下载|