<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<link type='text/css' rel='stylesheet' href='http://www.css88.com/demo/Animate Image/style3.css' />
<script type="text/javascript" src="http://www.css88.com/demo/Animate Image/sliderIMG3.js"></script>
<title>Slider view Images</title>
<script>
window.onload = function(){
sliderIMG.create('imageFlow',{count:8, speed:5, auto:true,timer:5000})
}
</script>
</head>
<body>
<div id='imageFlow'>
<div class='top'></div>
<div class='bank'>
<ul class='imageList'>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/0.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/1.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/2.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/3.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/4.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/5.JPG' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/6.JPG' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/7.JPG' /></a></li>
</ul>
</div>
<div class='mainOpacity'></div>
<div class='leftOpacity'></div>
<div class='rightOpacity'></div>
<div class='scrollbar'>
<span class='currentScroll'></span>
</div>
</div>
<div id='content'>
<h3>使用方法:</h3>
<p>sliderIMG.create('DIVid',{count:*, speed:*, auto:*, timer:*})</p>
<br />
<pre>必须参数: count ---->数字类型, 图片数量
可选参数:
speed ---->数字类型, 滚动速率, 默认为:5;
auto ---->布尔类型, 设置自动滚动, 为true则自动, 反之不自动, 默认为: false
timer ---->数字类型, 设置每个几秒自动滚动一次, 默认为: 5000ms = 5s
</pre>
</div>
</body>
</html></font>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>
obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),看下面代码XML/HTML代码
<!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=utf-8″ />
<title>JS获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{color:#cdcdcd}
–>
</style>
</head>
<body>
<div id=”css88″ class=”ss” style=”width:200pxheight:200pxbackground:#333333″>JS获取CSS属性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88”).style.width)//200px
alert(document.getElementById(“css88”).style.color)//空白
</script>
</body>
</html>
上面这个例子对id为”css88″的div设置了2种烦事的样式,包括style和外部样式class。
从alert出来的信息可以看到,document.getElementById(“css88”).style方法获取不到class为ss的属性和值。
IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。
另外一个方法是:
XML/HTML代码
<!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=utf-8″ />
<title>S获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{background:bluecolor:#cdcdcdwidth:200px}
–>
</style>
</head>
<body>
<p id=”qq” class=”ss” >sdf</p>
<script type=”text/javascript”>
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop]
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, “-$1”)
propprop = prop.toLowerCase ()
return document.defaultView.getComputedStyle (obj,null)[prop]
}
return null
}
var dd=document.getElementById(“qq”)
alert(GetCurrentStyle(dd,”width”))
</script>
</body>
</html>
当然,如果您是引用外部的css文件同样适用。
另:可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]
}