现有十二个图片,但只有六个图片位置,想让这十二个图片循环滚动,请教详细方法和步骤
解决方案 »
- asp.net mvc2.0 伪装URL
- Entity framework
- DropDownList 问题,在线等,急
- asp.net 压力测试 Web Application Stress Tool 使用问题
- Repeater嵌套用戶控件問題(内有详细说明,困扰了很久,急!!)
- 关于IIS5.0对.Net2.0的兼容问题
- 一个页面中<input file>和DataGrid共存缓慢问题,求解决办法
- 创建了个ASP.NET(C#)交流群12339171
- 在线等候解决:datagrid中如何实现新增记录?
- 求助!
- 在网页上加“语音读书功能”,不知如何实现?
- HyperLinkField 字体不能显示为红色
html:
<img id="img1" src="1.gif" />
....
<img id="img6" src="6.gif" />js:var arrayPic = new Array();
arrayPic.push('1.gif');
...
arrayPic.push('12.gif');var nowindex = 0;
function Marquee()
{
nowindex ++;
if(nowindex > 12)
{
nowindex = 0;
}
for(var i = 0; i<6;i++)
{
var picnum = i+nowindex;
if(picnum>12) picnum = picnum - 12;
document.getElementById('img'+i).src=arrayPic[picnum];
}
}
setInterval("Marquee()",1000);
<style>
.scroll_div{
width:600px;
margin:0 auto;
overflow:hidden;
white-space:nowrap;
background:#ffffff;
}
.scroll_div img{
width:120px;
border:0;
margin:auto 8px;
border:1px #efefef solid;
}
#scroll_begin,#scroll_end,
#scroll_begin ul,#scroll_end ul,
#scroll_begin ul li,#scroll_end ul li{
display:inline;
}
</style><div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
<li><a href="http://www.heavenfoliage.cn/"><img src="http://www.heavenfoliage.cn/plugin/windsphoto/photofile/20087/2008715194955160.jpg" /></a></li>
</ul>
</div>
<div id="scroll_end"></div><script language="javascript">
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>