原生JavaScript实现幻灯片效果

当我们制作一个页面时，尤其是制作一个首页时，通常会设计一个可以链接到整个网站的其他主体页面的导航栏，或者一段网站的介绍文字中会包含这页面的跳转，通常情况会使用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就制作完成了。

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

• js 幻灯片的实现
• javascript实现图片切换的幻灯片效果源代码
• 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
• ＪＳ＋ＦＬＡＳＨ幻灯片播放图片脚本，整理了代码，使得调用更加方便！
• 使用 JavaScript 创建可维护的幻灯片效果代码
• js实现幻灯片播放图片示例代码
• JS实现的幻灯片切换显示效果
• JS实现的多张图片轮流播放幻灯片效果
• JS实现淘宝幻灯片效果的实现方法
• js带点自动图片轮播幻灯片特效代码分享

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！