使用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轮播特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
jQuery,轮播图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“jQuery实现轮播图效果”评论...
更新动态
2024年05月15日
2024年05月15日
- 【HIRES】贝多芬《钢琴奏鸣曲No.814“月光与悲怆”》索尼精迅Hi-Res/FLAC/96kHz/24bit」
- Switch继任机或采用12GB内存 存储空间256GB
- 任天堂NS2大概率不在本财年内发售 芯片供应有保障
- 万代魂推出1:1《塞尔达传说》大师之剑 9月正式发售
- 江梦蕾.1997-爱的旋律·成名经典(巨星珍藏系列)【丽风】【WAV+CUE】
- 陈明韶.1978-伞下的世界(滚石新格民歌系列15)【滚石】【WAV+CUE】
- 群星.1990-宝丽金巨星荟萃(引进版)【宝丽金】【WAV+CUE】
- 崩坏星穹铁道2.2汽水先生在哪 6位汽水先生位置分享
- 崩坏星穹铁道2.2演技派挑战怎么解锁 演技派隐藏挑战攻略
- 崩坏星穹铁道2.2动作派挑战怎么解锁 动作派隐藏挑战攻略
- 刘以达.2012-希望之旅[香港][WAV整轨]
- 张国荣.2015-NEW精选XRCD【华星】【WAV+CUE】
- 松田圣子SeikoMatsuda《SEIKOJAZZ3》2024[24bit-WAV+CUE]
- 老任极其重视NS2保密工作 疑似为其代号又建了个代号
- 世嘉舅妈透露任天堂新项目代号 或为《塞尔达传说:荒野之息》新机增强版