，帮忙改下图片播放的代码

2013-08-09

求助，帮忙改下图片播放的代码headscript typetext/javascript languagejavascriptvar li docu

求助，帮忙改下图片播放的代码

<head>
<script type="text/javascript" language="javascript">
var li = document.getElementsByTagName("li");
function zidong(){
if(a==0)document.getElementsByTagName("img")[0].src = "01.jpg";
document.getElementsByTagName("img")[0].src = document.getElementsByTagName("img")[a].src;
if(a == 4){a=0;}
else if(a<4){a+=1;}
}
window.onload = function (){
li[0].onmouseover = function (){genghuan(0);}
li[1].onmouseover = function (){genghuan(1);}
}
</script>
</head>

head的一部分代码

然后在body部分实现自动播放

<body>
<script>
var turn = setInterval(zidong,1000);
li[0].onmouseover=function() {clearInterval(turn);}
li[1].onmouseover=function() {clearInterval(turn);}
</script>
</body>

但是这里的

li[0].onmouseover=function() {clearInterval(turn);}

不好使了

还有，如果停止自动播放，再次启动自动播放后让图片在不是从最初的图片开始播放，而是在上一个图片的位置上继续播放，代码怎么写？
[解决办法]
本帖最后由 showbo 于 2013-08-06 17:23:43 编辑

<!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>
#tupian01
{
    position:absolute;
    width:180px;
    height:260px;
    overflow:hidden;
    left: 360px;
    top: 20px;
}
 
#anjian01
{
    position:absolute;
    left: 360px;
    top: 300px;
}
 
#number01
{
    position:absolute;
    left: 35px;
    top: 225px; 
 
}
 
#number01 li
{
    list-style:none;
    float:left;
    font-size: 20px;
    text-align: center;
    width: 20px;
}
 
</style>
 
<script type="text/javascript" language="javascript">
    function huantu(number) {
        a = number;
        document.getElementById('img').src=arr[a]
    }

    var li// = document.getElementsByTagName("li");//放到load事件中，这里获取不到li对象
    //var l = li.length
    var a = 0;
    function zidong() {
        a++;
        if (a >= arr.length) a = 0;
        huantu(a);
    }

   
    var arr=new Array();
    arr[0]="美女/girl01.jpg";//放图片地址
    arr[1]="美女/girl02.jpg";
    arr[2]="美女/girl03.jpg";
    arr[3]="美女/girl04.jpg";
    arr[4]="美女/girl05.jpg";
    var turn = setInterval(zidong, 5000);
    window.onload = function () {
        li = document.getElementsByTagName("li"); ///////////////////
        for (var i = 0; i < li.length; i++) {
            li[i].onmouseover = (function (i) { return function () { clearInterval(turn); huantu(i) } })(i)
            li[i].onmouseout = function () { turn = setInterval(zidong, 5000); }
        } 
    }
</script>
 
</head>
 
<body>
 
<div id="tupian01">
<img src="美女/girl01.jpg" width="180px" height="260px" id="img" />
    <div id="number01">
        <ul>
        <li>1</li>
        <li>2</li> 
 
        <li>3</li>
        <li>4</li>
        <li>5</li>
        </ul>
  </div>
</div>
 
<div id="anjian01">
<input type="button" id="an01" value="01" onclick="huantu(0)" onmouseover="clearInterval(turn)" onmouseout="setInterval(zidong,1000)" />
<input type="button" id="an02" value="02" onclick="huantu(1)" />
<input type="button" id="an03" value="03" onclick="huantu(2)" />
<input type="button" id="an04" value="04" onclick="huantu(3)" />
<input type="button" id="an05" value="05" onclick="huantu(4)" />
</div>
 
</body>
</html>

[解决办法]
<input type="button" id="an01" value="01" onclick="huantu(0)" onmouseover="clearInterval(turn)" onmouseout="turn=setInterval(zidong,1000)" />

这里要保存计时器id下来

热点排行

JavaScript

，帮忙改下图片播放的代码