用原生JS来做成一个简单幻灯片效果

发布时间：2022-04-20 09:28:39 所属栏目：语言来源：互联网

导读：图片幻灯片是网页开发中的一个常见效果，可以用来展示商品广告，展示网站其他活动页面等等，这篇文章主要展示如何用原生JavaScript来实现一个简单的幻灯片。其效果为通过移动鼠标到相应的链接，下方同时展示对应的图片预留，以下是具体的代码。制作有序列表

图片幻灯片是网页开发中的一个常见效果，可以用来展示商品广告，展示网站其他活动页面等等，这篇文章主要展示如何用原生JavaScript来实现一个简单的幻灯片。其效果为通过移动鼠标到相应的链接，下方同时展示对应的图片预留，以下是具体的代码。

        制作有序列表，添加一些页面链接

<body>
<h1>简单动画制作</h1>
<p>连接跳转目标展示</p>
<ol id="list">
<li>
<a href="list1.html" >First</a>

        为这个导航栏添加一些样式

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属性时要转换称整型）的移动完成动画效果

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和