自己写的”图片轮换效果“代码

最新推荐文章于 2022-10-25 15:30:42 发布

二号哨位

最新推荐文章于 2022-10-25 15:30:42 发布

阅读量937

点赞数

分类专栏： JavaScript 文章标签： function javascript class stylesheet xhtml list

本文链接：https://blog.csdn.net/junjun08/article/details/7774433

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是我在学习《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);
	}
}

这是鄙人的一个小实践，还有很多地方不到位，如果有哪位大虾看到其中还有优化、完善的地方，欢迎提点。

二号哨位

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写的”图片轮换效果“代码

这是我在学习《JavaScript DOM 编程艺术》这本书后，运用该书里面的分层思想，将结构、样式、表现全部分离，自己写的一个图片轮换效果的代码。我看过其它一些图片轮换的JavaScript代码，感觉好多语句都看不懂，没怎么见过。所以我自己写了一个，我并没有用其他特别复杂的语句，基本上使用的全是最基本的DOM方法，并进行了一些必要的对象检测。总共三个文件，一个HTML页面结构文件，一个CSS
复制链接

扫一扫