请教js幻灯片难题

gzj1984 · 发表于 2009-5-17 12:33:09

本帖最后由 gzj1984 于 2009-5-17 12:52 编辑

在论坛上下了个ss资讯首页的幻灯片样式，地址：https://discuz.dismall.com/viewth ... =%BB%C3%B5%C6%C6%AC

下的是奥运那个模式，我下的是左边那个，右边的收金币，是不是带动态标签呢？反正我下的左边这个里面图片的地址都是静态的。。。

鼓捣了半天，图片终于能轮转了，但是大图片不能显示，偏离幻灯片框，而且打开后地址不是资讯页，指向的是uch页面((mk10)) ，下面的标题也不能显示，链接是undefined？，我实在是不会改了，应该是传值的问题，但不知道是哪句不对，请高手给我看看吧，谢谢了！

以下是代码：
html部分：
<DIV class=fpic>

<A id=foclnk href="{$value[url]}" target=_blank>
<IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=200 src="{$pvalue['a_filepath']}" width=300>
</A>

<DIV id=fttltxt style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center">



<A href="$pvalue[url]" target=_blank>$value[subject]</A>


</DIV>

<DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">




<DIV class={if $i==0} thubpiccur{else} thubpic {/if} id=tmb{$i} onmouseover=setfoc({$i}); onmouseout=playit();>
<ul>
<li class="$pcurrent">
<a href="$pvalue[url]"><img src="$pvalue['a_filepath']" width=56 height=42 border="0" /></a>
</li>
</ul>

</DIV>



<SCRIPT language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};

picarry[{$i}] = "{$pvalue['a_filepath']}";
lnkarry[{$i}] = "{$value[url]}";
ttlarry[{$i}] = "{$value[subject]}";

</SCRIPT>

</DIV>
</DIV>
js部分：
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<6;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==5){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,4500);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}

css部分：
.thubpic {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
}
.thubpiccur {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
}
.thubpiccur {
Z-INDEX: 30; BACKGROUND:url(../images/arrow3.gif) no-repeat left 50%
}
.thubpic IMG {
BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
}
.thubpiccur IMG {
BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
}
.thubpiccur IMG {
BORDER-LEFT-COLOR: #fff; BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BORDER-RIGHT-COLOR: #fff
}

A {
COLOR: #fff; TEXT-DECORATION: none
}
A:hover {
COLOR: #fff; TEXT-DECORATION: underline
}
.fpic {
WIDTH: 476px; HEIGHT: 330px; BORDER: #dddddd 1px solid;text-align:center
}
.bpic {
FLOAT: left; MARGIN: 0px; WIDTH: 244px; POSITION: relative; HEIGHT: 243px

OSITION: relative;
}

#focpic { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 1px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 1px; BORDER-RIGHT-WIDTH: 0px

}

gzj1984 · 发表于 2009-5-17 12:52:23

我觉得js,css部分不是主要问题，就是index页如何很好的嵌入幻灯片代码呢？

gzj1984 · 发表于 2009-5-17 16:45:47

等待高手的点拨啊急 ~~~~

jears · 发表于 2009-8-1 13:53:41

我顶你`` 我也很想知道`` 如果展示的时候是

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="http://www.alixixi.com/" target="_blank"><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>阿里西西收集</strong><br />阿里西西(alixixi.com)-WEB开发之家……</span>
</li>
<li class="sliderImage">
<a href="http://www.alixixi.com/" target="_blank"><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>阿里西西-www.alixixi.com</strong><br />阿里西西(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家</span>
</li>
<li class="sliderImage">
<a href="http://www.alixixi.com/" target="_blank"><img src="images/410/3.jpg" alt="3" /></a>
<span class="bottom"><strong>阿里西西-alixixi.com</strong><br />不错的代码...</span>
</li>
<li class="sliderImage">
<a href="http://www.alixixi.com/" target="_blank"><img src="images/410/4.jpg" alt="4" /></a>
<span class="bottom"><strong>阿里西西-alixixi.com 2</strong><br />阿里西西(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家...</span>
</li>
<li class="sliderImage">
<a href="http://www.alixixi.com/" target="_blank"><img src="images/410/5.jpg" alt="5" /></a>
<span class="top"><strong>阿里西西-alixixi.com 3</strong><br />阿里西西(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家(alixixi.com)-WEB开发之家...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>

复制代码

可以直接循环一下就OK
如果幻灯片展示带ID ID不一样`` 就不知道怎么去循环了``

		自动登录	找回密码
密码			立即注册

[疑问] 请教js幻灯片难题