主页 / 网络编程 /

原生JavaScript实现幻灯片效果

网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了原生JavaScript实现幻灯片效果，文中安装步骤介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

当我们制作一个页面时，尤其是制作一个首页时，通常会设计一个可以链接到整个网站的其他主体页面的导航栏，或者一段网站的介绍文字中会包含这页面的跳转，通常情况会使用title属性为这些跳转链接添加一些解释性的文字，我们可以通过制作一个幻灯片的demo，加强用户的体验性。当用户的鼠标移动到某一链接时，下方会出现对应的图片预览，这样即美化页面，又大大增加了整个网站的交互性，狼蚁网站SEO优化就让我们一起制作一个漂亮的幻灯片脚本吧。

准备在制作脚本之前，需要制作一张图片，这张图片应该展示了所有预览效果，如下图

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、偏移量（获取设置的left 属性时 要转换称整型）的移动完成动画效果

/共享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,,interval){
 /向后兼容/
 if(!document.getElementById) return false;
 if(!document.getElementById(elementID)) return false;

 /获取图片/
 var img = document.getElementById(elementID);

 /判断当前元素是否已经处在一个动画函数中
 防止动画堆积
 /
 if(img.moveNow){
  /清楚堆栈中的动画/
  clearTimeout(img.moveNow);
 }

 /判断元素是否设置了left和/
 if(!img.style.left){
  img.style.left = "0px";
 }
 if(!img.style.){
  img.style. = "0px";
 }


 /获取图片当前位置
 此时获取的值是字符串格式,使用parseInt()强制转化为字符串/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.);

 /将当前位置与目标位置做比较/
 if(oldLeft == left && oldTop == ){
  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 < ){
  dist = Math.ceil((-oldTop)/10);
  oldTop = oldTop+dist;
 }
 if(oldTop > ){
  dist = Math.ceil((oldTop-)/10);
  oldTop = oldTop - dist;
 }

 /移动/
 img.style.left = oldLeft+"px";
 img.style. = oldTop+"px";

 /调用函数/
 var result = "moveElement('"+elementID+"',"+left+","++","+interval+")";
 /将执行动画的函数，设置成这个元素的一个属性/
 img.moveNow = setTimeout(result,interval);
}

addLoadEvent(show);

执行效果

此时，当我们将鼠标移动到不同列表项时，列表下的图片就会移动到对应的预览图位置。

到此，一个简单的幻灯片demo就制作完成了。

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

上一篇：react项目从新建到部署的实现示例 下一篇：JavaScript 实现继承的几种方式

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by