图片切换（动画版）
Posted 老板丶鱼丸粗面
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片切换（动画版）相关的知识，希望对你有一定的参考价值。
学习了妙味课堂的图片切换（动画版）
预览：图片切换
这个小效果相对简单一点。
知识预备：
【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>
以上是关于图片切换（动画版）的主要内容，如果未能解决你的问题，请参考以下文章