当前位置：首页 > 全部内容 > 正文

JavaScript实现焦点图轮播效果完整教程

作者：像素猫

时间：2026-10-21

浏览：297

本文详细介绍如何使用JavaScript实现焦点图轮播效果。涵盖DOM操作、定时器、事件处理及递归动画等核心技术。重点解析无限滚动原理、小圆点联动、点击跳转及自动播放功能的实现逻辑，并提供优化假图生成的实用技巧，帮助开发者掌握前端交互开发的关键技能。

文章目录

JavaScript实现焦点图轮播效果完整教程

本文通过具体实例，详细讲解利用JavaScript实现焦点图轮播效果的方法，供读者参考学习。

最终实现的视觉效果如下图所示：

JavaScript实现焦点图轮播效果完整教程

所需掌握的核心知识点

一、所需掌握的核心知识点

1. DOM节点操作

2. 定时器机制

3. 事件监听与处理

4. JavaScript动画原理

5. 函数递归调用

6. 无限滚动逻辑实现

二、HTML结构与CSS样式设计

HTML结构与CSS样式设计


<div id="banner" class="banner">
  <ul id="list-banner" class="list-banner fn-clear" style="left:-624px;">
      <li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner2.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner3.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
  </ul>
  <div class="list-num-wp">
    <div id="list-num" class="list-num fn-clear">
      <a href="#" class="hover"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <div class="left">
    <a id="left" href="#"></a>
  </div>
  <div class="right">
    <a id="right" href="#"></a>
  </div>
</div>



.banner{position:relative;width:624px;height:200px;overflow:hidden;}
.banner .list-banner{position:absolute;width:5000px;}
.banner .list-banner li{float:left;width:624px;height:200px;}
.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}
.banner .list-num{width:100px;margin:0 auto;}
.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;}
.banner .list-num a:hover{background:url(../images/list-num-hover.png));}
.banner .list-num a.hover{background:url(../images/list-num-hover.png);}
.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}

JavaScript脚本实现思路

三、JavaScript脚本实现思路

1. 首先实现左右切换按钮的基本功能


window.onload=function(){
  var prev=document.getElementById("left");
  var next=document.getElementById("right");
  var list_banner=document.getElementById("list-banner");
  next.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)-624+'px';  //注：html上的ul要加行间样式left:0;，否则这里动不起来
  }
  prev.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)+624+'px';
  }
}

2. 由于左右按钮的操作逻辑相似，将其封装为独立函数以提高代码复用性


function animate(offset){
    list_banner.style.left=parseInt(list_banner.style.left)+offset+'px';
}
next.onclick=function(){
    animate(-624);
}
prev.onclick=function(){
    animate(624);
}

3. 实现无限滚动效果

① 采用“假图”策略

具体做法是将图片序列设为412341。当滚动位置小于最后一张图片的位置时，重置到第一张图片的位置；当位置大于第一张图片时，则跳转到最后一张图片的位置，从而在视觉上形成无缝循环。


function animate(offset){
  var newLeft=parseInt(list_banner.style.left)+offset;
  list_banner.style.left=newLeft+'px';
  if(newLeft<-2496){
    list_banner.style.left=-624+"px";
  }
  if(newLeft>-624){
    list_banner.style.left=-2496+"px";
  }
}

4. 实现小圆点随左右按钮切换而联动


var index=1;
function showDot(){
  for(var i=0;i<list_num.length;i++){
    list_num[i].className="";
  }
  list_num[index-1].className="hover";
}
next.onclick=function(){
  animate(-624);
  index++;
  if(index>4){
    index=1;
  }
  showDot();
}
prev.onclick=function(){
  animate(624);
  index--;
  if(index<1){
    index=4;
  }
  showDot();
}

5. 实现点击小圆点触发图片滚动及圆点状态切换


for(var i=0;i<list_num.length;i++){
  list_num[i].onclick=function(){
    if(this.className=="hover"){
      return;
    }
    var myIndex=parseInt(this.getAttribute("index"));
    var offset=-624*(myIndex-index);
    index=myIndex;
    animate(offset);
    showDot();
  }
}

① 若点击的是当前已选中的圆点，则不执行后续切换代码

