javascript - 如何在响应式设计中水平自动滚动图像

Question

所以我有这个网站： http: //onthemouse.com/。<li>我使用首页上的标签将我的投资组合图像以网格状排列。我需要它们并排对齐并自动水平滚动，可能使用 javascript 或 jquery（请不要使用其他库）。如果它也有滚动条就好了。我试过这样的事情：

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

接着

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

如果您访问页面，那基本上只是一个精简的版本，还有更多相关的标签。但即使仅此代码（所有标签都明显关闭）似乎也不起作用..

Answer 1

从你display:inline的attr 中删除widthstyleli

<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
  <a href="BLAHBLAH" title="BLAHBLAH">
    <img src="BLAHBLAH" alt="" title="" >
  </a>
</li>



#works, #wrapper {
    overflow: visible;
}
body {
    overflow-x:auto;
}
#thumbs .portfolio {
    display:inline-block;
    width: 438px !important;
    float:none !important;
}
#thumbs {
    white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
    display:inline;
    zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
    display:inline;
    zoom:1;
}

Answer 2

您可以考虑使用 Flexislider 来解决您的问题。这是一个响应式滑块。

http://www.woothemes.com/flexslider/