阅读量:0
以下是33个优秀的jQuery教程，包括幻灯片和动画菜单等内容。
幻灯片教程
1、基本幻灯片制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 幻灯片</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .slide { display: none; } .active { display: block; } </style> </head> <body> <div class="slide active">幻灯片1</div> <div class="slide">幻灯片2</div> <div class="slide">幻灯片3</div> <script> setInterval(function() { $('.slide').first().removeClass('active').next().addClass('active'); }, 2000); </script> </body> </html>2、自动播放与手动切换结合的幻灯片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 幻灯片</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .slide { display: none; } .active { display: block; } </style> </head> <body> <div class="slide active">幻灯片1</div> <div class="slide">幻灯片2</div> <div class="slide">幻灯片3</div> <button id="prev">上一张</button> <button id="next">下一张</button> <script> var currentIndex = 0; function showSlide(index) { $('.slide').eq(currentIndex).removeClass('active'); currentIndex = index; $('.slide').eq(currentIndex).addClass('active'); } $('#next').click(function() { showSlide((currentIndex + 1) % $('.slide').length); }); $('#prev').click(function() { showSlide((currentIndex 1 + $('.slide').length) % $('.slide').length); }); setInterval(function() { showSlide((currentIndex + 1) % $('.slide').length); }, 2000); </script> </body> </html>动画菜单教程
1、基本动画菜单制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 动画菜单</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .menu { display: none; } </style> </head> <body> <button id="toggleMenu">显示/隐藏 菜单</button> <ul class="menu"> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> </ul> <script> $('#toggleMenu').click(function() { $('.menu').slideToggle(); }); </script> </body> </html>2、带有子菜单的动画菜单制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 动画菜单</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .menu { display: none; } </style> </head> <body> <button id="toggleMenu">显示/隐藏 菜单</button> <ul class="menu"> <li>菜单项1 <ul class="submenu"> <li>子菜单项1</li> <li>子菜单项2</li> <li>子菜单项3</li> </ul> </li> <li>菜单项2</li> <li>菜单项3</li> </ul> <script> $('#toggleMenu').click(function() { $('.menu').slideToggle(); }); $('.menu > li').hover(function() { $(this).find('.submenu').stop(true, true).slideDown(); }, function() { $(this).find('.submenu').stop(true, true).slideUp(); }); </script> </body> </html>相关问题与解答：
问题1：如何修改幻灯片切换的速度？
答：可以通过在slideToggle()和slideDown()、slideUp()等方法中添加第二个参数来设置动画速度，例如slideToggle(1000)表示动画持续时间为1秒，可选值为毫秒数（如1000）或预定义字符串（'slow'、'fast'）。
问题2：如何修改动画菜单的显示效果？
答：可以使用fadeIn()、fadeOut()、slideDown()、slideUp()等方法替换slideToggle()方法来实现不同的显示效果，将slideToggle()替换为fadeToggle()可以实现渐隐渐现的效果。
以上就是关于“33个优秀的jQuery 教程分享(幻灯片、动画菜单)-jquery”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
