javascript 兑现图片轮流播放效果
日期：2014-05-16 浏览次数：20361 次
javascript 实现图片轮流播放效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/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>
<script type="text/javascript">
window.onload=function () {
var ul=getByClass('buttons')[0];
var btns=ul.getElementsByTagName('li');
var scrollContent=getByClass('scrollContent')[0];
for (var i=0;i<btns.length;i++) {
(function (i) {
btns[i].onmouseover=function () {
//scrollContent.style.top=(-i*150)+"px";
var top=parseInt(scrollContent.style.top) || 0;
for (var j=0;j<btns.length;j++) {
btns[j].className="";
}
this.className="hover";
};
})(i);
}
};
function getByClass(className,context) {
context=context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByTagName('*'),
ret=[];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names=node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
</script>
<style type="text/css">
.scrollContent {
width:470px;
height:750px;
position:absolute;
top:0;
left:0;
}
.scrollFrame {
width:470px;
height:150px;
overflow:hidden;
position:relative;
}
.scrollFrame .buttons {
height:30px;
position:absolute;
right:10px;
top:100px;
}
.scrollFrame .buttons li {
display:block;
width:20px;
height:20px;
border:1px solid orange;
float:left;
margin-right:4px;
text-align:center;
line-height:20px;
cursor:pointer;
color:orange;
background:white;
font-weight:bold;
}
.scrollFrame .buttons li.hover {
width:24px;
height:24px;
line-height:24px;
background:orange;
color:white;
margin-top:-2px;
}
</style>
</head>
<body>
<h1>图片轮播器</h1>
<div class="scrollFrame">
<div class="scrollContent">
<img src="1.jpg" alt="1" />
<img src="2.gif" alt="1" />
<img src="3.gif" alt="1" />
<img src="4.gif" alt="1" />
<img src="5.jpg" alt="1" />
</div>
<ul class="buttons">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/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>
<script type="text/javascript">
window.onload=function () {
var ul=getByClass('buttons')[0];
var btns=ul.getElementsByTagName('li');
var scrollContent=getByClass('scrollContent')[0];
for (var i=0;i<btns.length;i++) {
(function (i) {
btns[i].onmouseover=function () {
//scrollContent.style.top=(-i*150)+"px";
var top=parseInt(scrollContent.style.top) || 0;
for (var j=0;j<btns.length;j++) {
btns[j].className="";
}
this.className="hover";
};
})(i);
}
};
function getByClass(className,context) {
context=context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByTagName('*'),
ret=[];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names=node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
</script>
<style type="text/css">
.scrollContent {
width:470px;
height:750px;
position:absolute;
top:0;
left:0;
}
.scrollFrame {
width:470px;
height:150px;
overflow:hidden;
position:relative;
}
.scrollFrame .buttons {
height:30px;
position:absolute;
right:10px;
top:100px;
}
.scrollFrame .buttons li {
display:block;
width:20px;
height:20px;
border:1px solid orange;
float:left;
margin-right:4px;
text-align:center;
line-height:20px;
cursor:pointer;
color:orange;
background:white;
font-weight:bold;
}
.scrollFrame .buttons li.hover {
width:24px;
height:24px;
line-height:24px;
background:orange;
color:white;
margin-top:-2px;
}
</style>
</head>
<body>
<h1>图片轮播器</h1>
<div class="scrollFrame">
<div class="scrollContent">
<img src="1.jpg" alt="1" />
<img src="2.gif" alt="1" />
<img src="3.gif" alt="1" />
<img src="4.gif" alt="1" />
<img src="5.jpg" alt="1" />
</div>
<ul class="buttons">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
