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>-->
注释去掉的话,就可以滚动起来,但是如果标签里换成的是图片的话,就无法运行,为什么?各位大侠请赐教 --------------------编程问答--------------------
试了,可以滚动.
你的img没加图片,看起来是4个叉叉,4个叉叉怎么滚动你也看不出来. --------------------编程问答-------------------- 但是加了图片是滚动不起来呀 --------------------编程问答--------------------
替换<ul id="ullist2">这节试试,我的在动
<ul id="ullist2">--------------------编程问答-------------------- <html xmlns="http://www.w3.org/1999/xhtml">
<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>
<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空间经行绑定 --------------------编程问答--------------------
不动的原因是因为你几个字符串都是一样的,动起来也没效果
你把其中一个sssss改成abcde试试,看看动不动 --------------------编程问答-------------------- 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>
我加了后变成一张张图片想跳芭蕾舞的上下跳,不知道什么原因 --------------------编程问答--------------------
css里设置ullist1 的line-height 为80 ,就不跳了
#ullist1 {height:384px;--------------------编程问答-------------------- 可是就是滚不起来呀,我要的是在从右至做的滚动
overflow:hidden;line-height:80px;margin:0;padding:0;
width: 442px;
float:left
}
补充:.NET技术 , ASP.NET