关于图片无缝滚动

Question

我用datalist做了一个用户控件连接图片，然后把这个控件添加到主页面中，怎样使用javascript来实现图片的无缝滚动啊，在网上查了很多代码，就是不能用？下面附一段代码也是不能用：解决.NET控件-DataList控件无缝滚动图片解决问题：1.无缝滚动；2.页面初始时图片显示页面上，而不是才从一个方向出来。 
将绑定数据绑定到DataList 控件后。其他数据控件也可使用此方法。 
页面源代码：<div id="demo" style="OVERFLOW: hidden;"> 
<table cellpadding="0" cellspacing="0" width="778px"> 
<tr> 
<td id="demo1"> 
<uc8:picXianshi id="PicXianshi1" runat="server" ></uc8:picXianshi>
</td> 
//这里很重要，需要一列来滚动图片 
<td id="demo2"></td> 
</tr> 
</table> 
</div> 
//滚动代码 
<script type="text/javascript" language="javascript"> 
//滚动速度 
var speed=20 
demo2.innerHTML=demo1.innerHTML 
//从右至左 
function Marquee(){ 
if(demo1.offsetWidth-demo.scrollLeft<=0) 
    demo.scrollLeft=0 
else 
    demo.scrollLeft++ 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function(){clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>

Answer 1

<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};
var Scroller = Class.create();
Scroller.prototype = {
  initialize: function(idScroller, idScrollMid, idScrollLeft, idScrollRight, options) {
    var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
    
    this.widthScroller = oScroller.offsetWidth;
    this.widthList = oScrollMid.offsetWidth;
    
    if(this.widthList <= this.widthScroller) return;
    
    oScroller.style.overflow = "hidden";
    oScrollMid.appendChild(oScrollMid.cloneNode(true));
    
    this.oScroller = oScroller;
    this.scroll = true;
    
    this.SetOptions(options);
    
    this.side = 1;//1是左 -1是右
    switch (this.options.Side) {
        case "right" :
            this.side = -1;
            break;
        case "left" :
        default :
            this.side = 1;
    }
    
    addEventHandler(oScrollMid , "mouseover", function() { oScroll.scroll = false; });
    addEventHandler(oScrollMid , "mouseout", function() { oScroll.scroll = true; });
    
    if(idScrollLeft) { addEventHandler($(idScrollLeft), "click", function() { oScroll.side = 1; }); }
    if(idScrollRight) { addEventHandler($(idScrollRight), "click", function() { oScroll.side = -1; }); }
    
    this.Scroll();
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
      Step:            1,//每次变化的px量
      Time:            50,//速度
      Side:            "left"//默认滚动方向
    };
    Object.extend(this.options, options || {});
  },
  //滚动
  Scroll: function() {
    if (this.scroll) {
        var iScroll = this.oScroller.scrollLeft, iWidth = this.widthList;
        if(this.side > 0){
            if(iScroll >= (iWidth * 2 - this.widthScroller)){ iScroll -= iWidth; }
        } else {
            if(iScroll <= 0){ iScroll += iWidth; }
        }
        this.oScroller.scrollLeft = iScroll + this.options.Step * this.side;//注意scrollLeft超过1400会自动变回1400 注意长度
    }
    var oScroll = this; window.setTimeout(function(){ oScroll.Scroll(); }, this.options.Time);
  }
};window.onload = function(){
    new Scroller("idScroller","idScrollMid", "idScrollLeft", "idScrollRight");
}
</script>

Answer 2

