jquery轮播图实现方法，含翻页、导航及自动轮播功能详解
好多人于做网站之际，皆欲添上个图片自行轮展之成效，瞅着显得特有范儿而且还能够将核心的内容给展现出来。实际上呢，运用原生的那个JavaScript去达成一个完备的轮播图，并非像头脑中所想的那般复杂，等到把核心的逻辑掌握住之后，你也能够轻轻松松将其搞定。
搭建HTML结构
首先，去创建出一个放置轮播图的盒子，这事儿一般使用div元素去做，并且要给它赋予一个类名， 就好似“p.focus”这般。此盒子的宽度，还有高度，需要跟每张图片维持一致，而且还要进行 CSS 属性 设置，令其作为相对定位的容器存在。于它的内部呀，还得有一个包裹住所有图片的列表，这个列表设置成绝对定位，其宽度应当是所有图片宽度加起来的总和。
要使得轮播呈现出无限循环的样子，我们需要在图片列表的起始位置与末尾位置分别添加一张图片。举例来说，原本存在三张图片，分别是图1、2、3，经过处理之后变为图3、1、2、3、图1。待到用户滚动至末尾的图1时，会瞬间跳转至开头的图1，在视觉方面感受不到有任何变化。要是将这个容器溢出的部分进行隐藏处理，便能够看到一个符合标准的轮播区域。
编写CSS样式
接下来，要针对轮播容器而去设置overflow为hidden，如此这般，超出的图片便不会显示出来。图片列表，必须设置成绝对定位，借此才能经由改变它的left属性，达成图片的水平移动。左右两个翻页按钮，默认可设置为透明隐藏，当鼠标悬停在轮播区域之上的时候，再去改变透明度显示出来。
下面的导航小圆点，一般是用无序列表达成，每一个列表项对应着一张图片。借由设置不一样的背景色去表明当下激活的图片。全部这种样式，都得考量浏览器的兼容性，尤其是transform属性这方面，尽量加上浏览器前缀。
实现点击切换功能
现下步入最为关键的JavaScript板块。首先得去获取左右箭头按钮，以及图片列表，还有所有导航小圆点的那些元素。假定每张图片宽度为480px的话，那么当点击右侧箭头之际，理应把图片列表的left值减掉480px，以此达成向左移动一张图片的成效。点击左侧箭头的情形与之相反，left值加上480px。
这存在一个重点细微之处，当朝着我们所增添的副本图像进行移动时，得要毫无痕迹地去跳转，举例来说，从最后那张真实的图像点击下一张，会展现出我们于末尾添加的第一张图像副本，在这个时候，要即刻把left值重新设定为第一张真实图像的位置，这种判定逻辑要精准到像素等级，不然的话，会出现跳转卡顿的情况。
制作导航小圆点
每一个导航小圆点均得绑定点击事件，当点击某一个小圆点之际，要算出对应图片的位置并且移动过去，在这里要留意一个常见的错误，借由jQuery的attr方法获取的index值默认属于字符串类型，得转换成整数方可开展数学运算，不然会得出错误的结果。
移动结束之后，要同步更新小圆点的激活状态，将所有小圆点的类名去除，接着给当前对应的那个添加激活类。与此同时，需处理边界情形，要是点击的是最后一个导航按钮，就需考量图片列表的位置计算有无超出实际范畴。
添加自动轮播功能
点击右侧箭头的事件会每隔几秒钟自动执行一回，这便是自动轮播。能够运用setInterval定时器达成，一般把间隔时间设置成3000毫秒较为恰当。当鼠标移入轮播区域之际，要清除此定时器，还要显示左右翻页按钮。鼠标移出时再度开启定时器，与此同时隐藏翻页按钮。
此处须留意定时器的清理以及重启，以防多个定时器同时运作致使切换速度愈发迅速。于切换动画执行之际，应当设定一个标志位用于禁止新的点击操作，待动画完成之后再予以恢复。如此能够避免用户快速点击时出现的逻辑紊乱。
处理细节和兼容问题
移动图片之后，务必要判定left值是不是超出了预先设定的范围，若是超出了，那就即刻重置到准确位置。全部的动画效果，最优选用CSS的transition来达成，如此性能更优且更流畅。针对不支持transition的旧浏览器，可以实现优雅降级，直接跳转而不播放动画。
/**
* 这个函数用于移动图片，接收一个移动参数
* @param dis为需要移动的距离
*/
function move(dis){
moving = true; let $picture = $(".picture"); let left = parseInt($picture.css("left"));
left += dis;
$picture.animate({left:left},400,"linear",function(){
if(left > -480){
left = -2880;
} if(left 接下来是下方的导航按钮，点击时会自动切换到对应的图片上，同时被点击的按钮还会高亮。
/**
* 这个函数是用于点亮下方的几个小按钮的
*/
function activeBtn(){
if(index 6){
index = 1;
} let $cur_active = $(".button-group").find(".active"); if($cur_active.attr("index") !== index){
$cur_active.removeClass("active");
$(".button-group").find('[index=' + index+']').addClass("active");
}
}
容易被忽视的另外一点是有关窗口大小变动时的适配相关问题。假设轮播图宽度是固定写死的状态，那么在浏览器窗口缩小之际就有可能会出现显示内容不完全的情形。能够考虑运用百分比宽度搭配最大宽度这种方式来达成响应式效果 ，但计算left值的时候依旧是以实际宽度作为依据的。
在日常上网浏览各个网站之际，请你回想一下，是否曾碰到过这样的轮播图，即其切换时呈现出极为明显的卡顿情形，或者在点击操作时显得不够灵敏顺畅？你认为究竟是何种缘故致使了这般状况的发生呢？诚挚欢迎你于评论区域踊跃分享你对此的独到看法，同时点个赞，以此促使更多人能够成功看到这篇具备实质性实用价值的教程。
/**
* 实现焦点图自动轮播
*/
function autoMove(){
index += 1;
activeBtn();
move(-480);
timeoutId = setTimeout(autoMove,5000);
}
