一个关于点击实现替换滚动图片的JS，请各位大大帮忙……

Question

小弟做了一个滚动图片的JS，现在想实现点击列表中的选项，将滚动的图片换成相应的图片我是通过innerHTML来替换DIV下<ul>标签内所有内容的方法，现在做好了出现问题，就是点击后原来滚动图片的地方变成空白，但另存为图片可以得到我想要的图片，但在网页上就是不显示，尺寸没问题，我去掉实现滚动的JS代码，将图片平铺，点击可以实现替换……请问这可能是什么问题……实现替换的JS：
function changepic(url1,url2,url3,url4){
  var pics = document.getElementById('pics');
    pics.innerHTML = "<ul><li><img src=\"jsimg/" + url1 + "\"/></li><li><img src=\"jsimg/" + url2 + "\"/></li></ul>";
    var ts = document.getElementById('ts');
    ts.innerHTML = "<ul><li><img src=\"jsimg/" + url3 + "\"/></li><li><img src=\"jsimg/" + url4 + "\"/></li></ul>";
    var btn = document.getElementById('btn');
    btn.innerHTML = "<ul><li>1</li><li>2</li></ul>";
}HTML：
<div id="pics"><ul><li><a href="#"><img src="jsimg/界面—首页面s.jpg" thumb="" alt="首页面效果" text="" /></a></li><li><a href="#"><img src="jsimg/界面—2级界面s.jpg" thumb="" alt="电子黄页分类行业企业名录界面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—3级界面s.jpg" thumb="" alt="电子黄页企业详细介绍页面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—城市选择s.jpg" thumb="" alt="城市选择界面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—找企业s.jpg" thumb="" alt="通过关键词精准找企业界面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—全屏广告s.jpg" thumb="" alt="全屏品牌推广效果" text="" /></a></li><li><a href="#"><img src="jsimg/企业品牌别贴s.jpg" thumb="" alt="企业logo定制展示" text="" /></a></li><li><a href="#"><img src="jsimg/界面—拨号界面s.jpg" thumb="" alt="拨号界面" text="" /></a></li></ul></div><div id="ts"><ul><li><img src="jsimg/1.jpg" /></li><li><img src="jsimg/2.jpg" /></li><li><img src="jsimg/3.jpg" /></li><li><img src="jsimg/4.jpg" /></li><li><img src="jsimg/5.jpg" /></li><li><img src="jsimg/6.jpg" /></li><li><img src="jsimg/7.jpg" /></li><li><img src="jsimg/8.jpg" /></li></ul></div><div id="btn"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div></div><a href="#" onclick="changepic('1中国银行1.jpg','1中国银行.jpg','1.jpg','1.jpg'); return false;">111111111</a>

Answer 1

