JavaScript实现五种常见焦点轮播与手风琴效果详解
本文深入解析JavaScript中五种常见的图片展示特效实现逻辑，涵盖定时上下无缝滚动、左右无缝切换以及三种不同实现方式的手风琴效果。通过对比绝对定位、相对定位及动态计算宽度的思路，结合代码示例与运行效果图，帮助开发者掌握利用JS控制DOM元素运动与状态切换的核心技巧，适用于各类大型网站或内容展示场景。
承接上一篇关于完美实现八种js焦点轮播图（上篇）的内容，本文将详细介绍剩余几种特效的具体实现方法，供开发者参考学习。
定时上下无缝滚动实现
5. 定时上下无缝滚动
实现思路：
方案一：复制一份ul元素，当滚动至一半距离时立即重置位置，该方法在大型网站中可能性能略低； 方案二：利用相对定位，将第一个li元素移动至列表末尾，随后重置ul和li的位置，从而实现无缝循环。
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');
var LiHeight=aLi_u[0].offsetHeight;
var iNow=0;//针对按钮的值
var iNow2=0;//用于滚动
var timer=null;
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].index=i;
aLi_o[i].onmouseover=function(){
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].className='';
this.className='active';
//建立关系：很重要
iNow=this.index;
iNow2=this.index;
startMove(oUl,{top:-this.index*LiHeight});
}
};
}
timer=setInterval(toRun,2000);
oBox.onmouseover=function(){
clearInterval(timer);
};
oBox.onmouseout=function(){
timer=setInterval(toRun,2000);
};
function toRun(){
if(iNow==0){
//还原li并把ul归位
aLi_u[0].style.position='static';
oUl.style.top=0;
//记得把iNow2还原
iNow2=0;
}
if(iNow==aLi_o.length-1){
//将第一个Li移到最后
iNow=0;
aLi_u[0].style.position='relative';
aLi_u[0].style.top=aLi_u.length*LiHeight+'px';
}else{
iNow++;
}
iNow2++;
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].className='';
}
aLi_o[iNow].className='active';
startMove(oUl,{top:-iNow2*LiHeight});
}
};
效果演示：
左右无缝切换效果实现
6. 左右无缝切换效果
实现思路： 1. 绝对定位：将所有除第一个li以外的元素定位至右侧，通过比较索引值与当前索引，确定即将出现的li的位置。 2. 添加“开关”变量或设置“时间间隔”来控制运动切换的频率，防止频繁触发。
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');
var LiWidth=aLi_u[0].offsetWidth;
var iNow=0;
var bBtn=true;
//除第一项外所有定位到右边
for(var i=1;i<aLi_u.length;i++){
aLi_u[i].style.left=LiWidth+'px';
}
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].index=i;
aLi_o[i].onmouseover=function(){
if(bBtn){
bBtn=false;
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].className='';
}
this.className='active';
//判断左移右移
if(iNow<this.index){
//定位要出现的li
aLi_u[this.index].style.left=LiWidth+'px';
//将当前li移走
startMove(aLi_u[iNow],{left:-LiWidth});
}else if(iNow>this.index){
aLi_u[this.index].style.left=-LiWidth+'px';
startMove(aLi_u[iNow],{left:LiWidth});
}
startMove(aLi_u[this.index],{left:0},function(){
bBtn=true;//只有当前运动完才可进行下一次运动
});
//将当前索引赋值
iNow=this.index;
}//开关if结束
};
}
};
效果演示：
手风琴效果实现方案
7. 手风琴效果
实现思路： 方案一：通过动态改变li的宽度来实现手风琴效果； 方案二：除第一项外，所有li按等距间隔进行定位，触发事件后等距变换位置。
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
//除第一项外所有定位
for(var i=1;i<aLi_u.length;i++){
//等距30px定位
aLi_u[i].style.left=(470-3*40)+(i-1)*30+'px';
}
for(var i=0;i<aLi_u.length;i++){
aLi_u[i].index=i;
aLi_u[i].onmouseover=function(){
for(var i=0;i<aLi_u.length;i++){
if(i<=this.index){
//小于索引的全部左排列
startMove(aLi_u[i],{left:i*30});
}else{//大于索引的全部右排列
startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30});
}
}
}
}
};
效果演示：
8. 手风琴效果2
在上一版基础上，对所有Li进行均匀定位处理。
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var num=Math.ceil(470/aLi_u.length);//每个的宽度
//除第一项外所有定位
for(var i=1;i<aLi_u.length;i++){
aLi_u[i].style.left=num*i+'px';
}
for(var i=0;i<aLi_u.length;i++){
aLi_u[i].index=i;
aLi_u[i].onmouseover=function(){
for(var i=0;i<aLi_u.length;i++){
if(i<=this.index){
startMove(aLi_u[i],{left:i*30});
}else{
startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30});
}
}
};
aLi_u[i].onmouseout=function(){
for(var i=0;i<aLi_u.length;i++){
startMove(aLi_u[i],{left:num*i});
}
};
}
};
效果演示：
精彩专题分享：jQuery图片轮播、JavaScript图片轮播、Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19