首页 > 代码库 > 图片切换（动画版）

图片切换（动画版）

2024-08-24 04:29:40   219人阅读

学习了妙味课堂的图片切换（动画版）

预览：图片切换

这个小效果相对简单一点。

知识预备：

【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>

 

图片切换（动画版）


联系
我们