1. 文字和图片连续轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字和图片连续轮播</title> <style> * { margin: 0; padding: 0; } body{ text-align: center; padding-top: 100px; } /*文字轮播*/ .c{ overflow: hidden; border: 1px solid orange; display: inline-block; line-height: 40px; } .c.horizontal{ width: 500px; } .c.vertical{ height: 203px; padding: 0 40px; } .sc{ animation: marquee 10s linear infinite; display: inline-block; white-space: nowrap; } .vertical .sc{ animation: marqueev 6s linear infinite; } .sc:hover{ animation-play-state: paused; } .c.horizontal .ss{ display: inline-block; } .ss{ color: #333; } @keyframes marquee { 0%{ transform: translate3d(0,0,0); } 100%{ transform: translate3d(-50%,0,0); } } @keyframes marqueev { 0%{ transform: translate3d(0,0,0); } 100%{ transform: translate3d(0,-50%,0); } } /*图片轮播*/ .tech-slideshow { height: 200px; max-width: 800px; margin: 0 auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } .tech-slideshow > div { height: 200px; width: 2526px; background: url('./imgs/collage.jpg'); position: absolute; top: 0; left: 0; height: 100%; transform: translate3d(0, 0, 0); } .tech-slideshow .mover-1 { animation: moveSlideshow 60s linear infinite; } .tech-slideshow .mover-2 { opacity: 0; transition: opacity 0.5s ease-out; background-position: 0 -200px; animation: moveSlideshow 20s linear infinite; } .tech-slideshow:hover .mover-2 { opacity: 1; } @keyframes moveSlideshow { 100% { transform: translateX(-66.6666%); } } </style> </head> <body> <div class="c horizontal"></div> <br /><br/> <br /><br/> <div class="c vertical"></div> <br /><br/> <br /><br/> <div class="tech-slideshow"> <div class="mover-1"></div> <div class="mover-2"></div> </div> <script> buildMarquee(); buildMarquee('vertical'); //horizontal vertical function buildMarquee(direction='horizontal'){ var wrap = document.querySelector('.c.'+direction); let text = `1111 本店所有商品全部白送; 2222 本店所有商品全部白送; 3333 本店所有商品全部白送; 4444 本店所有商品全部白送; 5555 本店所有商品全部白送;`; if(direction == 'vertical'){ text = text.split(';').map(it => `<p class="ss-item">${it}</p>`).join(''); } let ss = `<div class="ss">${text}</div>`; wrap.innerHTML = `<div class="sc">${ss}${ss}</div>`; } </script> </body> </html>
2. 文字图标节奏轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字图标节奏轮播</title> <style> *{ padding:0;margin:0; } li{ list-style:none; } body, html { width: 100%; height: 100%; display: flex; } /*水平轮播*/ .horizontal { --w: 300; --speed: 3s; width: 300px; margin: auto; height: 36px; line-height: 36px; font-size: 20px; background: lightseagreen; color: #fff; overflow: hidden; } .horizontal ul { display: flex; flex-wrap: nowrap; animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite; } .horizontal ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; padding-left: 10px; box-sizing: border-box; white-space: nowrap; cursor: pointer; animation: liMove calc(var(--speed)) infinite; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(calc(var(--s) * var(--w) * -1px), 0); } } @keyframes liMove { 0% { transform: translate(0, 0px); } 80%, 100% { transform: translate(calc(var(--w) * -1px), 0); } } /*垂直轮播*/ .vertical { --s: 6; --h: 36; --speed: 1s; width: 300px; margin: auto; height: calc(var(--h) * 1px); line-height: calc(var(--h) * 1px); font-size: 20px; background: lightseagreen; color: #fff; overflow: hidden; } .vertical ul { display: flex; flex-wrap: nowrap; flex-direction: column; animation: moveh calc(var(--speed) * var(--s)) steps(var(--s)) infinite; } .vertical ul li { flex-shrink: 0; width: 100%; padding-left: 10px; box-sizing: border-box; white-space: nowrap; cursor: pointer; animation: liMoveh calc(var(--speed)) infinite; } @keyframes moveh { 0% { transform: translate(0, 0); } 100% { transform: translate(0, calc(var(--s) * var(--h) * -1px)); } } @keyframes liMoveh { 0% { transform: translate(0, 0); } 80%, 100% { transform: translate(0, calc(var(--h) * -1px)); } } /*图片轮播*/ :root { --w: 400; --speed: 1.5s; } .img-horizontal { width: 400px; margin: auto; height: 240px; line-height: 240px; font-size: 20px; background: #673ab7; color: #fff; overflow: hidden; border: 2px solid #000; } .img-horizontal ul { display: flex; flex-wrap: nowrap; animation: moveImg calc(var(--speed) * var(--s)) steps(var(--s)) infinite; } .img-horizontal ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; white-space: nowrap; cursor: pointer; animation: move1Img calc(var(--speed)) infinite; } .img-horizontal ul li img { width: 100%; height: 100%; object-fit: cover; } @keyframes moveImg { 0% { transform: translate(0, 0px); } 100% { transform: translate(calc(var(--s) * var(--w) * -1px), 0); } } @keyframes move1Img { 0% { transform: translate(0, 0px); } 80%, 100% { transform: translate(calc(var(--w) * -1px), 0); } } </style> </head> <body> <div class="g-container horizontal"> <ul style="--s: 6"> <li>Lorem ipsum 1111111</li> <li>Lorem ipsum 2222222</li> <li>Lorem ipsum 3333333</li> <li>Lorem ipsum 4444444</li> <li>Lorem ipsum 5555555</li> <li>Lorem ipsum 6666666</li> <!--末尾补一个首尾数据--> <li>Lorem ipsum 1111111</li> </ul> </div> <br/><br/><br/><br/> <div class="g-container vertical"> <ul style="--s: 6"> <li>Lorem ipsum 1111111</li> <li>Lorem ipsum 2222222</li> <li>Lorem ipsum 3333333</li> <li>Lorem ipsum 4444444</li> <li>Lorem ipsum 5555555</li> <li>Lorem ipsum 6666666</li> <!--末尾补一个首尾数据--> <li>Lorem ipsum 1111111</li> </ul> </div> <br/><br/><br/><br/> <div class="g-container img-horizontal"> <ul style="--s: 4"> <li> <img src="./imgs/m1.jpeg"> </li> <li> <img src="./imgs/m2.jpeg"> </li> <li> <img src="./imgs/m3.jpeg"> </li> <li> <img src="./imgs/m4.jpeg"> </li> <!--末尾补一个首尾数据--> <li> <img src="./imgs/m1.jpeg"> </li> </ul> </div> <script> </script> </body> </html>