首先，在学习过程的前端，转盘图形是我们必须学习的，所以为了实现各种旋转木马图形更高效的包装，一个运动的框架。
功能getstyle（obj，ATTR）{
如果（obj。currentstyle）{
返回的对象。currentstyle {属性}； / /为了IE下获得的属性值
其他{ }
返回window.getcomputedstyle（obj，null）{属性}； / /为了获得W3C的浏览器的属性值
}
}
动画函数（obj，JSON）{
ClearInterval（obj。定时器）；
obj.timer = setInterval（）{（）函数（
var标志=真；
无功电流= 0；
对于（JSON var attr）{
如果（attr = = 'opacity）{
电流= parseInt（getstyle（obj，ATTR）* 100）；
其他{ }
电流= parseInt（getstyle（obj，ATTR））；
}；
步骤=（JSON {属性}流） / 10；
一步一步> 0 = math.ceil（步骤）：Math.floor（步）；
首先确定属性是否透明。
如果（attr = = 'opacity）{
如果浏览器支持不透明/首先
如果（'opacity'in OBJ。风格）{
obj.style.opacity =（电流+步） / 100；
其他{ }
obj.style.filter = 'alpha（透明度= +（电流+ + +）；
}
确定属性是否为Z / /
} else if（attr = = 'zindex）{
obj.style.zindex = JSON {属性}；
最后，判断
其他{ }
obj。风格{属性} =电流+步骤+ 'px；
}
如果（当前！= { }）{ JSON对象
标志=假；
}
}
如果（标志）{
ClearInterval（obj。定时器）；
}
}，5）；
}
在这个框架中，不同的浏览器兼容，和属性等的不透明度和z-index可以介绍。当然，宽度、高度、左右两个属性是必不可少的，使用这个框架可以取得很大的效果，所以现在开始演示。
第一个是index.html生产。
总的生产是非常简单的，我们将插入的图片作为背景图片，Javaｓｃｒｉｐｔ的李。之后，我们做的CSS样式调整。
* {
保证金：0px；
填料：0px；
}
#箱{
宽度：1300px；
身高：400px；
保证金：100px汽车；
溢出：隐藏；
}
#盒UL {
身高：400px；
宽度：1300px；
}
#箱ul {
宽度：240px；
身高：400px；
浮点数：左；
溢出：隐藏；
}
Javaｓｃｒｉｐｔ代码如下所示：
在window.onload =函数（）{
VaR箱= document.getelementbyid（'box）；
var=框。儿童{ 0 }。儿童；
对于（var i = 0；i < ali.length；i++）{
ALi {我}。style.backgroundimage = 'url（+ 'images /+（i + 1）+JPG；
ALi {我}。onmouseover =函数（）{
对于（var i = 0；i < ali.length；i++）{
动画（阿里{ }，{宽度：100 }）；
}
动画（这个，{宽度：800 }）；
}；
ALi {我}。onmouseout=函数（）{
对于（var i = 0；i < ali.length；i++）{
动画（阿里{ }，{宽度：240 }）；
}
}
}
}
演示实现波纹管，本地JS的使用等，当然，也可以通过网易轮播图动画框架封装好的达到类似的效果。
上述原生js实现波纹管演示，并且封装运动框架（例如代码），这是萧边分享给你的全部内容。我希望能给你一个参考，希望你能支持它。
