通过javasccript实现图片滚动效果
用javascript实现一组图片滚动效果，图片每隔两秒换一张，滚动到最后一张后从头开始滚动，，下面还有几个按钮点上去时显示对应的图片，当鼠标离开按钮后图片继续照常滚动，...
用javascript实现一组图片滚动效果，图片每隔两秒换一张，滚动到最后一张后从头开始滚动，，下面还有几个按钮点上去时显示对应的图片，当鼠标离开按钮后图片继续照常滚动，麻烦大神帮助下，感激不尽啊，如果能解决问题，感激不尽啊，谢谢了，
两位给的答案都有一些效果，但终究有一些差距，求一个现在的完整的代码只要效果能行马上采纳甚至加分都没问题，，， 展开
两位给的答案都有一些效果，但终究有一些差距，求一个现在的完整的代码只要效果能行马上采纳甚至加分都没问题，，， 展开
1个回答
展开全部
直接给你一段简单的代码，不懂再问
<html>
<head>
<title>图片滚动 </title>
<style>
#div1
{position:relative;width:650px;height:210px;overflow:hidden;
}
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
#div2 li a:hover{top:-10px;}
a{position:relative;}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var aspeed=-5;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
odiv2.onmouseover=function(){clearInterval(timer);};
function a()
{
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
odiv2.onmouseout=a;
a();
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<li><a href=""><img src="1.jpg" /></a></li>
<li><a href=""><img src="2.jpg" /></a></li>
<li><a href=""><img src="3.jpg" /></a></li>
<li><a href=""><img src="4.jpg" /></a></li>
</div>
</div>
</body>
</html>
希望能解决您的问题。
<html>
<head>
<title>图片滚动 </title>
<style>
#div1
{position:relative;width:650px;height:210px;overflow:hidden;
}
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
#div2 li a:hover{top:-10px;}
a{position:relative;}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var aspeed=-5;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
odiv2.onmouseover=function(){clearInterval(timer);};
function a()
{
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
odiv2.onmouseout=a;
a();
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<li><a href=""><img src="1.jpg" /></a></li>
<li><a href=""><img src="2.jpg" /></a></li>
<li><a href=""><img src="3.jpg" /></a></li>
<li><a href=""><img src="4.jpg" /></a></li>
</div>
</div>
</body>
</html>
希望能解决您的问题。
追问
谢谢你，你的这个已经非常接近我想要的结果了，只是还有一点没解决，就是按要求是还有一排按钮如1 |2|3|4之类的，每一个对应一图片，鼠标放在这些按钮上面能像放在图片上一样的效果,这个能实现吗，能不能再麻烦说一下，谢谢了，
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
