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

孩子不乖 2013-08-06 04:21:27

<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);}

不好使了

还有，如果停止自动播放，再次启动自动播放后让图片在不是从最初的图片开始播放，而是在上一个图片的位置上继续播放，代码怎么写？

...全文

147 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2013-08-06

打赏
举报

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

斯洛文尼亚旅游 2013-08-06

打赏
举报

<!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>

孩子不乖 2013-08-06

打赏
举报

引用 1 楼 showbo 的回复:

什么自动播放不知道html代码结构不好写定论，最好贴全所有代码来

<!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);}
}

还有，我觉得这函数写得太麻烦了，有没有简便写法？

斯洛文尼亚旅游 2013-08-06

打赏
举报

    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代码结构不好写定论，最好贴全所有代码来