怎样实现原生js定时器-模拟右键点击实现轮播效果

本帖最后由 u013728512 于 2014-02-24 14:38:42 编辑

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <style type="text/css">
    *{padding:0;border:0;margin:0;}
    #anniu-l,#anniu-r{width:45px;height:45px;background:green;float:left;margin-top:100px;cursor: pointer;}
    #tu{width:660px;height:100px;margin:70px 30px;float:left;position: relative;overflow: hidden}
    #tu ul{list-style:none;width:2000px;height:100px;overflow: hidden;}
    #tu1{position: absolute;left:0px;z-index:1;}
    #tu ul li{float:left;width:100px;height:100px;margin-right:10px;background: red;display:block;}
    </style>
    <script type="text/javascript">
    var nowpic=0
    window.onload=function(){

    var myli=document.getElementById("tu1").getElementsByTagName('li')
    document.getElementById("anniu-r").onclick=function(){
    nowpic++;
    console.log(nowpic)
    if(nowpic==0){
    document.getElementById("tu1").style.left="0px";
    }else if(nowpic==1){
    document.getElementById("tu1").style.left="-110px";
    }else if(nowpic==2){
    document.getElementById("tu1").style.left="-220px";
    }else if(nowpic==3){
    document.getElementById("tu1").style.left="-330px";
    }else{
    nowpic=0;
    document.getElementById("tu1").style.left="0px";
    }
    }
    document.getElementById("anniu-l").onclick=function(){
    nowpic--;
    console.log(nowpic)
    if(nowpic==0){
    document.getElementById("tu1").style.left="0px";
    }else if(nowpic==-1||nowpic==1){
    document.getElementById("tu1").style.left="-110px";
    }else if(nowpic==-2||nowpic==2){
    document.getElementById("tu1").style.left="-220px";
    }else if(nowpic==-3||nowpic==3){
    document.getElementById("tu1").style.left="-330px";
    }else{
    nowpic=0;
    document.getElementById("tu1").style.left="0px";
    }
    }
    }
    var iID=setInterval(setbgColor, 1000);
    function setbgColor(){
    nowpic--;
    //console.log(nowpic)
    if(nowpic==0){
    document.getElementById("tu1").style.left="0px";
    }else if(nowpic==-1||nowpic==1){
    document.getElementById("tu1").style.left="-110px";
    }else if(nowpic==-2||nowpic==2){
    document.getElementById("tu1").style.left="-220px";
    }else if(nowpic==-3||nowpic==3){
    document.getElementById("tu1").style.left="-330px";
    }else{
    nowpic=0;
    document.getElementById("tu1").style.left="0px";
    }
    }
    </script>
    <body>
    <div id="anniu-l"></div>
    <div id="tu">
    <ul id="tu1">
    <li><img src="1.jpg" /></li>
    <li><img src="2.jpg" /></li>
    <li><img src="3.jpg" /></li>
    <li><img src="4.jpg" /></li>
    <li><img src="5.jpg" /></li>
    <li><img src="6.jpg" /></li>
    <li><img src="7.jpg" /></li>
    <li><img src="8.jpg" /></li>
    <li><img src="9.jpg" /></li>
    </ul>
    </div>
    <div id="anniu-r"></div></body>
    </html>
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <style type="text/css">
        *{padding:0;border:0;margin:0;}
    #anniu-l,#anniu-r{width:45px;height:45px;background:green;float:left;margin-top:100px;cursor: pointer;}
    #tu{width:660px;height:100px;margin:70px 30px;float:left;position: relative;overflow: hidden}
    #tu ul{list-style:none;width:2000px;height:100px;overflow: hidden;}
    #tu1{position: absolute;left:0px;z-index:1;}
    #tu ul li{float:left;width:100px;height:100px;margin-right:10px;background: red;display:block;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var nowpic=0
    var myli=document.getElementById("tu1").getElementsByTagName('li')
    document.getElementById("anniu-r").onclick=function(){
    nowpic++;
    console.log(nowpic)
    if(nowpic==0){
    document.getElementById("tu1").style.left="0px";
    }else if(nowpic==1){
    document.getElementById("tu1").style.left="-110px";
    }else if(nowpic==2){
    document.getElementById("tu1").style.left="-220px";
    }else if(nowpic==3){
    document.getElementById("tu1").style.left="-330px";
    }else{
    nowpic=0;
    document.getElementById("tu1").style.left="0px";
    }
    }setTimeout(function(){
    nowpic++;
    console.log(nowpic)
    if(nowpic==0){
    document.getElementById("tu1").style.left="0px";
    }else if(nowpic==1){
    document.getElementById("tu1").style.left="-110px";
    }else if(nowpic==2){
    document.getElementById("tu1").style.left="-220px";
    }else if(nowpic==3){
    document.getElementById("tu1").style.left="-330px";
    }else{
    nowpic=0;
    document.getElementById("tu1").style.left="0px";
    } setTimeout(arguments.callee, 1000);}, 1000);document.getElementById("anniu-l").onclick=function(){
    nowpic--;
    console.log(nowpic)
    if(nowpic==0){
    document.getElementById("tu1").style.left="0px";
    }else if(nowpic==-1||nowpic==1){
    document.getElementById("tu1").style.left="-110px";
    }else if(nowpic==-2||nowpic==2){
    document.getElementById("tu1").style.left="-220px";
    }else if(nowpic==-3||nowpic==3){
    document.getElementById("tu1").style.left="-330px";
    }else{
    nowpic=0;
    document.getElementById("tu1").style.left="0px";
    }
    }
    }
    </script>
    <body>
    <div id="anniu-l"></div>
    <div id="tu">
    <ul id="tu1">
    <li><img src="1.jpg" />1</li>
    <li><img src="2.jpg" />2</li>
    <li><img src="3.jpg" />3</li>
    <li><img src="4.jpg" />4</li>
    <li><img src="5.jpg" />5</li>
    <li><img src="6.jpg" />6</li>
    <li><img src="7.jpg" />7</li>
    <li><img src="8.jpg" />8</li>
    <li><img src="9.jpg" />9</li>
    </ul>
    </div>
    <div id="anniu-r"></div>
    </body>
    </html>