jquery flexslider实现一个图文幻灯片效果代码-html代码-BFW代码库

jquery flexslider实现一个图文幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery flexslider实现一个图文幻灯片效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/flexslider-min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
        body {
        		background: #eee;
        }
        
        .flexslider {
        		width: 100%;
        		margin: 0 auto;
        		box-shadow: none;
        }
        
        .flexslider li {
        		position: relative;
        }
        
        .flexslider li .meta {
        		position: absolute;
        		bottom: 20px;
        		left: 20px;
        		color: white;
        		display: flex;
        		flex-direction: column;
        		justify-content: flex-start;
        		align-items: flex-start;
        		font-family: 'Roboto', sans-serif;
        }
        
        .flexslider li h1 {
        		background: rgba(51, 51, 51, 0.5);
        		padding: 12px 18px 12px;
        		margin-bottom: 0;
        		font-size: 1.8em;
        		font-weight: 300;
        }
        
        .flexslider li h2 {
        		background: rgba(51, 51, 51, 0.5);
        		padding: 13px 18px 11px;
        		font-size: 1.1em;
        		margin-bottom: 0;
        		font-weight: 300;
        }
        
        .flexslider li .category {
        		display: flex;
        		flex-direction: row;
        }
        
        .flexslider li .category p {
        		background: #e43837;
        		margin-right: 7px;
        		font-size: 1.1em;
        		padding: 12px 18px 10px;
        		font-weight: 300;
        }
        
        .flexslider li .category span {
        		background: #e43837;
        		margin-top: 17px;
        		padding: 8px 12px 0;
        		font-size: 0.9em;
        		font-weight: 300;
        		height: 26px;
        }
        
        .flexslider li h1,
        .flexslider li h2,
        .flexslider li .category p,
        .flexslider li .category span {
        		-webkit-animation-duration: .6s;
        		animation-duration: .6s;
        		-webkit-animation-fill-mode: both;
        		animation-fill-mode: both;
        		-webkit-animation-name: fadeOutLeft;
        		animation-name: fadeOutLeft;
        }
        
        .flexslider li.flex-active-slide .meta h1,
        .flexslider li.flex-active-slide .meta h2,
        .flexslider li.flex-active-slide .meta .category p,
        .flexslider li.flex-active-slide .meta .category span {
        		-webkit-animation-delay: .4s;
        		animation-delay: .4s;
        		-webkit-animation-duration: .6s;
        		animation-duration: .6s;
        		-webkit-animation-fill-mode: both;
        		animation-fill-mode: both;
        		-webkit-animation-name: fadeInLeft;
        		animation-name: fadeInLeft;
        }
        
        .flexslider li.flex-active-slide .meta h2 {
        		-webkit-animation-delay: .5s;
        		animation-delay: .5s;
        }
        
        .flexslider li.flex-active-slide .meta .category p {
        		-webkit-animation-delay: .6s;
        		animation-delay: .6s;
        }
        
        .flexslider li.flex-active-slide .meta .category span {
        		-webkit-animation-delay: .8s;
        		animation-delay: .8s;
        }
        
        .flex-direction-nav {
        		position: absolute;
        		top: 0;
        		left: 30px;
        }
        
        .flex-direction-nav a {
        		text-decoration: none;
        		display: block;
        		width: 30px;
        		height: 30px;
        		background-color: #333;
        		margin: -20px 0 0;
        		position: a.........完整代码请登录后点击上方下载按钮下载查看