jquery owl实现图文列表自动滚动效果代码

代码语言:html

所属分类:其他

代码描述:jquery owl实现图文列表自动滚动效果代码

代码标签: 图文 列表 自动 滚动 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">


	
	
	
	<!--响应式框架-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
	
	<!--图标库-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--插件css基本库-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.carousel.css">
	
	<style>
		.post-slide{
		    background: #fff;
		    margin: 0 15px;
		    padding:27px 30px;
		    border-bottom: 1px solid #dedde1;
		}
		.post-slide .post-header{
		    margin-bottom: 10px;
		}
		.post-slide .subtitle{
		    color:#0b99bc;
		    font-size:14px;
		    display: inline-block;
		    margin-bottom:5px;
		    text-transform: uppercase;
		    transition: all 0.4s ease 0s;
		}
		.post-slide .subtitle:hover{
		    color:#333;
		    text-decoration: none;
		}
		.post-slide .post-title{
		    margin: 0;
		}
		.post-slide .post-title a{
		    color:#333;
		    font-size:18px;
		    font-weight: bold;
		    text-transform:capitalize;
		    transition: all 0.4s ease 0s;
		}
		.post-slide .post-title a:hover{
		    color:#0b99bc;
		    text-decoration: none;
		}
		.post-slide .pic{
		    overflow: hidden;
		    position: relative;
		}
		.post-slide .pic img{
		    width: 100%;
		    height:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0