js图片轮播怎么让轮播界面居中?

JavaScript017

js图片轮播怎么让轮播界面居中?,第1张

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

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

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

方法:

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

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

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

<!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>