横向图片分页滚动效果代码
代码语言:html
所属分类:加载滚动
代码描述:横向图片分页滚动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; background-color: #ffecb3; } *, *:before, *:after { box-sizing: inherit; } ul { list-style-type: none; display: flex; margin: 0; width: 100%; height: 100%; overflow-x: scroll; /* prevent accidentally going back or triggering other swipe events */ overscroll-behavior: contain; /* hide scroll bar */ scrollbar-width: none; -ms-overflow-style: none; /* momentum scroll on iOS */ -webkit-overflow-scrolling: touch; /* disbable vertical scroll for touch */ touch-action: pan-x; /* scroll snapping */ scroll-snap-type: x mandatory; } ul::-webkit-scrollbar { display: none; } ul li { background-color: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); margin: 15px 15px 15px 0; text-align: center; font-family: arial; padding: 20px 20px 40px 20px; width: 80vw; height: 60vh; display: flex; flex-direction: column; /* scroll snapping */ scroll-snap-align: center; /* hacky fix for padding at the end of the list */ } ul li:last-child { position: relative; } ul li:last-child::after { position: absolute; left: 100%; height: 1px; width: 20px; display: block; content: ""; } ul li img { padding-bottom: 20px; height: 100%; min-width: 100%; object-fit: cover; vertical-align: bottom; } .indicatorsList { padding: 20px; display: flex; justify-content: center; flex-wrap: wrap; } .indicatorsList .indicator { width: 30px; height: 30px; border-radius: 2px; padding: 8px; color: #fff; background-color: #212121; text-align: center; box-shadow: 0 2px 1px black; cursor: pointer; margin: 10px; } .indicatorsList .indicator.active { background-color: #d32f2f; } </style> </head> <body> <ul> <li> <img src=" //repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="cut citrus fruits. " />Lorem Ipsum</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="sliced mango. " />Dolor Sit</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="a bunch of blueberries. " />Amet Consectetur</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="a pineapple sitting on a table. " />Adipiscing Elit</li> <li> <img src=" //repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="cut citrus fruits. " />Lorem Ipsum</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="sliced mango. " />Dolor Sit</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="a bunch of blueberries. " />Amet Consectetur</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="a pineapple sitting on a table. " />Adipiscing Elit</li> <li> <img src=" //repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="cut citrus fruits. " />Lorem Ipsum</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="sliced mango. " />Dolor Sit</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="a bunch of blueberries. " />Amet Consectetur</li> <li> <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="a pineapple sitting on a table. " />Adipiscing Elit</li> <li> <img src=" //repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0