这年来找工作总是被问及熟不熟悉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>

解决方案 »

  1.   

    加上 overflow:scroll我想你就会明白,图片4个一排,你当然无法移动了
      

  2.   

    加了scroll没用啊,我反而给oht加足够的宽度,比如3000就全部横起来可以滚了..但是不知怎么弄不断从左到右的,于是马马虎虎地做了个回滚效果.但其实我做那种不断重复从左到右(最后一张图出来后,它旁边跟接着的是第一图那种)哎不行了..<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">1</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">2</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">3</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">4</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">5</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">6</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">7</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">8</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">9</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">10</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;

    var east = true;

    function moveoht(){
    var lastValue = ohw.scrollLeft;
    if(east){
    ohw.scrollLeft++;
    }else{
    ohw.scrollLeft--;
    }

    if(ohw.scrollLeft==lastValue){
    east = false;
    }else if(ohw.scrollLeft==0){
    east = true;
    }
    debug(new Date().getSeconds()+' '+ohw.scrollLeft+' '+ohw.scrollWidth);
    }
    setInterval('moveoht()', 30);
    </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: 900px; height: 180px; overflow: hidden;}
    #oht{width: 1960px; height:180px;}
    .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>
      

  3.   

    建议先研究简单点的,比如div里面全是文字。