关于滚动

 1，竖直滚动。Js实现

写的用户控件

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="centerImg.ascx.cs" Inherits="门户网站.Controlers.centerImg" %>
<link href="../css/navimg.css" rel="stylesheet" type="text/css" />
   <div id="botMain">
    <div id="clcenter"><img id="imgcenter"/></div>
 <div id="imgs">
<div id="hiddenImg">
<%foreach (Modal.Images item in GetImgs)
  {
  %>
  <img src='../iamges/dataImg/<%=item.IngUrl%>'/><br />
  <%
  }
%>
</div>
<div id="showmsg"></div>
</div>
</div>
<script src="../Js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var speed = 20; //数字越大速度越慢
        var tab = document.getElementById("imgs");
        var tab1 = document.getElementById("hiddenImg");
        var tab2 = document.getElementById("showmsg");
        tab2.innerHTML = tab1.innerHTML; //克隆demo1为demo2
        function Marquee() {
            if (tab2.offsetTop - tab.scrollTop <= 0)//当滚动至demo1与demo2交界时
                tab.scrollTop -= tab1.offsetHeight; //demo跳到最顶端
            else {
                tab.scrollTop++;
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function() { clearInterval(MyMar) }; //鼠标移上时清除定时器达到滚动停止的目的
        tab.onmouseout = function() { MyMar = setInterval(Marquee, speed) }; //鼠标移开时重设定时器
    });
    var id = 1;
    $(function() {
        setInterval(function() {
            if (id <= 4) {
                $("#imgcenter").attr("src", "../iamges/dataImg/" + id + ".jpg");
                $("#showmsg img").addClass("border").siblings().removeClass("border");
                $("#imgcenter").addClass("largeImg");
                id++;
            }
            else {
                id = 1;
            }
        }, 2000);

    })
</script>

注意：css的内容。没有css的配合。是无法实现的。

#botMain
{
    width: 480px;
    height: 270px;
}
#clcenter
{
    width: 375px;
    border: solid 1px #C8C6C2;
    height: 253px;
    float: left;
}
#imgs
{
    background: #FFF;
    overflow: hidden;
    border: 1px dashed #CCC;
    text-align: center;
    float: left;
    width: 90px;
    height: 253px;
}
#imgs img
{
    display: block;
}
.largeImg
{
    width: 100%;
    height: 100%;
}
.border
{
    border:solid 3px green;
}
2，水平滚动。用margue实现的。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BottomItems.ascx.cs" Inherits="门户网站.Controlers.BottomItems" %>
<div id="bottomimgs">
<div id="Bottomshowmsg">
<marquee οnmοuseοver= "this.stop() "   style= "COLOR:#414141 "   οnmοuseοut= "this.start() "   scrollAmount= "2 "
scrolldelay= "100"   direction= "top" width= "200px" height= "93px" loop= "INFINITE">
<%foreach (Modal.Images item in GetImgs)
  {
  %>
  <img src='../iamges/dataImg/<%=item.IngUrl%>'/>
  <%
  }
%>
</marquee>
</div>
</div>

3.别人的实现方式。比较好的。竖直方向的能实现的。其他的没试过

CSS

DIV的图片无缝滚动,DIV 图片上无缝滚动,DIV 图片下无缝滚动,DIV 图片左无缝滚动,DIV 图片右无缝滚动


先了解一下对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
DIV + JS 图片上无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
DIV + CSS + JS图片下无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
DIV + CSS + JS图片左无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
DIV + JS图片右无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>