当前位置:编程学习 > C#/ASP.NET >>

js图片做横向滚动效果的时候,滚动不起来,求各位大侠请教,li标签内全部是文字就可以滚动,如果加的全是事图片就无法滚动起来?为什么??

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精彩推荐</title>
<style type="text/css">
    <!--

.sinTip {font-size:14px;
        height: 345px;
    }

#ullist2 {height:30px; overflow:hidden;line-height:30px;margin:0;padding:0;}
#ullist2 a{padding-left:15px;}
#ullist2 a, #ullist2 a:link, #ullist2 a:visited {color:#000;text-decoration: none;}
#ullist2 a:hover {color:#c00;}
-->
</style>
</head>
<body>
<div class="sinTip">

<ul id="ullist2">
        <li style="float:left; width:104px; height:31px">
            <img alt="" src=""/></li>
      <li style="float:left; width:104px; height:28px" ><img alt="" src="" /></li>
      <li style="float:left; width:104px; height:28px"> <img alt="" src="" /></li>
 <!--     <li style="float:left; width:104px"> d</li>-->
   
      

</ul>
</div>
<script type="text/javascript">
       (function(ul, delay, speed, width) {
              var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul;
              var delay = delay||1000;
              var speed=speed||20;
              var lineHeight = width||104;
              var tid = null, pause = false;
              var start = function() {
                     tid=setInterval(slide, speed);
              }
              var slide = function() {
                     if (pause) return;
                     slideBox.scrollLeft += 2;
                     if ( slideBox.scrollLeft % lineHeight == 0 ) {
                            clearInterval(tid);
                            slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
                            slideBox.scrollLeft = 0;
                            setTimeout(start, delay);
                     }
              }
              slideBox.onmouseover=function(){pause=true;}
              slideBox.onmouseout=function(){pause=false;}
              setTimeout(start, delay);
       })
       ( 'ullist2', 300, 1, 190 );//停留时间,相对速度(越小越快),每次滚动多少,最好和Li的Line-height一致。
</script>      
</body>

</html> --------------------编程问答--------------------  <!-- <li style="float:left; width:104px"> d</li>-->
注释去掉的话,就可以滚动起来,但是如果标签里换成的是图片的话,就无法运行,为什么?各位大侠请赐教 --------------------编程问答--------------------
引用 1 楼 mark529 的回复:
<!-- <li style="float:left; width:104px"> d</li>-->
注释去掉的话,就可以滚动起来,但是如果标签里换成的是图片的话,就无法运行,为什么?各位大侠请赐教


试了,可以滚动.
你的img没加图片,看起来是4个叉叉,4个叉叉怎么滚动你也看不出来. --------------------编程问答-------------------- 但是加了图片是滚动不起来呀 --------------------编程问答--------------------
引用 3 楼 mark529 的回复:
但是加了图片是滚动不起来呀




替换<ul id="ullist2">这节试试,我的在动
<ul id="ullist2">
<li style="float:left; width:80px; height:80px"><img alt="" src="http://www.feizhuliuw.cn/upimg/allimg/081215/0835160.gif"/></li>
<li style="float:left; width:80px; height:80px"><img alt="" src="http://www.feizhuliuw.cn/upimg/allimg/081215/0835161.gif"/></li>
<li style="float:left; width:80px; height:80px"><img alt="" src="http://www.feizhuliuw.cn/upimg/allimg/081215/0835162.gif"/></li>
<li style="float:left; width:80px; height:80px"><img alt="" src="http://www.feizhuliuw.cn/upimg/allimg/081215/0835163.gif"/></li>
</ul>
--------------------编程问答-------------------- <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精彩推荐</title>
<style type="text/css">
    <!--

.sinTip {font-size:14px;
        height: 345px;
    }

#ullist1 {height:212px; 
overflow:hidden;line-height:30px;margin:0;padding:0;
    }
#ullist1 a{padding-left:15px;}
#ullist1 a, #ullist1 a:link, #ullist1 a:visited {color:#000;text-decoration: none;}
#ullist1 a:hover {color:#c00;}
-->
</style>
</head>
<body>
<div class="sinTip">

