图片幻灯片式播放
用到的主知识点：
setTimeout()
演示地址：
http://www.vkill.net/demo/image_slide/image_slide.html
网页程序打包下载：
Download ( 148 downloads)
主代码：
<!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>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
margin: 20px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
div {
/* border: 1px solid #00cc00;
*/
}
.floatl {
float: left;
}
.floatr {
float: right;
}
.img {
width: 300px;
height: 200px;
border: 0px;
}
div.main {
border: 2px solid #00ff00;
width: 300px;
height: 220px;
}
div.image {
width: 100%;
height: 200px;
/* background-color: #CC3399;
*/
}
div.show_num {
border-top: 3px solid #cc0000;
line-height: 18px;
width: 100%;
height: auto;
/* background-color: #FFFF33;
*/
}
div.show_num_one {
width: 12%;
height: 100%;
text-align: center;
background-color: #cccccc;
color: #000000;
border-left: 2px solid #ffffff;
}
-->
</style>
<script type="text/javascript">
var int
function load() {
//从隐式输入框中获得值后处理成为数组
imgs = document.getElementById("img_urls").value.split(",")
urls = document.getElementById("url_urls").value.split(",")
int=auto_trans_img() //开始轮换图片
}
//自动轮换图片
var n=0
function auto_trans_img(s) {
if (!s) {s=2000}
set_img_src('img_img',imgs[n])
set_a_href('img_a',urls[n])
numobj="num_"+n
if (n==0) {
numobjup="num_"+(imgs.length-1)
} else {
numobjup="num_"+(n-1)
}
set_bgcolor(numobj)
set_color(numobj)
clear_bgcolor(numobjup)
clear_color(numobjup)
int=setTimeout("auto_trans_img()",s)
n=n+1
if (n==(imgs.length)) {n=0}
}
function sleep(s) {
if (!s) {s=3000}
int=setTimeout("auto_trans_img()",s)
}
function stop_trans_img(obj) {
clearTimeout(int) //取消由setTimeout()方法设置的timeout
if (!obj) {
n = n
} else {
n = parseInt(obj.substr(obj.length-1,1))
//还原所有颜色为默认
for (i=0 ; i<=imgs.length-1 ; i++) {
clear_bgcolor("num_"+i)
clear_color("num_"+i)
}
}
}
function set_img_src(obj,src) {
document.getElementById(obj).src=src
}
function set_a_href(obj,url) {
document.getElementById(obj).href=url
}
function set_bgcolor(obj) {
document.getElementById(obj).style.backgroundColor='#cc0000'
}
function clear_bgcolor(obj) {
document.getElementById(obj).style.backgroundColor='#cccccc'
}
function set_color(obj) {
document.getElementById(obj).style.color='#ffffff'
}
function clear_color(obj) {
document.getElementById(obj).style.color='#000000'
}
</script>
</head>
<!-- onload事件不能去 -->
<body onload="load()">
<div class="main">
<div class="floatl image">
<a id="img_a" href="#" onmousemove="stop_trans_img()" onmouseout="sleep()"><img class="img" id="img_img" src="" /></a>
</div>
<div class="floatr show_num">
<div class="floatr show_num_one" id="num_0" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >1</div>
<div class="floatr show_num_one" id="num_1" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >2</div>
<div class="floatr show_num_one" id="num_2" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >3</div>
<div class="floatr show_num_one" id="num_3" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >4</div>
<div class="floatr show_num_one" id="num_4" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >5</div>
<!-- 这里的两个隐式输入框用来定义图片和链接的值，这样就可以用ajax来动态更新了 -->
<input type="hidden" id="img_urls" value="11.jpg,12.jpg,3.jpg,4.jpg,5.jpg" />
<input type="hidden" id="url_urls" value="#1,#2,#3,#4,#5" />
</div>
</div>
<p>当鼠标放到图片上时，放映"暂停"，点击可进入相应链接，鼠标移开后自动开始放映</p>
<p>也可点击数字，会从此数字自动开始放映</p>
</body>
</html>
Last modified by vkill on2008/11/08 09:24
用到的主知识点：
setTimeout()
演示地址：
http://www.vkill.net/demo/image_slide/image_slide.html
网页程序打包下载：
Download ( 148 downloads)主代码：
<!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>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
margin: 20px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
div {
/* border: 1px solid #00cc00;
*/
}
.floatl {
float: left;
}
.floatr {
float: right;
}
.img {
width: 300px;
height: 200px;
border: 0px;
}
div.main {
border: 2px solid #00ff00;
width: 300px;
height: 220px;
}
div.image {
width: 100%;
height: 200px;
/* background-color: #CC3399;
*/
}
div.show_num {
border-top: 3px solid #cc0000;
line-height: 18px;
width: 100%;
height: auto;
/* background-color: #FFFF33;
*/
}
div.show_num_one {
width: 12%;
height: 100%;
text-align: center;
background-color: #cccccc;
color: #000000;
border-left: 2px solid #ffffff;
}
-->
</style>
<script type="text/javascript">
var int
function load() {
//从隐式输入框中获得值后处理成为数组
imgs = document.getElementById("img_urls").value.split(",")
urls = document.getElementById("url_urls").value.split(",")
int=auto_trans_img() //开始轮换图片
}
//自动轮换图片
var n=0
function auto_trans_img(s) {
if (!s) {s=2000}
set_img_src('img_img',imgs[n])
set_a_href('img_a',urls[n])
numobj="num_"+n
if (n==0) {
numobjup="num_"+(imgs.length-1)
} else {
numobjup="num_"+(n-1)
}
set_bgcolor(numobj)
set_color(numobj)
clear_bgcolor(numobjup)
clear_color(numobjup)
int=setTimeout("auto_trans_img()",s)
n=n+1
if (n==(imgs.length)) {n=0}
}
function sleep(s) {
if (!s) {s=3000}
int=setTimeout("auto_trans_img()",s)
}
function stop_trans_img(obj) {
clearTimeout(int) //取消由setTimeout()方法设置的timeout
if (!obj) {
n = n
} else {
n = parseInt(obj.substr(obj.length-1,1))
//还原所有颜色为默认
for (i=0 ; i<=imgs.length-1 ; i++) {
clear_bgcolor("num_"+i)
clear_color("num_"+i)
}
}
}
function set_img_src(obj,src) {
document.getElementById(obj).src=src
}
function set_a_href(obj,url) {
document.getElementById(obj).href=url
}
function set_bgcolor(obj) {
document.getElementById(obj).style.backgroundColor='#cc0000'
}
function clear_bgcolor(obj) {
document.getElementById(obj).style.backgroundColor='#cccccc'
}
function set_color(obj) {
document.getElementById(obj).style.color='#ffffff'
}
function clear_color(obj) {
document.getElementById(obj).style.color='#000000'
}
</script>
</head>
<!-- onload事件不能去 -->
<body onload="load()">
<div class="main">
<div class="floatl image">
<a id="img_a" href="#" onmousemove="stop_trans_img()" onmouseout="sleep()"><img class="img" id="img_img" src="" /></a>
</div>
<div class="floatr show_num">
<div class="floatr show_num_one" id="num_0" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >1</div>
<div class="floatr show_num_one" id="num_1" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >2</div>
<div class="floatr show_num_one" id="num_2" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >3</div>
<div class="floatr show_num_one" id="num_3" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >4</div>
<div class="floatr show_num_one" id="num_4" onmouseover="style.cursor='hand'" onclick="stop_trans_img(this.id); auto_trans_img();" >5</div>
<!-- 这里的两个隐式输入框用来定义图片和链接的值，这样就可以用ajax来动态更新了 -->
<input type="hidden" id="img_urls" value="11.jpg,12.jpg,3.jpg,4.jpg,5.jpg" />
<input type="hidden" id="url_urls" value="#1,#2,#3,#4,#5" />
</div>
</div>
<p>当鼠标放到图片上时，放映"暂停"，点击可进入相应链接，鼠标移开后自动开始放映</p>
<p>也可点击数字，会从此数字自动开始放映</p>
</body>
</html>
Last modified by vkill on2008/11/08 09:24
网友评论(0)：
