原生JavaScript实现幻灯片效果


Posted in Javascript onFebruary 19, 2021

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

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

原生JavaScript实现幻灯片效果

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);

最后执行效果

原生JavaScript实现幻灯片效果

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
Vue路由权限控制解析
Nov 09 Javascript
JavaScript 实现继承的几种方式
Feb 19 #Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 #Javascript
JavaScript实现打字游戏
Feb 19 #Javascript
JS+CSS实现动态时钟
Feb 19 #Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
农救科工作职责
2013/11/27 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