【找错】图片向左循环滚动代码

Question

<style type="text/css">
#demo {
width:614px;
height:146px;
overflow: hidden;
white-space: nowrap;
background:#ffffff;
}#demo1, #demo2, #demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {
display:inline;
}/*设置ul和li横排*/
</style>
    <div id="demo">
  <div id="demo1">
    <ul>
      <li><img src="../Upload/pic/200931763560065.gif"/><br />
        <a href="Product_View.asp?id=5">1111111</a></li>
      <li><img src="../Upload/pic/200931763609125.gif" /><br />
        <a href="Product_View.asp?id=6">22222222222</a></li>
      <li><img src="../Upload/pic/200931763720001.gif"/><br />
        <a href="Product_View.asp?id=7">33333333</a></li>
      <li><img src="../Upload/pic/20096662615109.jpg"/><br />
        <a href="Product_View.asp?id=10">444444444</a></li>
      <li><img src="../Upload/pic/20096662726125.jpg" /><br />
        <a href="Product_View.asp?id=11">5555555555</a></li>
    </ul>
  </div>
  <div id=demo2></div>
</div>
<script>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
 </script>

     <li><img src="../Upload/pic/200931763560065.gif"/><br />
        <a href="Product_View.asp?id=5">1111111</a></li>
      <li><img src="../Upload/pic/200931763609125.gif" /><br />
        <a href="Product_View.asp?id=6">22222222222</a></li>
      <li><img src="../Upload/pic/200931763720001.gif"/><br />
        <a href="Product_View.asp?id=7">33333333</a></li>
      <li><img src="../Upload/pic/20096662615109.jpg"/><br />
        <a href="Product_View.asp?id=10">444444444</a></li>
      <li><img src="../Upload/pic/20096662726125.jpg" /><br />
        <a href="Product_View.asp?id=11">5555555555</a></li>
这个红色不能改动，请大家做实验的时候，以这个为例子。 图片地址可以换，但是后面要有
<br />
        <a href="Product_View.asp?id=5">1111111</a>  东西。

Answer 1

http://blog.csdn.net/lihan6415151528/archive/2009/03/19/4003830.aspx
参考这个网上例子一般都是用的不是本地图片，导致你本地显示不了 所以div比预想的就小了

Answer 2

//市场价格滚动
var ettop;
var et_scrolling = false;
function et_bottom()
{
  if(et_scrolling == false)
  {     
      et_scrolling = true;
      with($('et_price'))     
      {
          var i = 1;
          var etTimer = setInterval(function(){
              ettop = scrollTop;
              scrollTop += 3;
              if(ettop == scrollTop)
              {
                  clearInterval(etTimer);
                  et_scrolling = false;
              }
              else
              {
                  i++;
                  if(i==61)
                  {
                      et_scrolling = false;
                      clearInterval(etTimer);
                      $('et_index').setText(' ' + (parseInt($('et_index').getText())+1).toString() + ' ');    
                  }
              }
          },1);         
      }
  }      
}function et_top()
{
  if(et_scrolling == false)
  {
      et_scrolling = true;
      with($('et_price'))     
      {
          var i = 1;
          var etTimer = setInterval(function(){
              ettop = scrollTop;
              scrollTop = scrollTop - 3;
              if(ettop == scrollTop)
              {
                  clearInterval(etTimer);
                  et_scrolling = false;
              }
              else
              {
                  i++;
                  if(i==61)
                  {
                      et_scrolling = false;
                      clearInterval(etTimer);
                      $('et_index').setText(' ' + (parseInt($('et_index').getText())-1).toString() + ' ');       
                  }
              }
          },1);          
      }
  }
}
这是我做的一个竖向滚动，参考下吧。et_price是需要滚动的div的ID，需要注意的是et_price需要把内容复制一份贴上，也就是200px高度的内容需要把它复制成两份，这样才能无缝滚动。我这个做的是翻页式的滚动，就是那个61的作用。
代码不好，没面向对象，凑合看看吧呵呵

Answer 3