②


<div class="list-num-wp">
    <div id="list-num" class="list-num fn-clear">
      <a index="1" href="#" class="hover"></a>
      <a index="2" href="#"></a>
      <a index="3" href="#"></a>
      <a index="4" href="#"></a>
    </div>
</div>

关键在于正确获取当前点击的是第几张图片。不能直接使用`var myIndex=this.index;`，因为`index`是自定义属性，无法通过点语法直接获取DOM自带属性。必须使用`.getAttribute()`方法，该方法既能获取自定义属性，也能获取DOM内置属性。

③ 更新全局`index`变量的值，执行`index=myIndex;`。

6. 编写动画函数（实现渐变运动过程）


function animate(offset){
    animated=true;
    var newLeft=parseInt(list_banner.style.left)+offset;
    var time=300;     //位移总时间
    var interval=30;    //位移间隔时间
    var speed=offset/(time/interval);    //每次移动距离
    speed=speed>0?Math.ceil(speed):Math.floor(speed);    //可能存在小数，取整
    function go(){
      if((speed < 0 && parseInt(list_banner.style.left)>newLeft)||(speed>0&&parseInt(list_banner.style.left)<newLeft)){   //newLeft目标值
        list_banner.style.left=parseInt(list_banner.style.left)+speed+'px';
        setTimeout(go,interval);  //不止做一次运动（go函数），每隔30毫秒前进一下
      }
      else{
        animated=false;
        list_banner.style.left=newLeft+'px';
        if(newLeft<-2496){
          list_banner.style.left=-624+"px";
        }
        if(newLeft>-624){
          list_banner.style.left=-2496+"px";
        }
      }
    }
    go();
}
next.onclick=function(){
    if(!animated){
      index++;
    }
    if(index>4){
      index=1;
    }
    showDot();
    if(!animated){
      animate(-624);
    }
}
prev.onclick=function(){
    if(!animated){
      index--;
    }
    if(index<1){
      index=4;
    }
    showDot();
    if(!animated){
      animate(624);
    }
}
for(var i=0;i<list_num.length;i++){
    list_num[i].onclick=function(){
      if(this.className=="hover"){
        return;
      }
      var myIndex=parseInt(this.getAttribute("index"));
      var offset=-624*(myIndex-index);
      index=myIndex;
      showDot();
      if(!animated){
        animate(offset);
      }
    }
}

① 一个函数在满足特定条件后不断调用自身，这种机制称为递归。利用递归可以实现`animate`函数的连续动画效果。

② 由于频繁点击会导致`animate`函数被不停调用，可能引发卡顿或图片渲染混乱，因此需要引入变量`animated`进行状态控制与优化。

7. 实现自动播放功能


function autoplay(){
    timer=setInterval(function(){
      next.onclick();
    },1000)
}
function stopautoplay(){
    clearInterval(timer);
}
banner.onmouseover=stopautoplay;
banner.onmouseout=autoplay;
autoplay();

`setTimeout`仅执行一次，而之前的持续执行效果是通过递归实现的。

`setInterval`则是按照指定的时间间隔重复执行代码。

8. 对假图生成的优化

在实际应用中，图片通常按顺序存储，因此最好通过JavaScript动态生成假图节点，而不是预先写在HTML中。


var img_first=list_banner.getElementsByTagName("li")[0];
var img_last=list_banner.getElementsByTagName("li")[3];
list_banner.appendChild(img_first.cloneNode(true));
list_banner.insertBefore(img_last.cloneNode(true),list_banner.getElementsByTagName("li")[0]);

`appendChild`方法用于将新节点添加到目标元素的最后一个子节点之后。

`insertBefore`方法用于将新节点添加到已存在的某个子节点之前。

`cloneNode`方法中，参数为`true`表示深克隆，即复制标签及其内部内容；参数为`false`表示浅克隆，仅复制标签本身而不复制内容。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述的实现方法对大家学习JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

适合JavaScript初学者的实战项目：制作简易待办事项列表

JS打开新标签页时怎么通过URL传递参数

sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧

JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？

JavaScript事件处理实例：点击、输入与表单验证代码

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例