RT.
我之前写过一个关于文字轮播,基于MSclass的.http://blog.csdn.net/killzero/article/details/17790731
现在我将换另外一种方式,来实现类似于这个网页底部的成功案例的效果:http://www.lczscq.com/cn/index.asp
不多说,马上开始.
首先是图片的html排版.这里看你喜好,是喜欢使用表格布局还是div布局.我个人尝试过直接使用ul布局,但是IE7不支持display:inline-block;这一个css属性,导致在IE7以下的浏览器中,li会发生折行.所以还是使用表格布局:
<!--成功案例-->
<div class="viewBottom" id="viewBottom">
<p class="bottomTitle">
<span class="titleCN">成功案例</span>
<span class="titleEN">Clients</span>
<br clear="all">
</p>
<div class="scrollBox" id="scrollBox">
<table>
<tr>
<td>
<table class="caseList" id="caseList1">
<tr>
<volist name="caseList" id="caseList">
<td class="caseItem">
<img class="imgItem" src="{$caseList['imgUrl']}" />
</td>
</volist>
</tr>
</table>
</td>
<td>
<table class="caseList" id="caseList3">
<tr>
<volist name="caseList2" id="caseList2">
<td class="caseItem">
<img class="imgItem" src="{$caseList2['imgUrl']}" />
</td>
</volist>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<!--成功案例结束-->
这个方法需要两个一模一样的图片列表,从而实现切换.
css配置:
.viewBottom{
width:998px;
height:185px;
margin: 0 auto;
border:1px solid #eee;
}
.bottomTitle{
width:1000px;
height:45px;
}
.titleCN{
display:inline-block;
float: left;
margin:15px 10px 10px 20px;
font-size:14px;
color:#555;
}
.titleEN{
display:inline-block;
float: left;
margin:18px 0 10px 0;
font-size:12px;
color:#ccc;
}
.scrollBox{
width: 960px;
height:124px;
margin:0 20px 0 20px;
overflow: hidden;
}
.caseList{
width:auto;
height:132px;
}
.caseItem{
width:110px;
height:110px;
padding:0 10px 0 10px;
}
.imgItem{
display: block;
width:100px;
height:100px;
padding:5px;
border:1px solid #eee;
}
JS文件:
<!--页面中图片重复滚动代码-->
var speed=15; //滚动速度
var tab=document.getElementById("scrollBox"); //用来显示案例的div窗口
var tab1=document.getElementById("caseList1");//案例图片列表1
var tab2=document.getElementById("caseList3");//案例图片列表2
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth;
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
话说,其方法应该和MSclass应该是差不多的.哈哈哈.