0

JavaScriptのみを使用する（jqueryは使用しない）-リストアイテムに「アクティブ」のクラスがある場合に、コンテナー内で中央に配置されるようにしたい。

最終結果はカルーセルになり、「アクティブな」liがページの中央に配置され、別のliをクリックするとアクティブになり、自動中央揃え（スクロール）されます。私が抱えている問題は、そもそもそれを中心に置くことができないように見えることです。幅はページの100％であるため、幅は動的です。

ありとあらゆる助けが素晴らしいでしょう。

html：

<div id="container">
    <ul id="carousel">
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li class="active">4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>

css：

html, body {margin:0;padding:0;height:100%;width:100%;}
ul{
  position:relative;
  width:100%;
  height:322px;
  margin:0 auto;
  padding:0;
  overflow-x:hidden;
  white-space: nowrap;
}
li{
  position:relative;
  display:inline-block;
  padding:0;
  margin-right:20px;
  list-style-type:none;
  width:200px;
  height:200px;
  top: 70px;
  background-color:#efefef;
  border:1px solid #d3d3d3;
  border-radius: 12px;
}
li:first-child {
  margin-left: 20px;
}
li.active {
  top: 20px;
  width:300px;
  height:300px;
}

javascript：

var r = document.getElementById('carousel').offsetWidth;
var l = document.getElementById('carousel').scrollWidth;
var m = r / 2;
document.getElementById('carousel').scrollLeft = 0;
document.getElementById('carousel').scrollLeft = m;
4

1 に答える 1

1

アクティブの幅の半分と前の<li> 間のスペースを減算する必要があります <li>m

于 2012-12-22T02:42:28.257 に答える