苦逼！！！美工什么都做，小白跪求产品展示页后台程序问题！

[w-qjie]

平面设计对此零基础，为了弄一个网站就看了几个dreamweaver视频教程，知道程序这块水太深啦
只好在这里请教大虾，能把任务完成就好了：：我的任务是吧这页面做的能用，吧产品全部上传上去就可以了！
我现在要做的是这样一个页面
http://www.75366.com/products.html#nogo有三层目录，右边的产品展示图片切换什么我已经知道怎么弄了，
现在问题是左边的大目录怎么和右边的产品展示联动起来，最左边产品种类目录和边上那个产品滚动条怎么联动、切换等。

这个网站别人已经做好发了html源文件过来，里头有三个代码如下，请问我现在该怎么解决这问题？
代码一：

// JavaScript Document
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("focpic").src = picarry[id];
document.getElementById("foclnk").href = lnkarry[id];
document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
currslid = id;
for(i=0;i<4;i++){
document.getElementById("tmb"+i).className = "thubpic";
};
document.getElementById("tmb"+id).className ="thubpiccur";
focpic.style.visibility = "hidden";
focpic.filters[0].Apply();
if (focpic.style.visibility == "visible") {
focpic.style.visibility = "hidden";
focpic.filters.revealTrans.transition=23;
}
else {
focpic.style.visibility = "visible";
focpic.filters[0].transition=23;
}
focpic.filters[0].Play();
stopit();
}

function playnext(){
if(currslid==3){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,4500);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}


代码二：
代码二：
代码二：
代码二：
代码二：

// JavaScript Document
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "images/tu.jpg";
lnkarry[0] = "#nogo";
picarry[1] = "images/tu2.jpg";
lnkarry[1] = "#nogo";
picarry[2] = "images/tu.jpg";
lnkarry[2] = "#nogo";
picarry[3] = "images/tu2.jpg";
lnkarry[3] = "#nogo";

还有一个层叠样式表文档：

还有一个层叠样式表文档：
还有一个层叠样式表文档：
还有一个层叠样式表文档：

@charset "utf-8";
/* CSS Document */

body{
background-image:url(images/bg.jpg);
font-size:12px;
line-height:24px;
width:1003px;
margin:10px auto;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
a{
text-decoration:none;
}
a img{
border:none;
}
*{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
#logo {
position:relative;
z-index:1;
text-align:center;
}
.links{
float:right;
}
.links a{
padding:0 5px;
}
#nav{
width:1003px;
margin:0 auto;
height:42px;
background-image: url(images/menu.jpg);
margin:8px 0 2px 0;
}
.menu ul{
margin:0 20px;
}
.menu ul li{
display:inline;
}
.menu ul li a{
float:left;
display:inline;
width:108px;
color:#fff;
font-weight:700;
font-size:14px;
line-height:40px;
text-align:center;
margin:0 10px;
}
.menu ul li a:hover,.menu ul li a.sec{
color:#630;
width:108px;
height:33px;
background:url(images/menu_hove.png) no-repeat 0 4px;
}
.menu ul li span{
float:left;
width:2px;
height:42px;
background:url(images/menu_line.jpg) no-repeat;
}
.search{
float:right;
margin-right:30px;
height:24px;
overflow:hidden;
margin-top:7px;
}
.search input.inputBox{
float:left;
width:122px;
height:23px;
background:url(images/search.jpg) no-repeat;
border:none;
padding:5px 10px;
}
.search input.buttonSpec{
width:24px;
height:24px;
margin-left:8px;
}
#main {
position:relative;
z-index:3;
margin:0px auto;
}
.footer{
color:#edc09f;
text-align:center;
margin-top:5px;
}
/**/
.content{
float:left;
width:1001px;
margin:0 auto;
border:1px #315d65 solid;
}
.left{
float:left;
width:186px;
}
.left_menu{
float:left;
width:30px;
}
.left_menu ul li{
text-align:center;
background-color:#2a5a63;
}
.left_menu ul li a{
color:#fff;
writing-mode:tb-rl;
letter-spacing:2px;
background-color:#2a5a63;
padding:20px 3px;
}
.left_menu ul li a:hover,.left_menu ul li a.sec{
font-weight:700;
background-color:#0a424d;

}
.left_products{
float:left;
width:136px;
border:1px #315d65 solid;
margin:10px 0 0 10px;
}
.left_products ul li{
text-align:center;
margin:5px 0;
}
.left_products ul li a{
color:#fff;
}
.right{
float:left;
width:805px;
margin:20px 0 0 10px;
}
/*tu*/
.fpic{
float:left;
width:540px;
height:350px;
position:relative;
}
.thubpic,.thubpiccur,.thubpic img,.thubpiccur img{
width:82px;
height:82px;
margin-bottom:7px;
}
/*tu*/
.pro_about{
float:left;
width:235px;
color:#fff;
margin-left:20px;
}
.pztz{
float:left;
width:790px;
color:#fff;
margin-top:30px;
}
/**/
.join{
width:380px;
margin:10px auto;
}
.join ul li{
float:left;
text-align:center;
margin:8px 0;
}
.join ul li label{
float:left;
width:100px;
text-align:right;
}
.join ul li input{
float:left;
width:250px;
padding:1px 3px;
}
.join ul li button{
padding:4px 20px 2px 20px;
border:none;
margin-left:200px;
cursor:pointer;
}
.about{
padding:20px;
}
.contact{
width:300px;
margin:0 auto;
padding:20px;
}

[GodDices]

你用控件什么的好咯。。

[coobai]

引用 2 楼 liujiangcheng129 的回复:

你别告诉我你回复的是空内容。