js轮播图框架结构

最新推荐文章于 2021-04-21 19:10:02 发布

lunwenjun13269950823

最新推荐文章于 2021-04-21 19:10:02 发布

阅读量646

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lunwenjun13269950823/article/details/51339817

版权

本文介绍了使用JavaScript编写的轮播图框架的核心代码，包括获取DOM元素样式的方法和平滑过渡效果的实现。通过startMove函数，实现了针对指定CSS属性的平滑动画，并在动画结束后可执行回调函数。

摘要由CSDN通过智能技术生成

// JavaScript Document //获取dom元素样式属性的。//获取对象obj 的样式，属性为 attr 的值；
function getStyle(obj, attr) {
   if (obj.currentStyle) {   //ie
       return obj.currentStyle[attr];
   } else {
       return window.getComputedStyle(obj, false)[attr]; //非ie
   }
}
/**
把目标对象的指定的CSS属性，过渡到相应的值
1 目标对象， 2 指定CSS属性和目标值   3 回调函数
第一个参数，需要被移动或者被操作的对象（Dom元素）；
第二个参数：
{
width:1000,
heigth:400,
left:300,
top:100
}
第三个参数：回调函数；运动完成后，执行这个函数。

*/
//1. 清理之前的定时器。 2. 创建新定时器，
// 3. 定时器内部(循环执行的函数，js语句)
// 1）速度
// 2）需要把运动属性赋值，，和清理定时器的语句放在if else
function startMove(obj, json, fn) {
   clearInterval(obj.timer);   //先清除之前的定时器。分对象的。只关注当前对象是否有定时器。

   obj.time