jq手写轮播图

不直接逐行的按照着敲，把代码从头看一遍，了解大概需要些什么步骤，然后从简单的步骤开始，逐渐补足逻辑

之前完全没见过/了解过轮播思想的童鞋呢，可能直接看下面的代码会有点晕啊，所以呢，可以先直接在创建html页面框架不提取内容，即写死轮播图片数量的写法……先创建主要的html框架从右箭头下一张的切换开始编写，是较为简单的（圆点索引的切换，以及list的left值变换）自动轮播的实现 （定时器实现）鼠标悬停左右箭头以及圆点索引时关闭自动轮播，鼠标离开时开启自动轮播左箭头上一张的切换编写任意索引点击切换图片

hover

$(selector).hover(inFunction, outFunction) // 效果相当于鼠标的出入事件 mouseenter 和 mouseleave

animate

(selector).animate({styles}[, speed, easing, callback ])

以下是提取之后的代码，便于添加和修改想要轮播的图片…… 不废话，直接上代码，一切皆在代码注释中……

<div class="box"></div> <!--直接调用--> <script> $(function () { // banner函数执行 banner($('.box'), { imgs: [ './images/a.jpg', './images/b.jpg', './images/c.jpg', './images/d.jpg' ] }); }) </script> const banner = function (dom, options) { // 复制图片的最后一张并插入到数组首位，使形成视觉闭环 options.imgs.unshift(options.imgs.slice(-1)[0]); // 获取banner盒子box的宽度 const width = dom.width(); // 保存索引下标 let index = 0; // 保存定时器序列号 let timer = null; // 图片切换时长 const duration = 2000; // 动画切换时长 const animation_time = 800; // 轮播ul创建 const $list = $('<ul class="list"></ul>') $list.css({ width: `${width * options.imgs.length}px`, left: `-${width}px` }) // 索引ul创建 const $indexs = $('<ul class="indexs"></ul>'); // 轮播图片li、索引li创建 options.imgs.map((item, index) => { const $li = $(`<li><img src="${item}" title="${index}"/></li>`) $li.width(width); $list.append($li); // 去除重复的最后一张 if (index > 0) { const $indexsLi = $(`<li class="${index === 1 ? 'active' : ''}"></li>`); $indexs.append($indexsLi); } }) // 左右切换箭头创建 const $arrow = $(` <div class="arrow"> <div id="prev"><img src="./images/arrowPrev.png" alt=""></div> <div id="next"><img src="./images/arrowNext.png" alt=""></div> </div> `); // 将创建的轮播图ul，索引ul，切换箭头div填充到box中 dom.append($list).append($indexs).append($arrow); // 左箭头切换上一张 const prevImg = function () { index--; // 判断，当index为-1时，切换索引为圆点索引最后一个 if (index === -1) { index = options.imgs.length - 2; } // 激活当前下标索引并去除上一激活索引的激活状态 $indexs.find('li').eq(index).addClass('active').siblings().removeClass('active'); // 图片ul的left动画切换 $list.animate( // 需要执行的动画样式 { left: `-${width * (index === options.imgs.length - 2 ? 0 : (index + 1))}px` }, // 动画执行时长 animation_time, // 动画结束时执行的函数 function () { if (index === options.imgs.length - 2) { $(this).css({ left: `-${width * (index + 1)}px` }) } } ) } // 下一张 const nextImg = function () { index++; if (index > options.imgs.length - 2) { index = 0; $list.css({ left: '0px' }) } $indexs.find('li').eq(index).addClass('active').siblings().removeClass('active'); $list.animate({ left: `-${width * (index + 1)}px` }, animation_time); } // 左右箭头点击切换 $('#prev').click(function () { prevImg() }); $('#next').click(function () { nextImg() }); // 左右箭头鼠标悬浮事件 $arrow.find('div').hover( // 鼠标进入执行事件 function () { clearInterval(timer); }, // 鼠标离开执行事件 function () { autoplay(); } ) // 自动播放 const autoplay = function (auto = true) { timer = setInterval(function () { nextImg(); }, duration); } autoplay(); // 索引鼠标事件 $indexs.find('li').click(function () { // 获取当前点击索引的下标 index = $(this).index(); $list.animate({ left: `-${width * (index + 1)}px` }, animation_time); $indexs.find('li').eq(index).addClass('active').siblings().removeClass('active'); }).hover(function () { // 清除定时器 clearInterval(timer); }, function () { // 恢复自动轮播 autoplay(); }) }

觉得写的还可以的朋友，请给与我鼓励，给个小小的赞^_^

如有错误或者读者有更好的方式，也请多加分享提出哦！

大家的鼓励，前进的动力！