2023年7月9日发(作者：)

jQuery实现简单的轮播图使⽤jQuery实现轮播图，废话不多说，直接上代码了。HTML部分其中，图⽚和路径是我电脑中的，你需要⾃⼰准备好图⽚，然后写你⾃⼰图⽚的路径。

CSS部分* {margin: 0;padding: 0;list-style: none;}.slider {width: 790px;height: 340px;margin: 100px auto;position: relative;}.slider>ul>li {display: none;position: absolute;}.slider li:first-child {display: block;}.arrow {display: none;}.slider:hover .arrow,.slider:hover .box {display: block;}.left,.right {width: 30px;height: 60px;font-size: 30px;background-color: rgba(0, 0, 0, 0.1);color: white;position: absolute;top: 50%;margin-top: -30px;line-height: 60px;text-align: center;cursor: pointer;}.left:hover,.right:hover {background-color: rgba(0, 0, 0, .5);}.left {left: 0;}.right {right: 0;}.box {width: 150px;height: 20px;position: absolute;left: 50%;margin-left: -75px;bottom: 20px;display: none;}.box li {width: 12px;height: 12px;background-color: white;border-radius: 50%;display: inline-block;float: left;margin-left: 12px;}.show{background-color: orangered !important;}JS部分你要引⼊jQuery这个库，然后才能使⽤它。我这⾥的jQuery库版本是jquery-1.12.4。$(function() {var num = 0;$(".right").click(function() {num++;if (num === $(".slider>ul>li").length) {num = 0;}$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");});$(".left").on("click", function() {num--;if (num === -1) {num = $(".slider>ul>li").length - 1;}$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");});$(".box li").on("click", function() {var idx = $(this).index();$(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();$(".box li").eq(idx).addClass("show").siblings("li").removeClass("show");});});效果图以上就是jQuery实现轮播图效果的所有代码，希望对您有帮助！更多关于轮播图效果的专题，请点击下⽅链接查看学习以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。