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: auto; transform: rotate(0deg) scale(1,1); transition: all 0.9s ease 0s; } .post-slide:hover img{ transform: rotate(-2deg) scale(1.1,1.1); } .post-slide .pic:after{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(255,255,255,0); transition: all 0.9s ease 0s; } .post-slide:hover .pic:after{ background: rgba(255,255,255,0.2); } .post-slide .post-bar{ list-style: none; padding:12px 0; margin: 0; } .post-slide .post-bar li{ display: inline-block; margin-right:3px; color:#aaa; } .post-slide .post-bar li:last-child{ margin-right: 0; } .post-slide .post-bar li a{ color:#aaa; transition:0.3s ease; } .post-slide .post-bar li a:hover{ text-decoration: none; color:#0b99bc; } .post-slide .post-description{ font-size: 14px; line-height: 24px; margin-bottom:15px; color:#767676; } .post-slide .read-more{ color:#0b99bc; font-size: 14px; font-style: italic; text-transform: capitalize; } .post-slide .read-more:hover{ color:#333; text-decoration:none; } @media only screen and (max-width: 479px) { .post-slide{ padding: 15px; } .post-slide .post-bar li{ margin-bottom: 5px; } .post-slide .post-bar li:last-child{ margin-bottom: 0; } } </style> </head> <body> <div class="demo" style="background: #f7f8fa;"> <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-header"> <a href="#" class="subtitle">Lorem ipsum</a> <h3 class="post-title"><a href="#">Latest News Post</a></h3> </div> <div class="pic"> <img src="//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt=""/> </div> <ul class="post-bar"> <li><i class="fa fa-users"></i> <a href="#">Admin</a></li> <li><i class="fa fa-clock-o"></i> March 5,2016</li> <li><i class="fa fa-comments"></i> <a href="#">2 Comment</a></li> </ul> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nulla eu massa efficitur, eu hendrerit ipsum efficitur. Morbi vitae velit ac. </p> <a href="#" class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0