图片切换 电视机屏保效果

编程的核心是思路。

<div id="box">
    <div id="wrap">
    </div>
</div>

<style>
    body{
        margin: 0;
        background-color: #5e5e5e;
    }
    #box{
        width: 857px;
        height: 574px;
        padding-top: 126px;
        padding-left:143px;
        background: url(img/bg.png) no-repeat;
        margin: 0px auto;
    }
    #wrap{
        width: 700px;
        height: 420px;
        transform-style: preserve-3d;
        perspective: 800px;
    }
    #wrap div{
        width: 10px;
        height: 420px;
        background: url(img/01.png) no-repeat;
        float: left;
        transition: .5s;
    }
</style>

<script type="text/javascript">
   window.onload = function(){
        var  wrap = document.getElementById("wrap");
      var str = ""
       for (var i = 0; i <70; i++) {
           str += "<div style ='background-Position-X :"+(-10*i)+"px'+></div>"
       }
       wrap.innerHTML = str;
       var divs = wrap.getElementsByTagName("div");
       var num = 0;
       var timer ;
       var imgnum = 2; //从第二张开始变
       go();
       function go()
       {
            timer = setInterval(function(){
                 tab(num);
                 num++;
                        if(num == 71){   //为什么是71   因为  第 divs[n -1] = divs [69]  n = 70
                     clearInterval(timer);//不清定时器的后果是  动画速度累加  一次结束加一次
                     console.log("一次结束了")
                     imgnum++;
                     if(imgnum == 6){
                         imgnum = 1;
                     }
                     num = 0;
                     setTimeout(go,500);
                 }
            },80)
      
       }
    
       function tab ( n)  //切换的效果是  前一张变不透明   当前一张透明
       {
           if (divs[n-1]) {
           divs[n-1].style.opacity = 1; 
       
           }
           if(divs[n]) 
           {
               divs[n].style.opacity = 0;
               divs[n].style.backgroundImage = "url(img/0"+imgnum+".png)";
           }
       }
   }
     
</script>