图片循环整体滚动是如何实现的！

图片循环整体滚动是怎么实现的！！
一行多列可变的图片无限滚动，有整体翻动的感觉。而不是流水感。
如http://bbs.163.com/ 论坛帖图模块

[解决办法]
不会，帮楼主顶
[解决办法]
javascript 应该可以看到源代码
[解决办法]
<%@ Page language= "c# " Codebehind= "WebForm2.aspx.cs " AutoEventWireup= "false " Inherits= "WebApplication3.WebForm2 " %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN " >
<HTML>
<HEAD>
<title> WebForm2 </title>
<meta content= "Microsoft Visual Studio .NET 7.1 " name= "GENERATOR ">
<meta content= "C# " name= "CODE_LANGUAGE ">
<meta content= "JavaScript " name= "vs_defaultClientScript ">
<meta content= "http://schemas.microsoft.com/intellisense/ie5 " name= "vs_targetSchema ">
<SCRIPT>
marqueesHeight=100;//滚动区域高度设定
stopscroll=false;
function onlod()
{
debugger
var icefable1=document.getElementById( "icefable1 ");
icefable1.scrollTop=1;
with(icefable1){
style.width=0;
style.height=marqueesHeight;
style.overflowX= "visible ";
style.overflowY= "hidden ";
noWrap=true;
onmouseover=new Function( "stopscroll=true ");
onmouseout=new Function( "stopscroll=false ");
}
}
preTop=0; currentTop=0; stoptime=0;
function init_srolltext(){
var icefable1=document.getElementById( "icefable1 ");
var icefable2=document.getElementById( "icefable2 ");
icefable2.innerHTML= " ";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
setInterval( "scrollUp() ",1);
}
function scrollUp(){
var icefable1=document.getElementById( "icefable1 ");
var icefable2=document.getElementById( "icefable2 ");
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==100)//向上滚动高度设定
{
stoptime+=1;
currentTop-=1;
if(stoptime==200)//停顿时间设定
{
currentTop=0;
stoptime=0;
}
}
else {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=1;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=1;
}
}
}

</SCRIPT>
</HEAD>
<body onload= "onlod();init_srolltext(); " MS_POSITIONING= "GridLayout ">
<form id= "Form1 " method= "post " runat= "server ">
<DIV id= "icefable1 "> <asp:datalist id= "dltImg " runat= "server " RepeatColumns= "2 " Width= "100px " Height= "8px " RepeatDirection= "Horizontal ">
<ItemTemplate>
<TABLE height= "100 " cellSpacing= "0 " cellPadding= "0 " width= "100 " border= "0 ">
<TR>
<TD bgColor= "red "> <%# DataBinder.Eval(Container.DataItem, "djsj ")%> </TD>
</TR>
</TABLE>
</ItemTemplate>
</asp:datalist> </DIV>

<DIV id= "icefable2 " style= "Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute "> </DIV>
<FONT face= "宋体 "> </FONT> <FONT face= "宋体 "> </FONT>
</form>
</body>
</HTML>

[解决办法]
<%@ Page Language= "C# " AutoEventWireup= "true " EnableViewState= "true " %>

