jQuery实现轮播图效果
(编辑:jimmy 日期: 2024/11/1 浏览:3 次 )
使用jQuery实现轮播图,废话不多说,直接上代码了。
HTML部分
其中,图片和路径是我电脑中的,你需要自己准备好图片,然后写你自己图片的路径。
<div class="slider"> <ul> <li><a href="#" ><img src="/UploadFiles/2021-04-02/1.jpg">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实现轮播图效果的所有代码,希望对您有帮助!
更多关于轮播图效果的专题,请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JavaScript使用百度ECharts插件绘制饼图操作示例