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

最新推荐文章于 2023-05-18 20:23:20 发布

阿冰介

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量966

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/dexing07/article/details/52295056

版权

javaScript 专栏收录该内容

38 篇文章 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>

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

阿冰介

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript小项目-----轮播图--按钮+定时器

做了个简单的轮播图，有按钮和定时器实现tab切换效果.pic{ margin: 0 auto; padding: 0; width: 840px; height: 300px;}#myImg{ margin:0; border: 0; padding:0; width: 840px; height: 300px
复制链接

扫一扫