包含LI的Javascript中心水平滾動條

僅使用JavaScript（無jquery） - 當列表項具有一個'active'類時，我想讓它在容器中居中。包含LI的Javascript中心水平滾動條

最終的結果將是一個輪播，其中「主動」李將在頁面上居中並且點擊另一個李將使其活動，然後它將自動居中（滾動）。我遇到的問題是，我似乎無法將它放在首位。寬度是頁面的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;

來源

2012-12-22 jbolanos

你必須減去前一個<li>之間的積極<li>寬度的一半，空間來自m

來源

2012-12-22 02:42:28

包含LI的Javascript中心水平滾動條

回答

相關問題