原生js实现鼠标滚动横向滚动全屏图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:原生js实现鼠标滚动横向滚动全屏图文幻灯片效果代码
代码标签: 原生 js 鼠标 滚动 横向 全屏 图文 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #12111F; margin: 0; padding: 0; } p { font-size: 50px; color: #eee; margin-left: 150px; margin-top: 100px; margin-bottom: 0; } .wrapper { width: 100%; height: 70vh; overflow: hidden; } .wrapper > .scroller { width: auto; height: calc(70vh + 20px); overflow: auto; display: flex; /*scroll-behavior: smooth;*/ } .slide { width: 60vw; height: 60vh; margin-top: 5vh; margin-left: 10vw; margin-right: 10vw; position: relative; transition: 1s ease; } .slide > .photo { width: inherit; height: inherit; transition: 1s ease; } .slide > .photo:before { content: ''; position: absolute; color: #fff; transform: rotate(-90deg); top: 40px; left: -60px; } /* slide number definition starts */ .slide:nth-child(1) > .photo:before { content: '01 _____ 06'; } .slide:nth-child(2) > .photo:before { content: '02 _____ 06'; } .slide:nth-child(3) > .photo:before { content: '03 _____ 06'; } .slide:nth-child(4) > .photo:before { content: '04 _____ 06'; } .slide:nth-child(5) > .photo:before { content: '05 _____ 06'; } .slide:nth-child(6) > .photo:before { content: '06 _____ 06'; } /* Slide number definition ends */ .slide > .photo > img { width: 100%; height: 100%; } .slide > .text { position: absolute; right: -50px; bottom: 20%; color: white; font-size: 80px; font-family: arial, sans-serif; line-height: 50px; transition: .8s ease; } .slide > .text > h2 { font-size: 75px; padding-bottom: 0; margin-bottom: 0; } .slide > .text > span { font-size: 20px; line-height: 20px; } </style> </head> <body> <!-- partial:index.partial.html --> <p>Slider</p> <div class="wrapper"> <div class="scroller"> <div class="slide"> <div class="photo"> <img src="//repo.bfw.wiki/bfwrepo/image/64b9f213cd702.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1000,h_600,/quality,q_90" alt=""> </div> <div class="text"> <h2>The Road</h2> <span>Photography - Documentation</span> </div> </div> <div class="slide"> <div class="photo"> <img src="//repo.bfw.wiki/bfwrepo/image/64a4cec6f2065.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1000,h_600,/quality,q_90" alt=""> </div> <div class="text"> <h2>Harleys</h2> <span>Photography - Motorsports</span> </div> </div> <div class="slide"> <div class="photo"> <img src="//repo.bfw.wiki/bfwrepo/image/64a4cd626cd6a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1000,h_600,/quality,q_90" alt=""> </div> <div class="text"> <h2>Sweet Dogs</h2> <span>Photography - Animals</span> </div> </div> <div c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0