<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);}不好使了还有,如果停止自动播放,再次启动自动播放后让图片在不是从最初的图片开始播放,而是在上一个图片的位置上继续播放,代码怎么写?

解决方案 »

  1.   

        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 = document.getElementsByTagName("li");
            li[0].onmouseover = function () { genghuan(0); }
            li[1].onmouseover = function () { genghuan(1); }
        }什么自动播放不知道html代码结构不好写定论,最好贴全所有代码来
      

  2.   


    <!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)
    {
    var i = number;
    if ( i == 0 )
    {
    document.getElementsByTagName("img")[0].src = "美女/girl01.jpg";
    }
    else
    {
    document.getElementsByTagName("img")[0].src = document.getElementsByTagName("img")[i].src;
    }
    }var li = document.getElementsByTagName("li");
    var l = li.length
    var a = 0;
    function zidong()
    {
    if(a==0)document.getElementsByTagName("img")[0].src = "美女/girl01.jpg";
    document.getElementsByTagName("img")[0].src = document.getElementsByTagName("img")[a].src;
    if(a == 4)
    {
    a=0;
    }
    else if(a<4)
    {
    a+=1;
    }
    }/*
    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 num=0;
    setInterval(bianhuan,2000);//每隔2秒转换图片function bianhuan()
    {
    idsrc=document.getElementById("id1");
    if(num==arr.length-1)
    num=0;
    else
    num+=1;
    document.getElementsByTagName("img")[0].src=arr[num];

    */
    window.onload = function ()
    {
    li[0].onmouseover = function (){huantu(0);}
    li[1].onmouseover = function (){huantu(1);}
    li[2].onmouseover = function (){huantu(2);}
    li[3].onmouseover = function (){huantu(3);}
    li[4].onmouseover = function (){huantu(4);}
    }
    </script></head><body>
    <script>
    //setInterval("zidong();",1000);
    var turn = setInterval(zidong,1000);li[0].onmouseover=function() {clearInterval(turn);}
    li[1].onmouseover=function() {clearInterval(turn);}
    li[2].onmouseover=function() {clearInterval(turn);}
    li[3].onmouseover=function() {clearInterval(turn);}
    li[4].onmouseover=function() {clearInterval(turn);}</script><div id="tupian01">
    <img src="美女/girl01.jpg" width="180px" height="260px" />
    <img src="美女/girl02.jpg" width="180px" height="260px" />
    <img src="美女/girl03.jpg" width="180px" height="260px" />
    <img src="美女/girl04.jpg" width="180px" height="260px" />
    <img src="美女/girl05.jpg" width="180px" height="260px" />
    <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="setInterval(zidong,1000)" />
    这个就第一次能停止第二次就不好使了li[0].onmouseover=function() {clearInterval(turn);}
    li[1].onmouseover=function() {clearInterval(turn);}
    li[2].onmouseover=function() {clearInterval(turn);}
    li[3].onmouseover=function() {clearInterval(turn);}
    li[4].onmouseover=function() {clearInterval(turn);}这段函数直接不好使了还有我想写一个记录图片停止播放的位置,下次自动播放时就在停止播放的位置继续滚动window.onload = function ()
    {
    li[0].onmouseover = function (){huantu(0);}
    li[1].onmouseover = function (){huantu(1);}
    li[2].onmouseover = function (){huantu(2);}
    li[3].onmouseover = function (){huantu(3);}
    li[4].onmouseover = function (){huantu(4);}
    }还有,我觉得这函数写得太麻烦了,有没有简便写法?
      

  3.   

    本帖最后由 showbo 于 2013-08-06 17:23:43 编辑
      

  4.   

    <input type="button" id="an01" value="01" onclick="huantu(0)" onmouseover="clearInterval(turn)" onmouseout="turn=setInterval(zidong,1000)" />这里要保存计时器id下来