当我们制作一个页面时，尤其是制作一个首页时，通常会设计一个可以链接到整个网站的其他主体页面的导航栏，或者一段网站的介绍文字中会包含这页面的跳转，通常情况会使用title属性为这些跳转链接添加一些解释性的文字，但是我们可以通过制作一个幻灯片的demo，加强用户的体验性。当用户的鼠标移动到某一链接时，下方会出现对应的图片预览，这样即美化页面，又大大增加了整个网站的交互性，下面就让我们一起制作一个漂亮的幻灯片脚本吧。
准备：在制作脚本之前，需要制作一张图片，这张图片应该展示了所有预览效果，如下图：
index.html
制作有序列表，添加一些页面链接
< body >
< h1 >简单动画制作</ h1 >
< p >连接跳转目标展示</ p >
< ol id = "list" >
< li >
< a href = "list1.html" >First</ a >
</ li >
< li >
< a href = "list2.html" >Second</ a >
</ li >
< li >
< a href = "list3.html" >Third</ a >
</ li >
</ ol >
<!--动态添加的图片展示区域>-->
< script src = "script.js" ></ script >
</ body >
style.css
为这个导航栏添加一些样式
ol{
padding-left : 20px ;
}
ol li{
display : inline ;
margin-right : 10px ;
}
#view{
width : 600px ;
height : 200px ;
position : absolute ;
}
#slideShow{
width : 200px ;
height : 200px ;
overflow : hidden ;
position : relative ;
}
script.js
实现思路：
在建立脚本之前，我们先整理一下思路，确定我们要做什么？
1. 新建一些节点用来展示预览图片
2. 为a标签添加onmouseover事件
3. 通过setTimeout()函数，和对图片元素left、top偏移量（获取设置的left top属性时 要转换称整型）的移动完成动画效果
/*共享load*/
function addLoadEvent(fun){
var oldLoad = window.onload;
if ( typeof oldLoad != "function" ){
window.onload = fun;
} else {
window.onload = function (){
oldLoad();
fun();
}
}
}
/*insertAfter*/
function insertAfter(newNode,oldNode){
var parent = oldNode.parentNode;
if (parent.lastChild == oldNode){
parent.appendChild(newNode);
} else {
parent.insertBefore(newNode,oldNode.nextSibling);
}
}
function show(){
/*向后兼容*/
if (!document.getElementById) return false ;
if (!document.getElementsByTagName) return false ;
if (!document.createElement) return false ;
/*获取列表清单*/
var list = document.getElementById( "list" );
/*创建图片展示区域*/
/*外层div*/
var div = document.createElement( "div" );
div.setAttribute( "id" , "slideShow" );
/*img*/
var img = document.createElement( "img" );
img.setAttribute( "id" , "view" );
img.setAttribute( "src" , "image.jpg" );
img.setAttribute( "alt" , "图片预览" );
/*添加 使用insertAfter()函数 保证div紧跟在list列表之后*/
insertAfter(div,list);
div.appendChild(img);
/*绑定事件*/
var a = list.getElementsByTagName( "a" );
a[0].onmouseover = function (){
moveElement( "view" ,0,0,10);
};
a[1].onmouseover = function (){
moveElement( "view" ,-200,0,10);
};
a[2].onmouseover = function (){
moveElement( "view" ,-400,0,10);
};
}
/*移动
*参数的含义：图片所在元素的id；图片应该向左移动的偏移量；上偏移量；时间
*/
function moveElement(elementID,left,top,interval){
/*向后兼容*/
if (!document.getElementById) return false ;
if (!document.getElementById(elementID)) return false ;
/*获取图片*/
var img = document.getElementById(elementID);
/*判断当前元素是否已经处在一个动画函数中
*防止动画堆积
*/
if (img.moveNow){
/*清楚堆栈中的动画*/
clearTimeout(img.moveNow);
}
/*判断元素是否设置了left和top*/
if (!img.style.left){
img.style.left = "0px" ;
}
if (!img.style.top){
img.style.top = "0px" ;
}
/*获取图片当前位置
*此时获取的值是字符串格式,使用parseInt()强制转化为字符串*/
var oldLeft = parseInt(img.style.left);
var oldTop = parseInt(img.style.top);
/*将当前位置与目标位置做比较*/
if (oldLeft == left && oldTop == top){
return true ;
}
/*为了保证用户体验，当移动的距离较大时应该移动的快一些
*当移动的距离比较小时，可以适当慢一些
*根据相差的距离判断移动的距离,每次移动相差距离的1/10
*/
/*dist变量用于存储当前偏移量与目标偏移量的距离*/
var dist = 0;
if (oldLeft < left){
/*ceil()向上取整 防止小数 以及小于1的情况*/
dist = Math.ceil((left-oldLeft)/10);
oldLeft = oldLeft+dist;
}
if (oldLeft > left){
dist = Math.ceil((oldLeft-left)/10);
oldLeft = oldLeft - dist;
}
if (oldTop < top){
dist = Math.ceil((top-oldTop)/10);
oldTop = oldTop+dist;
}
if (oldTop > top){
dist = Math.ceil((oldTop-top)/10);
oldTop = oldTop - dist;
}
/*移动*/
img.style.left = oldLeft+ "px" ;
img.style.top = oldTop+ "px" ;
/*调用函数*/
var result = "moveElement('" +elementID+ "'," +left+ "," +top+ "," +interval+ ")" ;
/*将执行动画的函数，设置成这个元素的一个属性*/
img.moveNow = setTimeout(result,interval);
}
addLoadEvent(show);
最后执行效果
此时，当我们将鼠标移动到不同列表项时，列表下的图片就会移动到对应的预览图位置。
到此，一个简单的幻灯片demo就制作完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/zm_nizhi/article/details/74905869
查看更多关于原生JavaScript实现幻灯片效果的详细内容...