帮忙写一段图片浏览的JavaScript脚本代码，最终的效果就是上面用箭头浏览图片的缩略图，下面显示大图片。
大部分都做好了，就只差脚本代码了，各位帮个忙吧，马上就要交了。版面的代码如下：<styletype="text/css">#scroll{width:700px;heig...
大部分都做好了，就只差脚本代码了，各位帮个忙吧，马上就要交了。
版面的代码如下：
<style type="text/css">
#scroll{ width:700px; height:9000px; overflow:hidden; border:1px solid #CCC; padding-top:3px;}
#scroll ul{ width:700px; height:9000px; padding:0; margin:0; list-style:none;}
#scroll ul li{ width:138px; height:9000px; float:left;}
#scroll ul li img{width:113px; height:83px;}
.container{ padding:0; width:790px; position:relative;}
#left,#right{ width:17px; height:27px; position:absolute; border:0px; top:30px; cursor:pointer;}
#left{left:0px;}
#right{right:0px;}
</style>
<center>
<div class="container">
<div id="left">
<img src="../images/left.gif">
</div>
<div id="scroll">
<ul>
<li><img name="photo1" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo2" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo3" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo4" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo5" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
</ul>
</div>
<div id="right"><img src="../images/right.gif"></div>
</div>
</center>
效果是：
我要的最终效果是，上面用箭头滑动浏览图片，下面显示大图片，请帮我写出滑动图片和点击缩略图后在下面显示大图片的代码。 展开
版面的代码如下：
<style type="text/css">
#scroll{ width:700px; height:9000px; overflow:hidden; border:1px solid #CCC; padding-top:3px;}
#scroll ul{ width:700px; height:9000px; padding:0; margin:0; list-style:none;}
#scroll ul li{ width:138px; height:9000px; float:left;}
#scroll ul li img{width:113px; height:83px;}
.container{ padding:0; width:790px; position:relative;}
#left,#right{ width:17px; height:27px; position:absolute; border:0px; top:30px; cursor:pointer;}
#left{left:0px;}
#right{right:0px;}
</style>
<center>
<div class="container">
<div id="left">
<img src="../images/left.gif">
</div>
<div id="scroll">
<ul>
<li><img name="photo1" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo2" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo3" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo4" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
<li><img name="photo5" src="" width="113" height="83" alt="" style="background-color: #666666"></li>
</ul>
</div>
<div id="right"><img src="../images/right.gif"></div>
</div>
</center>
效果是：
我要的最终效果是，上面用箭头滑动浏览图片，下面显示大图片，请帮我写出滑动图片和点击缩略图后在下面显示大图片的代码。 展开
1个回答
展开全部
这个写过，我空间有，给你找找。
<html>
<head>
<style type="text/css">
#scroll{ width:700px; height:90px; overflow:hidden; border:1px solid #CCC; padding-top:3px;}
#scroll ul{ width:700px; height:90px; padding:0; margin:0; list-style:none;}
#scroll ul li{ width:138px; height:90px; float:left;}
#scroll ul li img{width:113px; height:83px;}
.container{ padding:0; width:790px; position:relative;}
#left,#right{ width:17px; height:27px; position:absolute; border:0px; top:30px; cursor:pointer;}
#left{left:0px;}
#right{right:0px;}
</style>
<script>
var arr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var length=5;
var len=arr.length;
var newarr=new Array();
function showBigImg(obj){
var inner="";
inner="<img src='"+obj.src+"'/>";
document.getElementById("mainArea").innerHTML=inner;
}
function getNext(){
for(var i=0;i<length;i++){
var img=document.getElementsByName("photo"+(i+1))[0];
img.src=arr[i+1];
}
var temp=arr[0];
//alert(temp);
arr.shift();
newarr=arr;
//alert(newarr.length);
newarr[len-1]=temp;
}
function getPrev(){
for(var i=0;i<length;i++){
var img=document.getElementsByName("photo"+(i+1))[0];
if(i!=0){
img.src=arr[i-1];
}else{
img.src=arr[len-1];
}
}
var temp=arr[len-1];
//alert(temp);
arr.pop();
arr.reverse();
arr[len-1]=temp;
newarr=arr.reverse();
}
</script>
</head>
<body>
<center>
<div class="container">
<div id="left" onmouseover="getPrev()">
<img src="../images/left.gif">
</div>
<div id="scroll">
<ul>
<li><img name="photo1" src="1.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo2" src="2.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo3" src="3.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo4" src="4.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo5" src="5.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
</ul>
</div>
<div id="right" onmouseover="getNext()">
<img src="../images/right.gif">
</div>
</div>
<div id="mainArea"style="width:80%;height:300px;">
</div>
</center>
</body>
</html>
样式我改了一点儿，从9000到90.看看有什么问题没有，图片需要你自己准备一下。
<html>
<head>
<style type="text/css">
#scroll{ width:700px; height:90px; overflow:hidden; border:1px solid #CCC; padding-top:3px;}
#scroll ul{ width:700px; height:90px; padding:0; margin:0; list-style:none;}
#scroll ul li{ width:138px; height:90px; float:left;}
#scroll ul li img{width:113px; height:83px;}
.container{ padding:0; width:790px; position:relative;}
#left,#right{ width:17px; height:27px; position:absolute; border:0px; top:30px; cursor:pointer;}
#left{left:0px;}
#right{right:0px;}
</style>
<script>
var arr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var length=5;
var len=arr.length;
var newarr=new Array();
function showBigImg(obj){
var inner="";
inner="<img src='"+obj.src+"'/>";
document.getElementById("mainArea").innerHTML=inner;
}
function getNext(){
for(var i=0;i<length;i++){
var img=document.getElementsByName("photo"+(i+1))[0];
img.src=arr[i+1];
}
var temp=arr[0];
//alert(temp);
arr.shift();
newarr=arr;
//alert(newarr.length);
newarr[len-1]=temp;
}
function getPrev(){
for(var i=0;i<length;i++){
var img=document.getElementsByName("photo"+(i+1))[0];
if(i!=0){
img.src=arr[i-1];
}else{
img.src=arr[len-1];
}
}
var temp=arr[len-1];
//alert(temp);
arr.pop();
arr.reverse();
arr[len-1]=temp;
newarr=arr.reverse();
}
</script>
</head>
<body>
<center>
<div class="container">
<div id="left" onmouseover="getPrev()">
<img src="../images/left.gif">
</div>
<div id="scroll">
<ul>
<li><img name="photo1" src="1.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo2" src="2.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo3" src="3.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo4" src="4.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
<li><img name="photo5" src="5.jpg" width="113" height="83" alt="" style="background-color: #666666"onmouseover="showBigImg(this)"></li>
</ul>
</div>
<div id="right" onmouseover="getNext()">
<img src="../images/right.gif">
</div>
</div>
<div id="mainArea"style="width:80%;height:300px;">
</div>
</center>
</body>
</html>
样式我改了一点儿，从9000到90.看看有什么问题没有，图片需要你自己准备一下。
追问
非常感谢，但是我想要的效果是点击左右按钮是图片移动而不是鼠标移到按钮上才换图片，麻烦帮忙改一下，如果您有时间，请帮我在脚本语言中添加中文的注释，这样便于我修改。如果最后的效果能够帮到我的忙，我一定将你选为满意答案。
追答
把这2个改了就行了 。
注释就不写了，有一部分涉及到算法，估计你看不明白。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
