首页jquery二级菜单轮播图

jquery二级菜单轮播图

时间: 2024-01-11 15:05:18 浏览: 79

以下是一个使用jQuery实现的二级菜单轮播图的示例代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery二级菜单轮播图</title> <style> .menu { position: relative; display: inline-block; } .submenu { position: absolute; top: 100%; left: 0; display: none; } .menu:hover .submenu { display: block; } .slide { display: none; } .slide.active { display: block; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.menu').click(function() { $(this).find('.submenu').slideToggle(); }); setInterval(function() { var activeSlide = $('.slide.active'); var nextSlide = activeSlide.next('.slide'); if (nextSlide.length === 0) { nextSlide = $('.slide:first'); } activeSlide.removeClass('active'); nextSlide.addClass('active'); }, 3000); }); </script> </head> <body> <div class="menu"> <a href="#">菜单1</a> <div class="submenu"> <div class="slide active"> <img src="slide1.jpg" alt="轮播图1"> </div> <div class="slide"> <img src="slide2.jpg" alt="轮播图2"> </div> <div class="slide"> <img src="slide3.jpg" alt="轮播图3"> </div> </div> </div> </body> </html> ``` 这段代码实现了一个带有二级菜单和轮播图效果的jQuery组件。当鼠标点击菜单时，二级菜单会向下滑出显示，再次点击则会收起。轮播图会每隔3秒自动切换到下一张图片。

阅读全文