介绍//封装函数获取任意一个元素的任意属性的值(兼容ie8)
函数getStyle(元素,attr) {
返回窗口。getComputedStyle, # 63;窗口。getComputedStyle(元素,null) [attr]: element.currentStyle [attr);
}//封装js变速动画
函数动画(元素、json、fn) {//每次启动定时器之前先停止
clearInterval (element.tmId);
元素。tmId=setInterval(函数(){
var=true标记;//遍历对象中的每个属性
(var attr json) {//执行透明度动画
如果(attr==皁pacity") {//获取当前元素的属性值
当前var=方法(getStyle(元素,attr) * 100);//获取目标值
var目标=json (attr) * 100;//移动的步数
var=(目标-电流)/10步;
一步=一步比;0,# 63;Math.ceil(步骤):Math.floor(步骤);//移动后的值
当前+=步骤;
元素。风格(attr]=当前/100;
}else if (attr==皕Index") {//改变层级属性
元素。风格(attr]=json (attr);
其他}{//获取当前元素的属性值
当前var=方法(getStyle(元素,attr));//获取目标值
var目标=json (attr);//移动的步数
var=(目标-电流)/10步;
一步=一步比;0,# 63;Math.ceil(步骤):Math.floor(步骤);//移动后的值
当前+=步骤;
元素。风格(attr]=当前+“px";
如果当前!(=目标){
国旗=false;
}
}
}
如果(国旗){
clearInterval (element.tmId);//如果有回调函数就调用
如果(fn) fn ();
}//测试//console.log(“目标:“+目标+,/当前:“+当前+“/步数:“+步骤);
},20);
} & lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n"祝辞
& lt;元charset=癠TF-8"祝辞
& lt; title>旋转木马轮播图& lt;/title>
& lt;链接rel=皊tylesheet"href=癱ss/css (1) .css"rel=巴獠縩ofollow"/比;
& lt;脚本src=癱ommon.js"祝辞& lt;/script>
& lt; script>
var配置=[
{
宽度:400年,
上图:20,
左:50,
透明度:0.2,
zIndex: 2
},//0
{
宽度:600年,
上图:70年,
左:0,
透明度:0.8,
zIndex: 3
},//1
{
宽度:800年,
上图:100年,
左:200年,
透明度:1、
zIndex: 4
},//2
{
宽度:600年,
上图:70年,
左:600年,
透明度:0.8,
zIndex: 3
},//3
{
宽度:400年,
上图:20,
左:750年,
透明度:0.2,
zIndex: 2
}//4
];
窗口。onload=function () {
var=true标记;=$ var列表查询(“# slide") .getElementsByTagName (“li");
函数花(){//1,图片散开
(var=0;我& lt;list.length;我+ +){//设置每个李的宽,透明度,左,前,zindex
动画([我]列表,配置[我],函数(){
国旗=true;
});
}
}
花();//初始化调用函数//按钮的显示与隐藏
查询(“# slide")美元。onmouseover=function () {
查询(“# arrow") .style美元。不透明度=?”;
}
查询(“# slide")美元。onmouseout=function () {
查询(“# arrow") .style美元。不透明度=?”;
}//点击切换
查询(“# arrLeft")美元。onclick=function () {
如果(国旗){
config.unshift (config.pop ());
花();
国旗=false;
}
}
查询(“# arrRight")美元。onclick=function () {
如果(国旗){
config.push (config.shift ());
花();
国旗=false;
}
}//自动切换
setInterval(函数(){
config.push (config.shift ());
花();
},2000);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类=皐rap"id=皐rap"比;
& lt; div类=皊lide"id=皊lide"比;
& lt; ul>
& lt; li> & lt; a href=?“祝辞& lt; img src=巴枷?slidepic1.jpg"alt=啊?祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=?“祝辞& lt; img src=巴枷?slidepic2.jpg"alt=啊?祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=?”;祝辞& lt; img src=巴枷?slidepic3.jpg"alt=啊?祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=?“祝辞& lt; img src=巴枷?slidepic4.jpg"alt=啊?祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=?“祝辞& lt; img src=巴枷?slidepic5.jpg"alt=啊?祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt; div类=癮rrow"id=癮rrow"比;
& lt; a href=癹avascript:无效(0);“类=皃rev"id=癮rrLeft"祝辞& lt;/a>
& lt; a href=癹avascript:无效(0);“类=皀ext"id=癮rrRight"祝辞& lt;/a>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
使用js实现轮播图旋转木马效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<强>思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换
左旋转:将数组数据删除,然后添加到数组的右旋转:将数组<强> 数据删除,然后添加到数组的<强> 先附上效果图,再来实现
接下来就是最主要的,封装原生js动画函数
封装完函数,剩下的直接调用就可以了,最后附上旋转木马完整代码,# 63;
