<!DOCTYPE html> <html> <head> <style> .marquee-container { width: 100vw; overflow: hidden; white-space: nowrap; overflow: hidden; border: 1px solid #ccc; background: #ddd; } .marquee { padding-left: 100vw; display: inline-block; animation: marquee 5s linear infinite; animation-play-state: running; } .marquee.paused, .marquee-container:hover .marquee { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> </head> <body> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="marquee-container"> <div class="marquee xpaused"></div> </div> <script type="text/javascript"> const content = [ 'first slide' , 'second slide' , 'third slide' ]; let key = 0; const marquee = $('.marquee'); marquee.on('animationstart', () => { key = 0; marquee.text(content[key]); }); marquee.on('animationiteration', () => { key++; if(typeof content[key] === 'undefined') key = 0; marquee.text(content[key]); }); marquee.removeClass('paused'); </script> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
