js简易的图片自动轮播

最新推荐文章于 2023-11-11 10:19:25 发布

Scho_l

最新推荐文章于 2023-11-11 10:19:25 发布

阅读量1.6k

点赞数 1

分类专栏： Html/CSS/JS 文章标签： js图片轮播 javascript css html 自动轮播

本文链接：https://blog.csdn.net/u010793590/article/details/28878219

版权

Html/CSS/JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个小DEMO，主要用box固定长宽用于显示图片，将图片放入imagebox中，连接起来，每次换图片则将imagebox的style属性的margin-left改动，能形成轮播的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box {
	width: 900px;
	height: 350px;
	margin: 20px;
	overflow: hidden;
	margin:0 auto;
}
.imagebox {
	width: 3600px;
	height: 350px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.imagebox img {
	width: 900px;
	float: left;
	height: 350px;
}
</style>
</head>

<body>
<div class="box">
  <div id="ImageBox" class="imagebox"> 
  <img class="trans_image" src="images/图片点击轮转/image-53.jpg" /> 
  <img class="trans_image" src="images/图片点击轮转/image-54.jpg"/> 
  <img class="trans_image" src="images/图片点击轮转/image-55.jpg"/> 
  <img class="trans_image" src="images/图片点击轮转/image-56.jpg"/> 
  </div>
</div>
<div>
  <input type="button" value="left" οnclick="turnleft()"/>
  <input  type="button" value="right" οnclick="turnright()"/>
</div>
<script language="javascript">
var int=setInterval("change()",3*1000);
var a=document.getElementById("ImageBox");
var i=1;
function change(){
	if(i==4){
		i=0;	
	}
	i=i+1;
	a.style.marginLeft=(1-i)*900+"px";

}
function stopchange(){clearInterval(int);}
function startchange(){int=setInterval("change()",2*1000);}
a.οnmοuseοver=function(){clearInterval(int);}
a.οnmοuseοut=function() {int=setInterval("change()",2*1000);}
function turnleft(){
	stopchange();
	i=i+1;
	a.style.marginLeft=(1-i)*900+"px";
		if(i==4){
		i=0;	
	}
	startchange();
}
function turnright(){
	stopchange();
	if(i>1){
	a.style.marginLeft=(2-i)*900+"px";
	i=i-1;
	}else{
		a.style.marginLeft=-3*900+"px";
		i=4;
	}
	startchange();
}
</script>
</body>
</html>