vscarousel实现一个带进度提示的幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:vscarousel实现一个带进度提示的幻灯片效果代码-slider实现一个简单的幻灯片效果代码
代码标签: vscarousel 进度 提示 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> body{background-color:bisque;} .g-nav{width:500px;margin:0 auto;} .g-top{margin-top:10px;} .g-top-2{margin-top:50px;} .g-foot{margin-bottom: 50px;} .g-r{float: right;} .g-l{float: left;} .m-menu{text-align:center;color: #2bbc8a;} .m-menu a{color: #2bbc8a;} .m-menu a:hover{border-bottom:1px solid #2bbc8a;} .m-menu span{margin:0 8px;} .m-title h1{text-align:center;font-size: 36px;} .m-explain{text-align:center;font-size: 16px;} .m-explain p{margin: 16px 0;} .m-content h2{font-size: 18px;} .m-content p{font-size: 16px;margin: 10px 0 0 0;} .m-show {height:300px;background-color: #f0f0f0;position: relative;} .m-show2 {height: 300px;background-color: #f0f0f0;position: relative;} </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vscarousel.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vscarousel.min.js"></script> </head> <body> <div class="g-nav g-top-2"> <div class="m-content"> <div id="vsCarousel" class="vsCarousel m-show"> <ul class="vsCarousel-wrapper"> <li class="vsCarousel-slide"><img src="//repo.bfw.wiki/bfwrepo/image/62af9c8680756.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" alt="1"></li> <li class="vsCarousel-slide"><img src="//repo.bfw.wiki/bfwrepo/image/62a13eb49403e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" alt="2"></li> <li class="vsCarousel-slide"><img src="//repo.bfw.wiki/bfwrepo/image/62954fe830e9e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" alt="3"></li> </ul> <div class="vsCarousel-page"> <button class="vsCarousel-page-play"></button> <button class="vsCarousel-page-button" data-index="1"></button> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0