补全代码：
CSS部分：
<style type="text/css">*{border:0;margin:0;border:0;list-style:none;}body{padding:0px;background:#eee;background-color: #161513;}#focus_change{width:683px;height:620px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}#loading{position:absolute;z-index:9999;width:683px;height:620px;background:#161513 url(/uploads/common/images/loading_1.gif) center -40px no-repeat;color:#BFBFBF;font-size:12px;text-align:center;padding-top:90px;}#ts_bg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;}#pics li{position:absolute;top:0px;left:0px;}#pics li img{filter:alpha(opacity=0);opacity:0;width:648px;height:620px;}/*图片大小与框架保持一致*/#ts li{position:absolute;z-index:2;left:0;bottom:-50px;height:50px;line-height:50px;font-size:14px;font-weight:bold;padding-left:16px;}#ts li a{color:#000000; text-decoration:none;font-size:22px;}/*标题链接样式*/#btn,#btn_bg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;}#btn li,#btn_bg li{float:left;width:0px;height:0px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;}#btn_bg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}#btn li.current {background:#F60;}</style>JS部分：
<script type="text/javascript">/*design by koen @ 10nian5yue8ri*//*http://hi.baidu.com/koen_li*/function $(id) {return document.getElementById(id);}function $$(tag,id){return (id==undefined?document:this.$(id)).getElementsByTagName(tag);}function poptit(tsID,n){//文字上下运动函数var ts = $$('li',tsID);var setway=function(obj,y){obj.style.bottom=y+'px';}var getway=function(obj){return parseInt(obj.style.bottom);}var up=function(){if (ts[n].movement) clearTimeout(ts[n].movement);//为了兼容变化中的点击if (y1 == 0) return true;y1+=Math.ceil((0 - y1) / 5);setway(ts[n],y1);if(y1<0) ts[n].movement = setTimeout(up, 1);}var down=function(){if (ts[N].movement) clearTimeout(ts[N].movement);if (y2 == -50) return true;y2+=Math.floor((-50 - y2) / 5);setway(ts[N],y2);if(y2>-50) ts[N].movement = setTimeout(down, 1);}for(var i=0;i<ts.length;i++){if (!ts[i].style.bottom) ts[i].style.bottom = "-50px";if(ts[i].name=='up') var N=i;}if(!N&&n==0) {//开始载入...ts[n].name='up';var y1=getway(ts[n]);up();return true;}if(N==n) return true;//防止快速移出移入的抖动ts[N].name=''//标记淡入的name为空ts[n].name='up';var y1=getway(ts[n]);var y2=getway(ts[N]);down();up();}function opa(pics,n){//图片淡入淡出函数var pics = $$('img',pics);var setfade=function(obj,o){if (document.all) obj.style.filter = "alpha(opacity=" + o + ")";else obj.style.opacity = (o / 100);};var getfade=function(obj){return (document.all)?((obj.filters.alpha.opacity)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false);}var show=function(){if(pics[n].move) clearTimeout(pics[n].move);if (o1 == 100) return true;o1+=100;setfade(pics[n],o1);if(o1<100) pics[n].move=setTimeout(show,1);};var hide=function(){if(pics[N].move) clearTimeout(pics[N].move);if (o2 == 0) return true;o2-=100;setfade(pics[N],o2);if(o2>0) pics[N].move=setTimeout(hide,1);};for(var i=0;i<pics.length;i++){if(!getfade(pics[i])) setfade(pics[i],0);if(pics[i].name=='out') var N=i;}if(!N&&n==0) {//开始载入...pics[n].name='out';var o1=getfade(pics[n]);show();return true;}if(N==n) return true;pics[N].name=''pics[n].name='out';var o1=getfade(pics[n]);var o2=getfade(pics[N]);hide();show();}function classNormal() {//数字标签样式清除var focusBtnList = $$('li','btn');for (var i = 0; i < focusBtnList.length; i++) {focusBtnList[i].className = '';}}function autoFocusChange() {//自动运行if (atuokey) return;var focusBtnList = $$('li','btn');for (var i = 0; i < focusBtnList.length; i++) {if (focusBtnList[i].className == 'current') {var currentNum = i;}}if(currentNum<focusBtnList.length-1){poptit('ts',currentNum+1);opa('pics',currentNum+1);classNormal();focusBtnList[currentNum+1].className = 'current';}else if(currentNum==focusBtnList.length-1){poptit('ts',0);opa('pics',0);classNormal();focusBtnList[0].className = 'current';}}function focusChange() {//交互切换var focusBtnList = $$('li','btn');for (var i = 0; i < focusBtnList.length; i++) {focusBtnList[i].I=i;focusBtnList[i].onclick = function(){poptit('ts',this.I);opa('pics',this.I);classNormal();focusBtnList[this.I].className = 'current';}focusBtnList[i].onmouseover = function(){this.style.backgroundColor='#f60';this.style.cursor='pointer';}focusBtnList[i].onmouseout = function(){this.style.backgroundColor='';}}}var atuokey = '';function init(){//初始化$('btn_bg').innerHTML=$('btn').innerHTML;$('focus_change').removeChild($$('div','focus_change')[0]);poptit('ts',0);opa('pics',0);classNormal();$$('li','btn')[0].className = 'current';$('focus_change').onmouseover = function() {atuokey = true;clearInterval(auto);}$('focus_change').onmouseout = function() {atuokey = false;auto=setInterval('autoFocusChange()', T);}}var T=3000;//每帧图片停留的时间，1000=1秒var auto='';window.onload=function(){init();focusChange();auto=setInterval('autoFocusChange()', T);}function changepic(url1,url2,url3,url4){
  var pics = document.getElementById('pics');
    pics.innerHTML = "<ul><li><img src=\"jsimg/" + url1 + "\"/></li><li><img src=\"jsimg/" + url2 + "\"/></li></ul>";
    var ts = document.getElementById('ts');
    ts.innerHTML = "<ul><li><img src=\"jsimg/" + url3 + "\"/></li><li><img src=\"jsimg/" + url4 + "\"/></li></ul>";
    var btn = document.getElementById('btn');
    btn.innerHTML = "<ul><li>1</li><li>2</li></ul>";
}</script>HTML部分：[code=HTML]
<div id="focus_change"><div id="loading">请稍候...</div><div></div><div id="btn_bg">数字标签的背景</div><div id="pics"><ul><li><a href="#"><img src="jsimg/界面—首页面s.jpg" thumb="" alt="首页面效果" text="" /></a></li><li><a href="#"><img src="jsimg/界面—2级界面s.jpg" thumb="" alt="电子黄页分类行业企业名录界面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—3级界面s.jpg" thumb="" alt="电子黄页企业详细介绍页面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—城市选择s.jpg" thumb="" alt="城市选择界面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—找企业s.jpg" thumb="" alt="通过关键词精准找企业界面" text="" /></a></li><li><a href="#"><img src="jsimg/界面—全屏广告s.jpg" thumb="" alt="全屏品牌推广效果" text="" /></a></li><li><a href="#"><img src="jsimg/企业品牌别贴s.jpg" thumb="" alt="企业logo定制展示" text="" /></a></li><li><a href="#"><img src="jsimg/界面—拨号界面s.jpg" thumb="" alt="拨号界面" text="" /></a></li></ul></div><div id="ts"><ul><li><img src="jsimg/1.jpg" /></li><li><img src="jsimg/2.jpg" /></li><li><img src="jsimg/3.jpg" /></li><li><img src="jsimg/4.jpg" /></li><li><img src="jsimg/5.jpg" /></li><li><img src="jsimg/6.jpg" /></li><li><img src="jsimg/7.jpg" /></li><li><img src="jsimg/8.jpg" /></li></ul></div><div id="btn"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div></div><a href="#" onclick="changepic('1中国银行1.jpg','1中国银行.jpg','1.jpg','1.jpg'); return false;">111111111</a></body>[/code]

Answer 2

或者指导一个思路吧就是首页有一个JS做的图片展示，一张一张轮着切换，现在我想点击列表里的案例来实现控制这个图片切换区，比如我点击中国银行的案例，原来首页滚动的6张图片现在换成两张中国银行的循环滚动我原本的思路就是innerHTML来替换掉JS中放置图片地址的地方……