基于JavaScript实现焦点图轮播效果

作者：半夏时间：2026-10-22 01:46:32浏览：296

本文详细解析如何使用JavaScript实现焦点图轮播效果。从HTML结构搭建、CSS样式布局到JS交互逻辑，逐步讲解图片切换动画、箭头与按钮控制及自动播放功能的实现方法，包含完整代码示例与技术要点。

引言

无论是高校网站还是电商页面，焦点图的切换与轮播功能几乎是必不可少的应用组件。本文旨在记录实现焦点图轮播的技术关键点，方便日后查阅与参考。

结构层（HTML）

一、结构层（HTML）

焦点图的HTML结构相对简洁，主要包含一个父容器（id为box），内部嵌套三个子容器：分别用于存放图片（id为pics）、底部导航按钮（id为dots）以及左右切换箭头（class为turn）。添加基础样式后的布局效果如图二所示。

表示层（CSS）

二、表示层（CSS）

页面的视觉呈现与风格控制依赖于CSS。为便于叙述，下文将直接使用id选择器名称或类选择器名称来指代各个div模块。

1.box

box作为父容器，决定了焦点图在网页中的直观展示区域，其宽高应与显示的图片尺寸一致。示例中将图片设置为宽600px、高400px，父容器box居中显示并添加了阴影效果。样式可根据个人喜好调整，但必须隐藏溢出内容（overflow: hidden），并将定位设置为相对定位（position: relative），以确保子容器的绝对定位准确无误。


#box{
 width: 600px;
 height: 400px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
 position: relative;
 box-shadow: 10px 10px 5px #888;
}

2.pics

pics容器用于放置图片序列。由于实现的是左右切换功能，其高度保持为单张图片的高度，而宽度则等于（展示图片数量+2）乘以图片宽度，具体原因将在行为层部分说明。

另外需要注意的是，从展示效果来看，pics位于左右切换箭头和底部切换按钮的下层，因此需要将其z-index设置为1。


#pics{
 width: 5400px;
 height: 400px;
 position: absolute;
 z-index: 1;
}

3.dots

dots的z-index设置为2，使其显示在上层；定位为绝对定位；其他样式可根据喜好自定义。此处设置了鼠标悬停时的样式，以及配合JS代码在图片位置改变时切换的激活样式（class为on）。


#dots{
 width: 120px;
 height: 10px;
 position: absolute;
 bottom: 25px;
 left: 40%;
 z-index: 2;
}
 
#dots span{
 width: 10px;
 height: 10px;
 float: left;
 margin-right: 5px;
 background: #333;
 border: solid 1px #FFF;
 border-radius: 50%;
 cursor: pointer;
}
 
#dots .on{background: orangered;}
#dots span:hover{background: orangered;}

4.turn

左右箭头的关键样式与dots类似，其他部分可自定义。这里设置了当鼠标滑过box容器时才显示箭头的效果。


.turn{
 width: 40px;
 height: 40px;
 color: #fff;
 background: orangered;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 opacity: 0.5;
 position: absolute;
 top: 180px;
 display: none;
 z-index: 2;
 cursor: pointer;
}
.turn:hover{opacity: 0.8;}
#box:hover .turn{display: block;}

至此，页面的样式与布局已完成，但行为层中方法与功能的实现才是核心重点。

行为层（JavaScript）

三、行为层（JavaScript）

在定义具体函数之前，先在全局作用域中获取页面所需的DOM节点。


var box = document.getElementById('box');
var pics = document.getElementById('pics');
var dots = document.getElementById('dots').getElementsByTagName('span');
var pre = document.getElementById('pre');
var next = document.getElementById('next');

1.图片切换动画

轮播图的核心方法在于图片的切换动画。该函数的关键点在于接收一个位移量offset，通过改变pics相对于box的left值，从而控制显示的图片。

此前CSS设置box的宽度为600px，而pics的宽度为5400px。由于box设置了溢出隐藏，页面初始只显示一张图片；通过接收具体的位移量offset并改变left值（加上或减去n个图片宽度），即可切换显示的图片。

此外还需解决两个问题：若不设置图片切换速度，图片会瞬间变换，缺乏过渡效果；若频繁快速点击切换，会消耗过多内存导致页面卡顿，甚至出现前一张图片未切换完就强制显示下一张的情况。因此，需要对图片切换添加速度控制，并设置状态标志，确保当前图片未切换完成时禁止其他切换操作。


//图片切换函数
 function turn(offset){ 
 turned = true; //切换允许标志，在全局作用域中定义，true表示关闭允许切换
 var new_left = parseInt(pics.style.left) + offset; //最后left值
 var total_time = 300; //位移总时间
 var interval = 10; //每次位移间隔时间
 var speed = offset/(total_time/interval); //位移速度——每次位移量

 function go(){
 if((speed < 0 && parseInt(pics.style.left) > new_left) || (speed > 0 && parseInt(pics.style.left) < new_left)){ //右切||左切
 pics.style.left = parseInt(pics.style.left) + speed +'px';
 setTimeout(go,interval);
 }else{
 turned = false; //已切换完毕，开启允许切换
 pics.style.left = new_left +'px';
 if( new_left < -4200){
  pics.style.left = -600 +'px';
 }
 else if( new_left > -600){
  pics.style.left = -4200 +'px';
 }
 }
 }
 go();
 }

2.箭头切换

在图片切换函数turn()的基础上传入参数。由于是左右切换，每次直接传入一个图片宽度的值。向右切换时传入-600，向左切换时传入600。

这里需要注意图片与底部按钮的同步更新，到达最后一张或第一张时的参数重置，以及是否允许切换的状态判断。


//箭头切换实现
 next.onclick = function(){
 if(index == 7){
 index = 1;
 }else{
 index += 1;
 }
 show_dots();
 if(!turned){
 turn(-600);
 }
 };
 pre.onclick = function(){
 if(index == 1){
 index = 7;
 }else{
 index -= 1;
 }
 show_dots();
 if(!turned){
 turn(600);
 }
 };

3.底部按钮实现

按钮与箭头的区别在于，点击按钮可以切换到任意一张图片。因此在调用切换函数turn()之前，需要先计算目标位移量。同时，别忘了更新按钮对应的激活样式。


//按钮切换样式
 function show_dots(){
 for(var i = 0; i < dots.length; i++){
 if(dots[i].className == 'on'){
 dots[i].className = '';
 break;
 }
 }
 dots[index - 1].className = 'on';
 }
 //按钮切换实现
 for(var i = 0; i < dots.length; i++){
 dots[i].onclick= function(){
 if(this.className == 'on'){
 return;
 }
 var my_index = parseInt(this.getAttribute('index')); //注意! index是自定义属性
 var offset = -600 * (my_index - index);　　　　　　　　　//计算切换位移量

 if(!turned){
 turn(offset);
 }
 index = my_index;
 show_dots();
 }
 }

4. 自动播放

自动播放功能主要涉及定时器的设置与清除，此处不再赘述。


//定时动画
 function play(){
 time = setInterval(function(){
 next.onclick();
 },3000); 
 }
 //动画停止
 function stop(){clearInterval(time);}

 play();
 box.onmouseover = stop;
 box.onmouseout = play;

最后附上demo演示和源码链接：demo、源码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13