jQuery水平滑動畫廊不能正常工作

我正在嘗試創建一個jQuery滑動視頻庫，但它並沒有完全按照我的意願去做。當我點擊我的箭頭按鈕時，不是滾動瀏覽圖片，而是根據方向將整個div向右/向左移動。jQuery水平滑動畫廊不能正常工作

HTML：

<div id="videocontainer"> 
    <a href="#" class="backward"><img src="images/backwards.png" width="30" height="27" /></a> 
    <div class="videogallery"> 
    <ul> 
     <li><a href=""><img src="thumbnails.jpg" />video1<span></span></a></li> 
     <li><a href=""><img src="thumbnails.jpg" />video2<span></span></a></li> 
     <li><a href=""><img src="thumbnails.jpg" />vidoe3<span></span></a></li> 
    </ul> 
    </div> 
    <a href="#" class="forward"><img src="images/forward.png" width="30" height="27" /></a> 
</div>

的jQuery：

$(document).ready(function() { 
    $('.forward').click(function() { 
    $('.videogallery').animate({ 
     marginLeft: "+=200" 
    }, "fast"); 
    }); 
    $('.backward').click(function() { 
    $('.videogallery').animate({ 
     marginLeft: "-=200" 
    }, "fast"); 
    }); 
});

CSS：

#videocontainer { 
    float:left; 
    width:100%; 
    height:160px; 
} 
.backward { 
    background-image:url(images/backward.png); 
    margin-top:50px; 
    float: left; 
    height: 100%; 
} 
.forward { 
    background-image:url(images/forward.png); 
    margin-top:-30px; 
    float: left; 
    height: 100%; 
} 
ul { 
    list-style-type: none; 
    height: 80px; 
    width: 100%; 
    margin: auto; 
} 
li { 
    float: left; 
} 
ul a { 
    padding-right: 32px; 
    padding-left: 32px; 
    display: block; 
    line-height: 30px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 21px; 
    color: #371C1C; 
} 
.videogallery { 
    width:100%; 
    zoom:1; 
} 
.videogallery span{ display:block; } 
.videogallery a{ 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    position:relative; 
    vertical-align:top; 
    margin:5px; 
    padding:5px; 
    width:180px; 
    border:solid 1px #b8b8b8; 
    background-color:#f4f5f5; 
    font-family:Trebuchet,Tahoma,Arial,sans-serif; 
    font-size:11px; 
    font-weight:normal; 
    text-decoration:none; 
    text-align:center; 
    opacity:0.87; 
}

現在我使用的視頻videolightbox，但找工作，應該是無關的。基本上我想把它變成一個carosel，我相信它的東西很簡單，需要調整，但我仍然是一個新手，並試圖學習。

來源

2013-04-30 Ansipants

但你是動畫div'.videogallery'，所以這就是爲什麼div移動。 – drip 2013-04-30 04:54:17

以及videogallery div將是包含主要內容的div – Ansipants 2013-04-30 05:05:40

我幾乎弄明白了。我向ul中的href鏈接添加了一個類，它實現了這個訣竅。

來源

2013-04-30 05:21:34 Ansipants

jQuery水平滑動畫廊不能正常工作

回答

相關問題