学习了妙味课堂的图片切换（动画版）
预览：图片切换
这个小效果相对简单一点。
知识预备：
【1】background-position-x
background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。
background-position有两个属性值， background-position：x | y，用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。
准备工作完毕，开始写代码
第一步
由于这次需要的div很多，所以采用动态添加的方式，直接看代码
1 <style>
2 body{
3 margin: 0;
4 background-color: #5e5e5e;
5 }
6 #box{
7 width: 857px;
8 height: 574px;
9 padding-top: 126px;
10 padding-left:143px;
11 background: url(img/bg.png) no-repeat;
12 margin: 0px auto;
13 }
14 #wrap{
15 width: 700px;
16 height: 420px;
17 transform-style: preserve-3d;
18 perspective: 800px;
19 }
20 #wrap div{
21 width: 10px;
22 height: 420px;
23 background: url(img/01.png) no-repeat;
24 float: left;
25 transition: .5s;
26 }
27 </style>
28 </head>
29 <body>
30 <div id="box">
31 <div id="wrap"></div>
32 </div>
33 <script>
34
35
36 //在wrap下，写70个div，每个div显示一张图片的一小片部分，这样70个div能完整的显示出一张图片
37 for(var i=0;i<70;i++){
38 str +=‘<div style="background-position-x:‘+(-10*i)+‘px"></div>‘;
39 }
40 oWrap.innerHTML = str;
41
42 //获取70个div
43 var divs = oWrap.getElementsByTagName(‘div‘); </script> </body>
第二步
写tab()函数，设置每个div要做的动画
tab()函数
1 // 每个div设置前一个div的透明度为1，并且设置自己的透明度为0和背景图片
2 function tab(n){
3 // 0
4 if(divs[n-1]){
5 divs[n-1].style.opacity = 1;
6 }
7 // 70
8 if(divs[n]){
9 divs[n].style.opacity = 0;
10 divs[n].style.backgroundImage = "url(img/0"+imgNum+".png)";
11 }
12 }
第三步
写go()函数，利用定时器改变tab()函数的参数并且适时的改变背景图片
go()
1 //给tab()函数传递n值
2 function go(){
3 timer = setInterval(function(){
4 tab(num);
5 num++;
6 //一张图片切换完毕
7 if(num == 71){
8 clearInterval(timer);
9 //切换下一张图片
10 imgNum++;
11 //num清0，动画效果从第一个div开始
12 num = 0;
13 //当切到最后一张图片时，在从第一张开始切换
14 if(imgNum == 6){
15 imgNum = 1;
16 }
17 //切换完一张图片时切换下一张图片的间隔
18 setTimeout(go,800);
19 }
20 //div变换的速度
21 },80);
22 }
总结：这个动画效果实现起来简单，代码问题不大，主要就是实现思路的问题。
源码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>图片切换（动画版）</title>
6 <style>
7 body{
8 margin: 0;
9 background-color: #5e5e5e;
10 }
11 #box{
12 width: 857px;
13 height: 574px;
14 padding-top: 126px;
15 padding-left:143px;
16 background: url(img/bg.png) no-repeat;
17 margin: 0px auto;
18 }
19 #wrap{
20 width: 700px;
21 height: 420px;
22 transform-style: preserve-3d;
23 perspective: 800px;
24 }
25 #wrap div{
26 width: 10px;
27 height: 420px;
28 background: url(img/01.png) no-repeat;
29 float: left;
30 transition: .5s;
31 }
32 </style>
33 </head>
34 <body>
35 <div id="box">
36 <div id="wrap"></div>
37 </div>
38 <script>
39
40
41 //在wrap下，写70个div，每个div显示一张图片的一小片部分，这样70个div能完整的显示出一张图片
42 for(var i=0;i<70;i++){
43 str +=‘<div style="background-position-x:‘+(-10*i)+‘px"></div>‘;
44 }
45 oWrap.innerHTML = str;
46
47 //获取70个div
48 var divs = oWrap.getElementsByTagName(‘div‘);
49
50 go();
51
52 //给tab()函数传递n值
53 function go(){
54 timer = setInterval(function(){
55 tab(num);
56 num++;
57 //一张图片切换完毕
58 if(num == 71){
59 clearInterval(timer);
60 //切换下一张图片
61 imgNum++;
62 //num清0，动画效果从第一个div开始
63 num = 0;
64 //当切到最后一张图片时，在从第一张开始切换
65 if(imgNum == 6){
66 imgNum = 1;
67 }
68 //切换完一张图片时切换下一张图片的间隔
69 setTimeout(go,800);
70 }
71 //div变换的速度
72 },80);
73 }
74
75 // 每个div设置前一个div的透明度为1，并且设置自己的透明度为0和背景图片
76 function tab(n){
77 // 0
78 if(divs[n-1]){
79 divs[n-1].style.opacity = 1;
80 }
81 // 70
82 if(divs[n]){
83 divs[n].style.opacity = 0;
84 divs[n].style.backgroundImage = "url(img/0"+imgNum+".png)";
85 }
86 }
87
88
89 </script>
90 </body>
91 </html>
时间： 2024-10-09 23:39:39