JavaScript实现图片无缝轮换的完整方案
作者：白露时间：2026-10-23 20:44:42浏览：349
本文详细解析如何使用原生JavaScript实现图片无缝轮换功能。通过构建特定的DOM结构，利用CSS控制溢出与浮动，并结合自定义缓动公式与定时器，实现流畅的图片滑动切换效果。文章涵盖基础切换、带缓动动画及鼠标悬停交互等多种场景的代码实现与原理说明。
图片轮换技术背景与原理
图片轮换技术早期多依赖Flash实现，因其基于帧的特性与轮换原理高度契合。Flash通过遮罩层处理溢出内容，而Web开发中需利用overflow属性模拟这一效果。由于缺乏可视化的时间轴，开发者需依靠数学计算确定当前显示的图片位置。早期受限于Robert Penner的缓动公式，直到script.aculo.us类库提供自有缓动算法后，Web端的动画效果才得以显著提升。
DOM结构与CSS布局设计
分析图片轮换的结构层，需包含框体、图片展示区、图片滑动层与分页栏。框体为div元素，负责提供相册边框及作为分页栏的包含块（containing block）。图片展示区与滑动层采用新式无缝滚动结构，即干净的无序列表。其中，ul元素作为图片展示区，尺寸等同于单张图片；li元素作为图片滑动层，仅含一个li，通过CSS强制内部图片不换行并左浮动，同时赋予其极大宽度以在一行内容纳所有图片。分页栏为包含多个链接的span元素，样式类似水平菜单，需使用绝对定位将其置于框体右下角。
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
#album {
position:relative;/*为分页栏准备的*/
width:400px;/*必须设置，为分页栏准备*/
height:300px;/*必须设置，为分页栏准备*/
border:10px solid #8080C0;
}
#album ul ,#album li {/*消除默认样式*/
padding:0;
margin:0;
list-style:none;
}
#album ul{
position:relative; /*为图片滑动区*/
height:300px;/*必须设置，用于隐藏图片滑动区多余的部分*/
width:400px;/*必须设置，用于隐藏图片滑动区多余的部分*/
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li { /*图片滑动区*/
position:absolute;
width:1000%;/*让里面的所有图片并列显示*/
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {/*分页栏*/
position:absolute;
right:0;
bottom:10px;
}
#album span a{
display:block;/*让其拥有盒子模型*/
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover ,#album span a.hover{
color:#F8F8F8;
background-position:0 0;
}
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album {
position:relative;/*为分页栏准备的*/
width:400px;/*必须设置，为分页栏准备*/
height:300px;/*必须设置，为分页栏准备*/
border:10px solid #8080C0;
}
#album ul ,#album li {/*消除默认样式*/
padding:0;
margin:0;
list-style:none;
}
#album ul{
position:relative; /*为图片滑动区*/
height:300px;/*必须设置，用于隐藏图片滑动区多余的部分*/
width:400px;/*必须设置，用于隐藏图片滑动区多余的部分*/
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li { /*图片滑动区*/
position:absolute;
width:1000%;/*让里面的所有图片并列显示*/
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {/*分页栏*/
position:absolute;
right:0;
bottom:10px;
}
#album span a{
display:block;/*让其拥有盒子模型*/
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover ,#album span a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h4>javascript图片轮换 by 司徒正美</h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
纯CSS切换与滚动原理
与以往系列教程一致，此方案支持纯CSS点击切换，无需JavaScript介入。区别在于，传统方式通过改变scrollTop值实现垂直滚动，而本方案通过调整scrollLeft值实现水平滚动。
基础无缓动实现
若无需缓动动画效果，实现过程相对简单。
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0];
slide.innerHTML += slide.innerHTML;
var item = slide.getElementsByTagName("a"),
critical = item[item.length/2].offsetLeft,//临界值
distance = critical/(item.length/2),
delta = - distance;
(function(){//实现自动轮换图片
setTimeout(function(){
delta = delta - distance;
if(delta < -critical){
delta = - distance;
}
slide.style.left = delta + "px";//★★★★★★★★
setTimeout(arguments.callee,1500)
},1500)
})()
}引入缓动动画效果
引入缓动效果时，需调用特定的缓动公式与transition函数，并在代码指定的星号位置进行插入。
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var spring= function(pos) {
return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
length = links.length, aBefore = length, aIndex;
slide.innerHTML += slide.innerHTML;
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,//临界值
distance = critical/length,
delta = - distance;
(function(){//实现自动轮换图片
setTimeout(function(){
delta = delta - distance;
if(delta < -critical){
delta = - distance;
}
aIndex = - delta/distance;
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
transition(slide,{begin:delta,change:distance,ease:spring})
setTimeout(arguments.callee,1500)
},1500)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript图片轮换 by 司徒正美</h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
复杂交互与定时器管理
可参照第一部分结构添加信息栏，这将导致程序运行三个定时器，虽略显复杂且现实中不推荐，但此处旨在演示transition回调函数的用法。
//动态生成li元素并把它插入到DOM树中。
var tip = document.createElement("li");//信息栏
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var easeInOutCubic= function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");
tip.style.cssText = "position:absolute;bottom:-40px;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,//临界值
distance = critical/length,
delta = - distance;
(function(){//实现自动轮换图片
setTimeout(function(){
delta = delta - distance;
if(delta < -critical){
delta = - distance;
}
aIndex = - delta/distance;
tip.innerHTML = images[aIndex-1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
transition(slide,{begin:delta,change:distance,ease:easeInOutCubic,onEnd:function(){
move(tip);
}})
setTimeout(arguments.callee,2000)
},2000)
})()
}
var move = function(el){
var begin = parseFloat(el.style.bottom),speed = 1;
el.bottom = begin;
(function(){
setTimeout(function(){
el.style.bottom = el.bottom + speed + "px";//移动
el.bottom += speed;
speed *= 1.5;//下一次移动的距离
if(el.bottom >= 0){
el.style.bottom = "0px";
}else{
setTimeout(arguments.callee,25);//每移动一次停留25毫秒
}
},25)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript图片轮换 by 司徒正美</h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
最后，只需为信息栏上的按钮绑定点击事件即可完成功能。
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var easeInOutCubic= function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex = 1;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");//信息栏
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,//临界值
distance = critical/length,
delta = - distance;
paginater.onclick = function(e){//实现手动切换
e = e || window.event;
var target = e.srcElement ? e.srcElement : e.target;
if(target.nodeName.toLowerCase() == "a"){//事件代理
var _aIndex = aIndex;
aIndex = target.getAttribute("href").slice(-1);
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
delta = - distance * _aIndex;
var change = (aIndex - _aIndex) * distance;
if(aIndex >= _aIndex){
transition(slide,{begin:delta,change: change,ease:easeInOutCubic})
}else{
transition(slide,{begin:delta,change: -change,ease:easeInOutCubic})
}
}
};
(function(){/*实现自动轮换图片*/
setTimeout(function(){
(aIndex > length) && (aIndex = 1);
delta = - distance * aIndex;
tip.innerHTML = images[aIndex-1].getAttribute("alt");//改变信息栏的文字
links[aBefore-1].className = "";//改变按钮的样式
links[aIndex-1].className = "hover";//改变按钮的样式
aBefore = aIndex;
aIndex++;
transition(slide,{begin:delta,change:distance,ease:easeInOutCubic})
setTimeout(arguments.callee,2000)
},2000)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript图片轮换 by 司徒正美</h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
鼠标悬停交互与高级缓动
部分用户偏好鼠标悬停触发效果而非点击。为此，可将绑定函数独立出来，分别关联到onclick与onmouseover事件。此外，可更换为其他缓动公式，例如pulse效果，该效果模拟蛇信子般的多次振动（默认5次，可通过第二个参数调整，如设为10次）。快速掠过所有按钮时，视觉效果颇为炫目。
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #F2F1D7;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var pulse = function(pos, pulses) {
return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration,10);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex = 1;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");//信息栏
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,//临界值
distance = critical/length,
delta = - distance;
var manualSlippage = function(){
var e = arguments[0] || window.event;
var target = e.srcElement ? e.srcElement : e.target;
if(target.nodeName.toLowerCase() == "a"){//事件代理
var _aIndex = aIndex;
aIndex = target.getAttribute("href").slice(-1);
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
delta = - distance * _aIndex;
var change = (aIndex - _aIndex) * distance;
(aIndex >= _aIndex) && (change = -change);
transition(slide,{begin:delta,change: change,ease:pulse});
}
}
paginater.onmouseover = manualSlippage;
paginater.onclick = manualSlippage;
(function(){/*实现自动轮换图片*/
setTimeout(function(){
(aIndex > length) && (aIndex = 1);
delta = - distance * aIndex;
tip.innerHTML = images[aIndex-1].getAttribute("alt");//改变信息栏的文字
links[aBefore-1].className = "";//改变按钮的样式
links[aIndex-1].className = "hover";//改变按钮的样式
aBefore = aIndex;
aIndex++;
transition(slide,{begin:delta,change:distance,ease:pulse})
setTimeout(arguments.callee,2000)
},2000)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript图片轮换 by 司徒正美</h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
<p>使用的是多次摇晃的残影特效pulse.<p>
至此，关于JavaScript实现图片轮换动作方法的介绍完毕。如需了解更多相关技术，可查阅本站往期文章或继续浏览后续内容，感谢支持。
作者最新文章
AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19