<ul id="ullist1">
        <li style="float:left; width:104px; height:31px">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>
               <li style="float:left; width:104px; height:31px">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>
               <li style="float:left; width:104px; height:31px">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>
               <li style="float:left; width:104px; height:31px">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>

   
      

</ul>
</div>
<script type="text/javascript">
       (function(ul, delay, speed, width) {
              var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul;
              var delay = delay||1000;
              var speed=speed||20;
              var lineHeight = width||104;
              var tid = null, pause = false;
              var start = function() {
                     tid=setInterval(slide, speed);
              }
              var slide = function() {
                     if (pause) return;
                     slideBox.scrollLeft += 2;
                     if ( slideBox.scrollLeft % lineHeight == 0 ) {
                            clearInterval(tid);
                            slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
                            slideBox.scrollLeft = 0;
                            setTimeout(start, delay);
                     }
              }
              slideBox.onmouseover=function(){pause=true;}
              slideBox.onmouseout=function(){pause=false;}
              setTimeout(start, delay);
       })
       ( 'ullist1', 300, 1, 190 );//停留时间,相对速度(越小越快),每次滚动多少,最好和Li的Line-height一致。
</script>      
</body>

</html> --------------------编程问答-------------------- 我这个外面加了个相框,当中的图片暂用sss来代替,为什么滚不起来呢 --------------------编程问答-------------------- 我发现这个js超烦的静态的如果可以滚动的话,我还要用reapter空间经行绑定 --------------------编程问答--------------------
引用 5 楼 mark529 的回复:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精彩推荐</title>
<style type="text/css">
  <!--

.sinTip {font-size:……


不动的原因是因为你几个字符串都是一样的,动起来也没效果
你把其中一个sssss改成abcde试试,看看动不动 --------------------编程问答-------------------- li这个标签里加了table做相框就滚动不起来啦~!怪伐啦 --------------------编程问答--------------------
引用 9 楼 mark529 的回复:
li这个标签里加了table做相框就滚动不起来啦~!怪伐啦

加框可以在每个img外面加个table,还是可以滚的
--------------------编程问答-------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精彩推荐</title>
<style type="text/css">
    <!--

.sinTip {font-size:14px;
        height: 402px;
        width: 440px;
    }

#ullist1 {height:384px; 
overflow:hidden;line-height:30px;margin:0;padding:0;
        width: 442px; 
float:left
    }
#ullist1 a{padding-left:15px;}
#ullist1 a, #ullist1 a:link, #ullist1 a:visited {color:#000;text-decoration: none;}
#ullist1 a:hover {color:#c00;}
-->
</style>
</head>
<body>
<div class="sinTip">

<ul id="ullist1">
        <li style="float:left; width:104px; ">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>
               <li style="float:left; width:104px; ">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>
               <li style="float:left; width:104px; ">
           <table width="104" border="0" cellspacing="0" cellpadding="0" style="height: 202px">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>
               <li style="float:left; width:104px; ">
           <table width="104" height="144" border="0" cellspacing="0" cellpadding="0">
               
                <tr>
                  <td height="4"><img src="images/book_1.gif" width="104" height="4" /></td>
                </tr>
                <tr>
                  <td height="120">
                  <table width="104" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="5"><img src="images/book_2.gif" width="5" height="120" /></td>
                      <td width="90">ddddd</td>
                      <td width="9"><img src="images/book_3.gif" width="9" height="120" /></td>
                    </tr>
                  </table>
                  </td>
                </tr>
               
                <tr>
                  <td height="10"><img src="images/book_4.gif" width="104" height="10" /></td>
                </tr>
                <tr>
                  <td align="center">sssss</td>
                </tr>
              </table></li>

   
      

</ul>
我加了后变成一张张图片想跳芭蕾舞的上下跳,不知道什么原因 --------------------编程问答--------------------
引用 11 楼 mark529 的回复:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Cont……



css里设置ullist1 的line-height 为80 ,就不跳了
#ullist1 {height:384px;  
overflow:hidden;line-height:80px;margin:0;padding:0;
  width: 442px;  
float:left
  }
--------------------编程问答-------------------- 可是就是滚不起来呀,我要的是在从右至做的滚动
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,