JS怎么设置图片居中

JavaScript018

JS怎么设置图片居中,第1张

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function Zoom(obj,width, height)

{ var img=new Image()

img.src=obj.src

var scale=Math.max(width/img.width, height/img.height)

var newWidth=img.width*scale

var newHeight=img.height*scale

var div=obj.parentNode

obj.width=newWidth

obj.height=newHeight

div.style.width=width+"px"

div.style.height=height+"px"

div.style.overflow="hidden"

obj.style.marginLeft=(width-newWidth)/2+"px"

obj.style.marginTop=(height-newHeight)/2+"px"}

</script>

</head>

<body>

<div>

<img src="http://pic.hsw.cn/0/10/13/05/10130520_504118.jpg" onload="Zoom(this, 150, 100)" border="0" />

</div>

</body></html>

轮播都会有个div之类的外面大框，限定显示大小，你可以调一下，里面的图片有的是li有的是table 有的是通过更换图片名，你要做的是给图片限定最大显示尺寸和最小尺寸，然后设定size为 100% 100% 这样就会全部显示了

这个要看具体的代码了，最好把关键的代码发下；

如果可以的，可以给这介效果的HTML代码外面加上一个宽度正好的DIV，然后再给这个DIV加上CSS：maigin:0 auto这样应该就可以了；

但是也看这样写效果还有没有。总之解决方法不惟一，且不看具体情况也不好说怎么弄。

方法:

将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；

轮播图分为手动轮播和自动轮播；手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。

所有的基础知识：dom操作，定时器，事件运用。