图片循环整体滚动是怎么实现的！！

NANAXMM 2007-05-24 04:15:40

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

...全文

366 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

beyongpaul 2007-05-25

打赏
举报

已收藏```谢过几位```

syc958 2007-05-25

打赏
举报

1.用flash+数据库来实现
2.js实现!网上例子太多!
3.孟子老大的一定可行!虽然我没有看!

孟子E章 2007-05-25

打赏
举报

<%@ 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>

lem12 2007-05-25

打赏
举报

<%@ 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>

NANAXMM 2007-05-24

打赏
举报

<div id="icefable1" style="width:400;">

<table width='400' height="200" border='0' cellPadding='5' cellSpacing='0'>
<tr>
<td align="center" bgcolor="#F2F2F2">1。内容可以自己定义</td>
</tr>
<tr>
<td align="center" bgcolor="#F9FAED">2。内容可以自己定义</td>
</tr>
</table>

</div>
<div id="icefable2" style="position:absolute;z-index:1;visibility:hidden"></div>
<script>
marqueesHeight=100;//滚动区域高度设定
stopscroll=false;
icefable1.scrollTop=0;
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(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
setInterval("scrollUp()",20);
}
function scrollUp(){
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==100)//向上滚动高度设定
{
stoptime+=1;
currentTop-=1;
if(stoptime==150)//停顿时间设定
{
currentTop=0;
stoptime=0;
}
}
else {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=1;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=1;
}
}
}
init_srolltext();
</script>
滚动和停顿的已经有的怎么能让他滚动的在快1点有那种翻书的感觉

luyesql 2007-05-24