【jQuery案例】自动轮播图

使用jQuery实现了图片自动轮播
有左右按钮和底部小圆点选择功能

源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自动轮播图</title><style>* {margin: 0;padding: 0;}.box {width: 500px;height: 500px;margin: 30px auto;position: relative;border: 1px solid #ccc;overflow: hidden;}/* 轮播图列表 */.box .img-list {width: 4000px;height: 500px;display: flex;list-style: none;position: absolute;left: 0;top: 0;}.box .img-list img {width: 500px;height: 500px;/* 防止选中 */-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;-ms-user-select: none;}/* 左右按钮 */.box .btn {width: 30px;height: 60px;background-color: rgba(184, 184, 184, 0.3);position: absolute;top: 50%;margin-top: -30px;line-height: 60px;text-align: center;font-size: 30px;color: aliceblue;/* 防止选中 */-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;-ms-user-select: none;}.box .btn:hover {background-color: rgba(156, 158, 158, 0.6);cursor: pointer;transition: all 0.5s;}.box .left-btn {left: 0;}.box .right-btn {right: 0;}/* 底部圆点 */.box .cir-list {width: 200px;height: 10px;position: absolute;bottom: 5px;left: 50%;margin-left: -100px;display: flex;justify-content: space-around;align-items: center;list-style: none;}.box .cir-list li {width: 10px;height: 10px;background-color: aliceblue;border-radius: 50%;}.box .cir-list li.change {background-color: rgb(181, 207, 229);width: 30px;height: 8px;border-radius: 20%;transition: all 0.5s;}</style>
</head><body><div class="box" id="box"><!-- 轮播图片列表 --><ul class="img-list" id="imgList"><li><img src="./imgs/1.JPG" alt="" draggable="false"></li><li><img src="./imgs/2.JPG" alt="" draggable="false"></li><li><img src="./imgs/3.JPG" alt="" draggable="false"></li><li><img src="./imgs/4.JPG" alt="" draggable="false"></li><li><img src="./imgs/5.JPG" alt="" draggable="false"></li><li><img src="./imgs/6.JPG" alt="" draggable="false"></li><li><img src="./imgs/7.JPG" alt="" draggable="false"></li><li><img src="./imgs/1.JPG" alt="" draggable="false"></li></ul><!-- 左右按钮 --><div class="left-btn btn" id="leftBtn">&lt;</div><div class="right-btn btn" id="rightBtn">&gt;</div><!-- 底部圆点列表 --><ul class="cir-list" id="cirList"><li class="change"></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script src="../../../js/jquery-3.6.0.min.js"></script><script>// 获取元素let $box = $("#box");let $imgList = $("#imgList");let $leftBtn = $("#leftBtn");let $rightBtn = $("#rightBtn");let $cirList = $("#cirList li");let idx = 0;let width = $box.width();let time = 1000;let imgCount = $imgList.children().length - 1;// 避免动画执行过程中 再次触发动画 设置locklet lock = true;/* 点击右按钮 */$rightBtn.click(function () {// 上锁if (!lock) {return;}lock = false;idx++;// 图片切换$imgList.animate({ left: -width * idx }, time, function () {if (idx >= imgCount) {$imgList.css("left", 0);idx = 0;}console.log(idx, this);lock = true; // 开锁})// 底部圆点改变cirChange.call($cirList[idx >= imgCount ? 0 : idx]);})/* 点击左按钮 */$leftBtn.click(function () {// 上锁if (!lock) {return;}lock = false;idx--;if (idx < 0) {$imgList.css("left", -width * imgCount);idx = imgCount - 1;}// 图片切换$imgList.animate({ left: -width * idx }, time, function () {console.log(idx, this);lock = true; // 开锁})// 底部圆点改变cirChange.call($cirList[idx]);})/* 点击小圆点 */$cirList.click(function () {// 上锁if (!lock) {return;}lock = false;// .call()传参改变函数的thiscirChange.call(this);// 改变idxidx = $(this).index();// 图片切换$imgList.animate({ left: -width * idx }, time, function () {console.log(idx, this);lock = true; // 开锁})})/* 底部圆点改变 函数 */function cirChange() {$(this).addClass("change").siblings().removeClass("change");}/* 自动轮播 */let autotimer = setInterval(function () {$rightBtn.click();}, 2000)/* 鼠标滑入 自动轮播停止 */$box.mouseover(function () {clearInterval(autotimer);})$box.mouseleave(function () {autotimer = setInterval(function () {$rightBtn.click();}, time * 2)})</script>
</body></html>

【jQuery案例】自动轮播图相关推荐

使用jQuery完成无缝轮播图案例
前言: 一.前面给大家讲了关于css的一些有趣的小案例,这一期来给大家介绍下jQuery,jQuery的使用相比较js的使用比较简单,因为jQuery会自动给你生成循环函数,使代码简洁,相比较js实现 ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
php自动轮播图代码,bootstrap框架实现自动轮播图的代码
大家在浏览网站时有没有发现,几乎每个网站的首页都有轮播图,作为一个前端开发人员,你会用bootstrap框架写图片轮播吗?这篇文章就给大家分享bootstrap框架实现自动轮播的代码,有一定的参考价值 ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
MUI - 自动轮播图实现
轮播图的设置,可手动,也可自动轮播.全凭代码一句话. 截图示下: 下面直接上代码,请参考. 代码如下: <!DOCTYPE html> <html><head>&l ...
2021-09-30 js手动轮播图
手动轮播图开发思路: 网页布局,完成基本的网页格式: 实现按钮的点击事件: 实现按钮点击时,图片的切换: 实现按钮点击时,数字改变( 4/8 ): 实现按钮点击时,标题改变 <style> ...
原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...

【jQuery案例】自动轮播图

【jQuery案例】自动轮播图

【jQuery案例】自动轮播图相关推荐

最新文章

热门文章

【jQuery案例】 自动轮播图

【jQuery案例】 自动轮播图

【jQuery案例】 自动轮播图相关推荐

最新文章

热门文章

【jQuery案例】自动轮播图

【jQuery案例】自动轮播图

【jQuery案例】自动轮播图相关推荐