가로 스크롤 배너 (marquee)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery ticker Plugin Demos</title> <style> .js-ticker { overflow: hidden; } .js-ticker-track { white-space: nowrap; } .js-ticker-item { white-space: normal; height: 100%; vertical-align: top; display: inline-block; position: relative; } @supports ((display: -webkit-box) or (display: flex)) { .js-ticker-track { position: relative; white-space: normal; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .js-ticker-item { height: auto; display: block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .js-ticker.active .js-ticker-track { display: -webkit-box; display: -ms-flexbox; display: flex; } .js-ticker.active .js-ticker-item { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } } </style> <style> .default-ticker {width:1000px; height:80px; margin:0 auto; background:#f7f7f7} .default-ticker div img {margin-right:15px !important} </style> </head> <body> <div class="default-ticker"> <div><img src="http://www.djhoneymoon.com/images/hotel/banyantree.png" /></div> <div><img src="http://www.djhoneymoon.com/images/hotel/trisara.png" /></div> <div><img src="http://www.djhoneymoon.com/images/hotel/pullman.png" /></div> <div><img src="http://www.djhoneymoon.com/images/hotel/pavilions.png" /></div> <div><img src="http://www.djhoneymoon.com/images/hotel/shore.png" /></div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="http://www.djhoneymoon.com/js/ticker.js"></script> <script> $(document).ready(function(){ $(".default-ticker").ticker({ // item selector item: 'div', // Toggles whether the ticker should pause on mouse hover pauseOnHover: true, // <a href="https://www.jqueryscript.net/animation/">Animation</a> speed speed: 60, // Decides whether the ticker breaks when it hits a new item or if the track has reset pauseAt: '', // delay in milliseconds delay: 500 }); }); </script> </body>
