Dieses Mal werde ich Ihnen jQuery zur Implementierung eines einzeiligen Ankündigungskarussells vorstellen. Was sind die Vorsichtsmaßnahmen für jQuery, um ein einzeiliges Ankündigungskarussell zu implementieren?
<p class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;> <ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; height: auto;"> <li> <a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "> <span style="height:36px ; line-height: 36px;">公告test1 </span> </a> </br> </li> <li> <a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "> <span style="height:36px ; line-height: 36px;">活动test2 </span> </a> </br> </li> </ul> </p> <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script> <script> function lunbo123(id, height) { var ul = $(id); var liFirst = ul.find('li:first'); $(id).animate({ top: height }).animate({ "top": 0 }, 0, function() { var clone = liFirst.clone(); $(id).append(clone); liFirst.remove(); }) } setInterval("lunbo123('#myul','-45px')", 2500) </script> <style> #myul { list-style-type: none; width: 300px; height: 45px; font-size: 20px; } </style>
Wie jQuery die Browserversion bestimmt
jQuery führt die dynamische Ankerpunktverschiebung aus
.active wird dynamisch verwendet, um einen Navigationseffekt zu erzielen
Das obige ist der detaillierte Inhalt vonjQuery implementiert ein einzeiliges Ankündigungskarussell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!