请问为什么不能滚动呢?求原因求详解.
这年来找工作总是被问及熟不熟悉JavaScript和JQuery的时候,只能说"一般",哎看来光熟悉PHP不是办法.
这回下定决心深造JS,但困难重重..比如做这个从右到左不断滚动图片的效果.是参考了网上的代码再自己改了改结构的.不知为什么不行,希望高手指点一下我的思路错误之处.
<center><span id="debug"></span></center><br />
<div class="feature_produtct wrap">
<div class="tt">
<span class="fl">推荐产品</span>
<span class="fr more"><a href="#" title="推荐产品">More</a></span>
</div>
<div class="comn" id="ohw">
<div id="oht">
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
<div class="product fl">
<a class="img" href="#" title="xxx">
<img src="http://image13-c.poco.cn/mypoco/myphoto/20120601/16/64914668201206011629388684041701844_000_165.jpg" width="160" height="160" alt="xxx" />
</a>
<p class="name both">
<a href="#" title="xxx">xxx</a>
</p>
</div>
</div>
<div id="oht2"></div>
</div>
<script type="text/javascript">
function debug(debugStr){
var debug = document.getElementById('debug');
debug.innerHTML = debugStr;
}
var ohw = document.getElementById('ohw');
var oht = document.getElementById('oht');
var oht2 = document.getElementById('oht2');
ohw.scrollLeft = ohw.scrollWidth;
oht2.innerHTML = oht.innerHTML;
function moveoht(){
if(ohw.scrollRight <=0 )
ohw.scrollRight +=oht2.offsetWidth;
else
ohw.scrollRight --;
debug(new Date().getSeconds()+' '+ohw.scrollRight );
}
setInterval('moveoht()', 50);
</script>
</div>
<style>
*{padding: 0; margin: 0;}
.fl{float:left;}
.fr{float:right;}
.both{clear:both;}
.feature_produtct{margin: 0 auto; width: 760px; height: 235px; overflow: hidden;}
.feature_produtct .comn{width: 100%; height: 180px; overflow: hidden; padding-top: 17px;padding-left: 20px;}
#ohw{width: 100%; height: 180px; overflow: hidden;}
.feature_produtct .comn .product{width: 170px; height: 180px; margin-right: 10px;}
.feature_produtct .comn .img{width: 160px; height: 160px;}
.feature_produtct .comn img{border:1px solid black;}
.feature_produtct .comn .name{text-align: center; font-weight: bold;}
.tt{
background-color:#4096BF;
line-height:24px;
padding-left:10px;
padding-right:10px;
font-weight:bold;
height:24px;
overflow:hidden;
}
.wrap{
border:1px solid black;
background-color:white;
overflow:hidden;}
</style>
[解决办法]
加上 overflow:scroll我想你就会明白，图片4个一排，你当然无法移动了
