javaScript小项目-----轮播图--按钮+定时器

╰半橙微兮° 2022-07-17 00:29 167阅读 0赞

</pre><pre class="html" name="code" snippet_file_name="blog_20160823_5_8748669" code_snippet_id="1847550">
        <head>
            <meta charset="utf-8">
            <title>实现tab切换效果</title>
    <style type="text/css">
    .pic{
    	margin: 0 auto;
    	padding: 0;
    	width: 840px;
    	height: 300px;
    }
    #myImg{
    	margin:0;
    	border: 0;
    	padding:0;
    	width: 840px;
    	height: 300px;
    	background-image: url(./img/pic_01.jpg);
    }
    .btn{
    	position: absolute;
    	width:  100px;
    	height: 40px;
    	margin-left: 385px;
    	margin-top: 260px;
    	z-index: 1;
    }
    .btnt{
    	width: 25px;
    	height: 25px;
    	background-color: #212121;
    	border-radius: 12px;
    	color: #ffffff;
    	cursor: pointer;
    }
    </style>
    </head>
    <body >
    <div class="pic">
    <div  id="myImg">
    	<div class="btn">
    		<input type="button" value="1"  id="btn1" οnclick="btn(1)" class="btnt">
    		<input type="button" value="2"  id="btn2" οnclick="btn(2)" class="btnt">
    		<input type="button" value="3"  id="btn3" οnclick="btn(3)" class="btnt">
    	</div>
    </div>
    </div>
    <script type="text/javascript">
    var num=1;
    var loop=true;
    var myImg=document.getElementById("myImg");
    var change=function(){
    	// console.log(loop);
    	if(loop){
    		if(num<3){
    	      		num+=1;
    				myImg.style.backgroundImage="url(./img/pic_0"+num+".jpg)";
    	      }else{
    	      		myImg.style.backgroundImage="url(./img/pic_01.jpg)";
    	      	num=1;
    	      }
    	  }
          else{
              console.log("假装什么也没发生");
          }
    }
    setInterval(change,2000);
    myImg.οnmοuseοver=function(){
    	    loop=false;
    }
    myImg.οnmοuseοut=function(){
            loop=true;
    }
    function btn(){
    	console.log(arguments[0]);
    	console.log("url(./img/pic_0"+arguments[0]+".jpg)");
    	myImg.style.backgroundImage="url(./img/pic_0"+arguments[0]+".jpg)";
    }
    
    </script>
    </body>
    </html>

做了个简单的轮播图，有按钮和定时器  。