本文主要介绍了原生JavaScript实现幻灯片效果，文中的安装步骤非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。
我们在制作一个页面，尤其是一个主页的时候，一般会设计一个可以链接到整个网站其他主页面的导航栏，或者一个网站的介绍性文字会包含这个页面的跳转。通常我们会使用title属性给这些跳转链接添加一些说明性的文字，但是我们可以通过制作一个幻灯片演示来提升用户的体验。当用户的鼠标移动到某个链接时，下面会出现相应的图片预览，美化了页面，大大增加了整个网站的互动性。让我们一起制作一个漂亮的幻灯片脚本。
准备工作：在制作脚本之前，你需要制作一张图片，图片要展示所有的预览效果，如下图：
index.html
制作一个有序列表，并添加一些页面链接。
身体
H1简单动画/h1
p连接跳转目标演示/p
ol id='list '
里
a href='list1.html '优先/a
/李
里
a href='list2.html '秒/a
/李
里
a href='list3.html '第三个/a
/李
/ol
！-动态添加图片显示区-
script src='script.js'/script
/body
style.css
给这个导航栏添加一些样式。
ol{
左填充：20px
}
ol李{
显示：内嵌；
右边距：10px
}
#查看{
宽度：600px
高度：200px
位置：绝对；
}
#幻灯片放映{
宽度：200px
高度：200px
溢出：隐藏；
位置：相对；
}
script.js
实现思路：
在设置剧本之前，我们先理清思路，确定我们要做的事情。
1.创建一些新节点来显示预览图片。
2.为标记添加onmouseover事件
3.动画效果是通过setTimeout()函数和图片元素的左上偏移量的移位来完成的(获取set left top属性时要转换成整数)。
/*共享负载*/
函数addLoadEvent(fun){
var oldLoad=window.onload
if(旧负载类型！='函数'){
window.onload=fun
}否则{
window.onload=function(){
old load()；
fun()；
}
}
}
/*insertAfter*/
函数insertAfter(newNode，oldNode){
var parent=old node . parent node；
if(parent.lastChild==oldNode){
parent . append child(new node)；
}否则{
parent.insertBefore(newNode，old node . next sibling)；
}
}
函数显示(){
/*向后兼容性*/
如果(！document.getElementById)返回false
如果(！document.getElementsByTagName)返回false
如果(！document.createElement)返回false
/*获取列表列表*/
var list=document . getelementbyid(' list ')；
/*创建图片显示区域*/
/*外部分区*/
var div=document . createelement(' div ')；
div.setAttribute('id '，' slide show ')；
/*img*/
var img=document . createelement(' img ')；
img.setAttribute('id '，' view ')；
img.setAttribute('src '，' image . jpg ')；
Img.setAttribute('alt '，'图片预览')；
/*使用insertAfter()函数添加以确保div遵循list list */
insertAfter(div，list)；
div . appendchild(img)；
/*绑定事件*/
var a=list . getelementsbytagname(' a ')；
答[0]。onmouseover=function(){
moveElement('view '，0，0，10)；
};
答[1]。onmouseover=function(){
moveElement('view '，-200，0，10)；
};
答[2]。onmouseover=function(){
moveElement('view '，-400，0，10)；
};
}
/*移动
*参数含义：图片所在元素的ID；图片应该向左移动的偏移量；上限偏移量；时间
*/
函数moveElement(elementID，left，top，interval){
/*向后兼容性*/
如果(！document.getElementById)返回false
如果(！document . getelementbyid(elementID))返回false
/*获取图片*/
var img=document . getelementbyid(element id)；
/*确定当前元素是否已经在动画函数中。
*防止动画堆积。
*/
if(img.moveNow){
/*明确堆栈中的动画*/
clear time out(img . move now)；
}
/*确定元素是否有left和top*/set */
如果(！img.style.left){
img . style . left=' 0px '；
}
如果(！img.style.top){
img . style . top=' 0px '；
}
/*获取图片的当前位置
*此时获得的值为字符串格式，使用parseInt () */strong制转换为字符串
var old left=parse int(img . style . left)；
var old top=parse int(img . style . top)；
/*将当前位置与目标位置进行比较*/
if(oldLeft==left oldTop==top){
返回true
}
/*为了保证用户体验，长距离移动时要快一点。
*移动距离小时，可以慢一点。
*根据差距判断移动距离，每次移动为差距的1/10。
*/
/*dist变量用于存储当前偏移量和目标偏移量之间的距离*/
var dist=0；
if(oldLeft left){
/*ceil()向上舍入以防止小数和小于1的情况*/
dist=math . ceil((left-old left)/10)；
oldLeft=oldLeft距离；
}
if(oldLeft left){
dist=math . ceil((old left-left)/10)；
old left=old left-dist；
}
if(oldTop top){
dist=math . ceil((top-old top)/10)；
oldTop=oldTop dist
}
if(oldTop top){
dist=math . ceil((old top-top)/10)；
old top=old top-dist；
}
/*移动*/
img . style . left=old left ' px '；
img . style . top=old top ' px '；
/*调用函数*/
var result=' move element(' element id ' '，' left '，' top '，' interval ')'；
/*将执行动画的函数设置为该元素的属性*/
img.moveNow=setTimeout(结果，间隔)；
}
addLoadEvent(show)；
最终执行效果
此时，当我们将鼠标移动到不同的列表项时，列表下的图片会移动到相应的预览位置。
至此，一个简单的幻灯片演示完成。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。