<div id=demo style="overflow:hidden;height:100px;width:600px;">
<table>
<tr>
<td id=demo1 valign=top>
========================在这个地方放图片======================ffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</td>
<td id=demo2 valign=top></td>
</tr></table>
</div> 
<script> 
var speed=10 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetWidth-demo.scrollLeft<=0) 
demo.scrollLeft = 0;
else{ 
demo.scrollLeft++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script> <div id="maq" style="overflow:hidden;height:100px;width:150px; cursor:hand;"> 
<div id="mtext"> 
1.文字也是可以连续滚动的<br> 
2.文字也是可以连续滚动的<br> 
3.文字也是可以连续滚动的<br> 
4.文字也是可以连续滚动的<br> 
5.文字也是可以连续滚动的<br> 
6.文字也是可以连续滚动的<br> 
</div> 
<div id=m0></div> 
</div> <script> 
var speed=40 //调整滚动速度 
m0.innerHTML=mtext.innerHTML 
function Marquee(){ 
if(m0.offsetTop-maq.scrollTop<=0) 
maq.scrollTop-=mtext.offsetHeight 
else{ 
maq.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
maq.onmouseover=function() {clearInterval(MyMar)} 
maq.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>上下滚动，左右滚动都有 ，希望对你有帮助

Answer 3

不要只粘贴代码，我找了很多粘贴里面就是不能用，直接把图片放里面可以，但是我把datalist做成的用户控件放里面就不行了！继续请教

Answer 4

你直接把DataList放上去不就行了？ 硬要使用用户控件？ 我倒是没用过用户控件往这里面扔，反正直接防DataList或者是Repeater是没有一点问题的！

Answer 5

这个是我优化过的代码，用DIV +Css来控制，比Table的形式要好得多，代码也简洁得多
<div id="dmo_1" style="height:135px; width:660px;overflow:hidden; background-color:#F4F7FC">
<ul id="dmo_1_u" style="margin-left:-2px;">

<!--这里datalist图片列表-->
<li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC">
<table width="100%" border="0" cellpadding="1" cellspacing="1">
 <tr>
  <td align="center">
  <a href="#" target="_blank" title="红茶沟公园 "><img src="/files/shortpictures/2011-4/201142933319.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" />
  </a>
  </td>
  </tr>
  <tr>
  <td align="center"><a href="#" target="_blank" title="红茶沟公园 ">红茶沟公园 </a></td>
  </tr>
</table>
</li>
<!--End这里图片列表-->

</ul>
</div>

<!--这里的代码一定要放在table外图片滚动-->
<script>

var speed=30  
var MyMar;
var n=0;
var len=document.getElementById("dmo_1_u").getElementsByTagName("li").length;
if(len>=5)
{
document.getElementById("dmo_1_u").innerHTML=document.getElementById("dmo_1_u").innerHTML + document.getElementById("dmo_1_u").innerHTML;
document.getElementById("dmo_1_u").style.width=(135 * len * 2) + "px";
 MyMar=setInterval(Marquee,speed)
}
function Marquee(){
   if(document.getElementById("dmo_1").scrollLeft>=(document.getElementById("dmo_1").scrollWidth/2 -10))
   {
   document.getElementById("dmo_1").scrollLeft=0;
   
   }
   else{
   document.getElementById("dmo_1").scrollLeft=document.getElementById("dmo_1").scrollLeft + 1;
   }
}
  
   document.getElementById("dmo_1").onmouseover=function(){
clearInterval(MyMar);
}
   document.getElementById("dmo_1").onmouseout=function(){
    MyMar=setInterval(Marquee,speed);
   }
   
</script>

Answer 6

<!doctype html>
<title>javascript无缝滚动</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
  h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  }
  #marquee ,#marquee li {
    padding:0;
    margin:0;
  }
  #marquee {
    position:relative;
    list-style:none;
    height:150px;
    width:200px;
    overflow:hidden;
    border:10px solid #8080C0;
  }
  #marquee li {
    position:absolute;
    width:1000%;
  }
  #marquee a {
    float:left;
  }
  #marquee img {
    display:block;
    border:0;
  }
</style>
<script type="text/javascript">
  var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementByIdx(id),
    slide = container.getElementsByTagName_r("li")[0],
    speed = arguments[1] || 10;
    slide.innerHTML += slide.innerHTML;
    var item  = slide.getElementsByTagName_r("a"),
    critical = item[item.length/2].offsetLeft,//临界值
    delta = 0;
    var rolling = function(){
      delta == -critical ? delta = 0 : delta--;
      slide.style.left = delta + "px";
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  }
  window.onload = function(){
    Marquee("marquee");
  }
</script>
<h1>javascript无缝滚动(向左滚动) by 司徒正美</h1>
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<ul id="marquee">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="无缝滚动"/></a>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="无缝滚动"/></a>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="无缝滚动"/></a>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="无缝滚动"/></a>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="无缝滚动"/></a>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="无缝滚动"/></a>
    <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="无缝滚动"/></a>
  </li>
</ul>