javascript的图片切换效果问题！！求大神指点一二！

js代码：<scripttype="text/javascript">varAbanner=document.getElementById('banner');varAl... js代码：
<script type="text/javascript">
var Abanner =document.getElementById('banner');
var Ali=Abanner.getElementsByTagName('li');
var Anav1=document.getElementById('nav1');
var Adiv=Anav1.getElementsByTagName('div');
var tiamer= null;
var i=0;

function aa()
{
tiamer=setInterval(function()
{
if(i==Ali.length-1)
{
i=0;
}
else{
i++;
}
for(var k=0;k<Ali.length;k++)
{
Ali[k].style.zIndex='0';
Adiv[k].className='';
}
Ali[i].style.zIndex='1';
Adiv[i].className='dd';

},1000)
}
aa();
Abanner.onmouseover=function()//移入banner停止
{
clearInterval(tiamer);

for(var j=0;j<Adiv.length;j++)
{
Adiv[j].a=j;
Adiv[j].onmouseover=function()//选项卡。。。
{
for(var m=0;m<Adiv.length;m++)
{
Ali[m].style.zIndex='0';
Adiv[m].className='';
}
Ali[this.a].style.zIndex='1';
this.className='dd';
}

}
}

Abanner.onmouseout=function()
{
aa()
}

</script>

html代码：
<div class="banner" id="banner">
<ul>
<li style=" z-index:6;"><a href="#"><img src="img/banner1.png"></a></li>
<li style=" z-index:5;"><a href="#"><img src="img/banner2.png"></a></li>
<li style=" z-index:4;"><a href="#"><img src="img/banner3.png"></a></li>
<li style=" z-index:3;"><a href="#"><img src="img/banner4.png"></a></li>
<li style=" z-index:2;"><a href="#"><img src="img/banner5.png"></a></li>
<li style=" z-index:1;"><a href="#"><img src="img/banner6.png"></a></li>
</ul>
<div class="nav1" id="nav1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p class="cle"></p>
</div>
</div>

自动切换时当鼠标点上去后，比如当图片自动切换到第三个DIV时，我鼠标停在第5个DIV，移开后自动切换会回到第4个。要怎么样才能让他从第5个开始切换呢？展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

yugi111
2015-07-12 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
  <head>
		<meta charset=UTF-8>
		<title>
			RunJS 演示代码
		</title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			ul li img 
			{
				border:0;
			}
			.banner {
				border:1px solid red;
				float:left;
				overflow:hidden;
				width:300px;
			}
			ul {
				list-style:none;
				border: 1px solid blue;
				height:40px;
				width: 1800px;
				position:relative;
				overflow:hidden;
			}
			ul li {
				width: 300px;
				height: 40px;
				text-align:center;
				line-height:40px;
				float:left;
			}
			.nav1 div:hover {
				background-color:red;
				cursor:pointer;
			}
			.nav1 {
				width: 300px;
				height:20px;
			}
			.nav1 div {
				border:1px solid yellow;
				width: 48px;
				height:20px;
				float:left;
				text-align:center;
				line-height:20px;
			}
		</style>
		<script type="text/javascript">
			onload = function () {
				var ul = banner.getElementsByTagName("ul")[0];
				var lis = ul.getElementsByTagName("li");
				var w = lis[0].clientWidth;
				var divs = nav1.getElementsByTagName("div");
				var current = 0;
				var interval = null;
				var run = function () {
					if (!interval) {
						interval = setInterval (function () {
							var last = current;
							var index = ++current;
							index = index > lis.length - 1 ? 0 : index;
							var div = divs[index];
							ul.style.left = "-" + w * index + "px";
							div.style.backgroundColor = "red";
							divs[last].style.backgroundColor="transparent";
							current = index;
						}, 1000);
					}
				}
				var stop = function () {
					if (!!interval) {
						clearInterval(interval);		
						interval = null;
					}
				}
				var anoy = function (i) {
					divs[i].onmouseover = function () {
						stop();
						this.style.backgroundColor = "red";
						divs[current].style.backgroundColor = "transparent";
						ul.style.left = "-" + w * i + "px";
						current = i;
					}
					divs[i].onmouseout = function () {
						run ();	
					}
				}
				for (var i = 0; i < divs.length; i++) {
						anoy (i);
				}
				
				run ();
			}
		</script>
  </head>
	<body>
    <div class="banner" id="banner">
			<ul>
				<li>
					<a href="#">1
						<img src="img/banner1.png">
					</a>
				</li>
				<li>
					<a href="#">2
						<img src="img/banner2.png">
					</a>
				</li>
				<li>
					<a href="#">3
						<img src="img/banner3.png">
					</a>
				</li>
				<li>
					<a href="#">4
						<img src="img/banner4.png">
					</a>
				</li>
				<li>
					<a href="#">5
						<img src="img/banner5.png">
					</a>
				</li>
				<li>
					<a href="#">6
						<img src="img/banner6.png">
					</a>
				</li>
			</ul>
			
			<div class="nav1" id="nav1">
				<div>
					1
				</div>
				<div>
					2
				</div>
				<div>
					3
				</div>
				<div>
					4
				</div>
				<div>
					5
				</div>
				<div>
					6
				</div>
			</div>
		</div>
  </body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript的图片切换效果问题！！求大神指点一二！

其他类似问题

为你推荐：