忘了，刚才的代码没有循环的功能。如要循环， 
 if(ettop == scrollTop) 
   { 
      clearInterval(etTimer); 
      et_scrolling = false; 
   } 
把这里换一下，把scrollTop减去内容的高度（offsetHeight）

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#ss{width:130px;height:105px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
#ss ul{margin:0px; padding:0px;width:650px;}
#ss ul li{margin:0px; padding:0px; list-style:none; float:left;display:block;}
</style>
<body>
<div id='ss'>
<ul>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/><br>111111111111111</li>
<li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/><br>222222222222222</li>
<li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/><br>333333333333333</li>
<li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/><br>444444444444444</li>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/><br>111111111111111</li>
</ul>
</div>
<script>
var speed =10;
function $(id){return document.getElementById(id)};
function $$(obj,elm){return obj.getElementsByTagName(elm)}
setInterval(function(){$('ss').scrollLeft<$$($('ss'),'ul')[0].offsetWidth-$$($('ss'),'li')[0].offsetWidth?($('ss').scrollLeft++):($('ss').scrollLeft=0)},speed)
</script>

Answer 5

左右横向无缝滚动：http://www.jslab.org.cn/?tag=scrollLeftRight

Answer 6

<style type="text/css">
#demo {
width:614px;
height:246px;
overflow: hidden;
white-space: nowrap;
background:#ffffff;
}
#demo1, #demo2, #demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {
display:inline;
}/*设置ul和li横排*/
#demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {float:left;padding:0;margin:0;text-align:center}
#demo1, #demo2 {width:900px;float:left;}
#demo2 {position:relative;left:900px;top:-138px}
#demo img {border:0;width:180px;height:120px;}
</style>
<div id="demo">
  <div id="demo1">
    <ul>
      <li><img src="../Upload/pic/200931763560065.gif"/><br />
        <a href="Product_View.asp?id=5">11</a></li>
      <li><img src="../Upload/pic/200931763609125.gif" /><br />
        <a href="Product_View.asp?id=6">22</a></li>
      <li><img src="../Upload/pic/200931763720001.gif"/><br />
        <a href="Product_View.asp?id=7">33</a></li>
      <li><img src="../Upload/pic/20096662615109.jpg"/><br />
        <a href="Product_View.asp?id=10">44</a></li>
      <li><img src="../Upload/pic/20096662726125.jpg" /><br />
        <a href="Product_View.asp?id=11">55</a></li>
    </ul>
  </div>
  <div id=demo2></div>
</div>
<script>var speed3=5//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
 </script>

Answer 7

<style type="text/css">
#demo {
    width:614px;
    height:246px;
    overflow: hidden;
    white-space: nowrap;
    background:#ffffff;
}#demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {float:left;padding:0;margin:0;text-align:center}/*float:left;设置ul和li横排*/
#demo1, #demo2 {width:900px;display:inline;}/*display:inline;设置div横排*/
#demo img {border:0;width:180px;height:120px;}
</style>
<div id="demo">
  <div id="demo1">
    <ul>
      <li><img src="../Upload/pic/200931763560065.gif"/><br />
        <a href="Product_View.asp?id=5">11</a></li>
      <li><img src="../Upload/pic/200931763609125.gif" /><br />
        <a href="Product_View.asp?id=6">22</a></li>
      <li><img src="../Upload/pic/200931763720001.gif"/><br />
        <a href="Product_View.asp?id=7">33</a></li>
      <li><img src="../Upload/pic/20096662615109.jpg"/><br />
        <a href="Product_View.asp?id=10">44</a></li>
      <li><img src="../Upload/pic/20096662726125.jpg" /><br />
        <a href="Product_View.asp?id=11">55</a></li>
    </ul>
  </div>
  <div id=demo2></div>
</div>
<script>var speed3=5//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
 </script>

Answer 8

好像在循环一回之后有个小停顿，该以行代码就解决了
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
改成
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth + 1
else{
demo.scrollLeft++
}
}
这样就好啦