<script runat= "server ">
// 计算数据，完全可以从数据看取得
ICollection CreateDataSource( )
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn( "序号 ", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn( "学生姓名 ", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn( "语文 ", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn( "数学 ", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn( "英语 ", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn( "计算机 ", typeof(System.Decimal)));

for (int i = 0 ; i < 8 ; i++)
{
System.Random rd = new System.Random(Environment.TickCount * i); ;
dr = dt.NewRow();
dr[0] = i.ToString();
dr[1] = "【孟子E章】 " + i.ToString();
dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}

protected void Page_Load( object sender, EventArgs e )
{
if (!IsPostBack)
{

DataList1.DataSource = CreateDataSource();
DataList1.DataBind();
}
}

</script>

<head>
</head>
<body>
<form id= "Form1 " runat= "server ">
<asp:DataList ID= "DataList1 " runat= "server ">
<ItemTemplate>
<div id= "icefable1 <%#Container.ItemIndex %> " style= "width: 700; position: ; z-index: 2;
left: 190px; top: 90px; ">

<table width= '700 ' height= "200 " border= '0 ' cellpadding= '0 ' cellspacing= '0 '>

<tr>
<td bgcolor= "blue " height= "100 ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>
<td bgcolor= "blue ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td> <td bgcolor= "blue " height= "100 ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>
<td bgcolor= "blue ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>
</tr>
<tr>
<td bgcolor= "red " height= "100 ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>

<td bgcolor= "red ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>
<td bgcolor= "red " height= "100 ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>
<td bgcolor= "red ">
<img src= "http://dotnet.aspx.cc/Images/logoSite.gif " />
</td>
</tr>
</table>

</div>
<div id= "icefable2 <%#Container.ItemIndex %> " style= "position: relative; top: -100px;
z-index: 1; visibility: hidden; display: none ">
</div>

<script>
marqueesHeight <%#Container.ItemIndex %> =100;//滚动区域高度设定
stopscroll <%#Container.ItemIndex %> =false;
icefable1 <%#Container.ItemIndex %> .scrollTop=1;
with(icefable1 <%#Container.ItemIndex %> ){
style.width=0;
style.height=marqueesHeight <%#Container.ItemIndex %> ;
style.overflowX= "visible ";
style.overflowY= "hidden ";
noWrap <%#Container.ItemIndex %> =true;
onmouseover=new Function( "stopscroll <%#Container.ItemIndex %> =true ");
onmouseout=new Function( "stopscroll <%#Container.ItemIndex %> =false ");
}
preTop <%#Container.ItemIndex %> =0; currentTop <%#Container.ItemIndex %> =0; stoptime <%#Container.ItemIndex %> =0;
function init_srolltext <%#Container.ItemIndex %> (){
icefable2 <%#Container.ItemIndex %> .innerHTML= " ";
icefable2 <%#Container.ItemIndex %> .innerHTML+=icefable1 <%#Container.ItemIndex %> .innerHTML;
icefable1 <%#Container.ItemIndex %> .innerHTML=icefable2 <%#Container.ItemIndex %> .innerHTML+icefable2 <%#Container.ItemIndex %> .innerHTML;
setInterval( "scrollUp <%#Container.ItemIndex %> () ",1);
}
function scrollUp <%#Container.ItemIndex %> (){
if(stopscroll <%#Container.ItemIndex %> ==true) return;
currentTop <%#Container.ItemIndex %> +=1;
if(currentTop <%#Container.ItemIndex %> ==101)//向上滚动高度设定
{
stoptime <%#Container.ItemIndex %> +=1;
currentTop <%#Container.ItemIndex %> -=1;
if(stoptime <%#Container.ItemIndex %> ==200)//停顿时间设定
{
currentTop <%#Container.ItemIndex %> =0;
stoptime <%#Container.ItemIndex %> =0;
}
}
else {
preTop <%#Container.ItemIndex %> =icefable1 <%#Container.ItemIndex %> .scrollTop;
icefable1 <%#Container.ItemIndex %> .scrollTop+=1;
if(preTop <%#Container.ItemIndex %> ==icefable1 <%#Container.ItemIndex %> .scrollTop){
icefable1 <%#Container.ItemIndex %> .scrollTop=icefable2 <%#Container.ItemIndex %> .offsetHeight-marqueesHeight <%#Container.ItemIndex %> ;
icefable1 <%#Container.ItemIndex %> .scrollTop+=1;
}
}
}
init_srolltext <%#Container.ItemIndex %> ();
</script>

</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
[解决办法]
1.用flash+数据库来实现
2.js实现!网上例子太多!
3.孟子老大的一定可行!虽然我没有看!
[解决办法]
已收藏```谢过几位```

图片循环整体滚动是如何实现的！

热点推荐