js实现切换（动画版）

学习奇妙类的图片切换（动画）

这个小的效果比较简单。

知识准备：

{ 1 } background-position-x

背景位置属性设置原始原始图像的位置（由背景图像定义），这意味着使用此属性的前提是设置背景原始图像背景图像。

背景位置有两个属性，背景位置：X | Y，在一个单一的性能可以background-position-x和background-position-y。

完成工作并开始编写代码。

第一步

由于这一次需要大量的div，所以动态地使用代码直接查看代码。
体{
保证金：0；
背景颜色：# 5e5e5e；
}
#箱{
宽度：857px；
身高：574px；
126px垫上；
左：143px填充；
背景：URL（IMG / BG。PNG）不重复；
保证金：为0px auto；
}
#包{
宽度：700px；
身高：420px；
风格：preserve-3d变换；
观点：800px；
}
#用DIV {
宽度：10px；
身高：420px；
背景：URL（IMG / 01。PNG）不重复；
浮点数：左；
转变：5S；
}

在包装中，写70个div，每个div显示一个图片的一小部分，这样70个div就能显示一个完整的图片。
对于（var i = 0；i < 70；i + +）{
=；
}
owrap.innerhtml = str；
获取 70 div
var div = owrap.getelementsbytagname（'div）；
U3000 U3000 U3000 U3000

第二步骤

编写tab（）函数并为每个div设置动画

Tab（）函数
每个div将透明度设置为1，并将其不透明度设置为0和背景图像。
函数选项卡（n）{
0
如果（div { N-1 }）{
div { } style.opacity = 1个；
}
70
如果（div { }）{
div { }。style.opacity = 0；
div { }。style.backgroundimage =URL（IMG / 0+ +imgnum。PNG）；
}
}
第三个步骤

编写（）函数，使用定时器改变tab（）函数的参数，并及时更改背景图片。

（）
（TAB）n值传递函数
函数（）{
定时器= setInterval（）{（）函数（
Tab（努姆）；
数字+；
完成图片切换
如果（数字= 71）{
ClearInterval（定时器）；
开关图片
imgnum + +；
0，动画效果从第一个div开始。
数字= 0；
当最后一个图片切入时，从第一个开始开关
如果（imgnum = = 6）{
imgnum = 1；
}
切换到下一个图片间隔时的图片结束
setTimeout（800）；
}
转换速度
}，80）；
}
总结：这个动画效果实现简单，代码问题不大，主要是实现思考问题。

源代码 uff1a

图片切换（动画版）

体{
保证金：0；
背景颜色：# 5e5e5e；
}
#箱{
宽度：857px；
身高：574px；
126px垫上；
左：143px填充；
背景：URL（IMG / BG。PNG）不重复；
保证金：为0px auto；
}
#包{
宽度：700px；
身高：420px；
风格：preserve-3d变换；
观点：800px；
}
#用DIV {
宽度：10px；
身高：420px；
背景：URL（IMG / 01。PNG）不重复；
浮点数：左；
转变：5S；
}

在包装中，写70个div，每个div显示一个图片的一小部分，这样70个div就能显示一个完整的图片。
对于（var i = 0；i < 70；i + +）{
=；
}
owrap.innerhtml = str；
获取 70 div
var div = owrap.getelementsbytagname（'div）；
（）；
（TAB）n值传递函数
函数（）{
定时器= setInterval（）{（）函数（
Tab（努姆）；
数字+；
完成图片切换
如果（数字= 71）{
ClearInterval（定时器）；
开关图片
imgnum + +；
0，动画效果从第一个div开始。
数字= 0；
当最后一个图片切入时，从第一个开始开关
如果（imgnum = = 6）{
imgnum = 1；
}
切换到下一个图片间隔时的图片结束
setTimeout（800）；
}
转换速度
}，80）；
}
每个div将透明度设置为1，并将其不透明度设置为0和背景图像。
函数选项卡（n）{
0
如果（div { N-1 }）{
div { } style.opacity = 1个；
}
70
如果（div { }）{
div { }。style.opacity = 0；
div { }。style.backgroundimage =URL（IMG / 0+ +imgnum。PNG）；
}
}
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！