这是我在学习《JavaScript DOM 编程艺术》这本书后,运用该书里面的分层思想,将结构、样式、表现全部分离,自己写的一个图片轮换效果的代码。
我看过其它一些图片轮换的JavaScript代码,感觉好多语句都看不懂,没怎么见过。所以我自己写了一个,我并没有用其他特别复杂的语句,基本上使用的全是最基本的DOM方法,并进行了一些必要的对象检测。总共三个文件,一个HTML页面结构文件,一个CSS样式文件,还有一个就是JavaScript文件。
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/html; charset=gb2312" />
<title>图片轮换特效</title>
<link rel="stylesheet" href="style/picfocus.css" media="screen" />
</head>
<body>
<div id="focus">
<ul class="focus_pic" id="focus_pic">
<li class="active"><img src="images/psb_1.jpg" width="670" height="446" alt="结婚第一天" /></li>
<li><img src="images/psb_2.jpg" width="670" height="446" alt="结婚第二天" /></li>
<li><img src="images/psb_3.jpg" width="670" height="446" alt="结婚第三天" /></li>
<li><img src="images/psb_4.jpg" width="670" height="446" alt="结婚第四天" /></li>
</ul>
<ul class="focus_count" id="focus_count">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="scripts/focus.js"></script>
</body>
</html>
在该页面中引用了样式 "picfocus.css" 和 "focus.js' javascript脚本文件。大家想复制下来学习交流的话要注意图片和两个链接文件的路径。
2、样式表如下:
@charset "gb2312";
/* CSS Document */
/***************加底色测试******************/
#focus {
background-color:#CC0;
padding:0;
margin:0;
}
/***************公共部分********************/
#focus {
position:relative;
float:left;
}
#focus ul {
padding:0;
margin:0;
}
#focus li {
list-style:none;
padding:0;
margin:0;
}
#focus .none {
display:none;
}
/***************图片部分*********************/
#focus .focus_pic li {
display:none;
}
#focus .focus_pic li.active {
display:block;
}
#focus .focus_pic img {
display:block;
}
/***************序号部分*********************/
#focus .focus_count {
position:absolute;
right:10px;
bottom:5px;
}
#focus .focus_count li {
font-size:13px;
color:#FFF;
background-color:#000;
float:left;
height:16px;
line-height:16px;
width:16px;
text-align:center;
margin-left:5px;
cursor:pointer;
}
#focus .focus_count li.active {
background-color:#F33;
}
#focus .bl {
display:block;
}
3、下面这部分JavaScript代码是效果实现的关键:
// 共享onload事件
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareRoll);
addLoadEvent(preparePicOver);
//
var cycle = true;
function showCurrentScreen(element, num)
{
var list = element.getElementsByTagName("li");
for (var j=0; j<list.length; j++) {
if (j == num) {
list[j].setAttribute("class", "active");
} else {
list[j].setAttribute("class", "");
}
}
element.num = num;
}
function prepareRoll()
{
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
var focuspic = document.getElementById("focus_pic");
var pic_item = focuspic.getElementsByTagName("li");
var focuscount = document.getElementById("focus_count");
var count_item = focuscount.getElementsByTagName("li");
if (focuspic.movement) clearTimeout(focuspic.movement);
if (!focuspic.num) focuspic.num = 0;
if (focuspic.num == pic_item.length) focuspic.num = 0;
//显示当前图片
showCurrentScreen(focuspic, focuspic.num);
//显示当前数字
showCurrentScreen(focuscount, focuspic.num);
focuspic.num++;
if (cycle == true) focuspic.movement = setTimeout("prepareRoll()", 1000);
}
function preparePicOver()
{
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
var focuspic = document.getElementById("focus_pic");
var pic_item = focuspic.getElementsByTagName("li");
var focuscount = document.getElementById("focus_count");
var count_item = focuscount.getElementsByTagName("li");
count_item[0].onmouseover = function() {
showCurrentScreen(focuspic, 0);
showCurrentScreen(focuscount, 0);
}
count_item[1].onmouseover = function() {
showCurrentScreen(focuspic, 1);
showCurrentScreen(focuscount, 1);
}
count_item[2].onmouseover = function() {
showCurrentScreen(focuspic, 2);
showCurrentScreen(focuscount, 2);
}
count_item[3].onmouseover = function() {
showCurrentScreen(focuspic, 3);
showCurrentScreen(focuscount, 3);
}
}
这是鄙人的一个小实践,还有很多地方不到位,如果有哪位大虾看到其中还有优化、完善的地方,欢迎提点。