2013-08-01 397 views
-2

在我的頁面中共有9個選項卡。最初我顯示5個選項卡,左右箭頭。當用戶點擊右箭頭時,必須顯示第6個選項卡,第1個選項卡必須隱藏。使用jQuery的CSS旋轉木馬顯示

這裏是Fiddle

的Html

<div class="carousel_area"> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_channels.png" alt="Channels"></p> 
      <p class="caro_lbl">Channels</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_favourite.png" alt="Favourites"></p> 
      <p class="caro_lbl">Favourites</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel carousel_focus"> 
      <p class="caro_icon"><img src="images/icn_feature.png" alt="Featured"></p> 
      <p class="caro_lbl">Featured</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_history.png" alt="Recommended"></p> 
      <p class="caro_lbl">Recommended</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_playlist.png" alt="Playlist"></p> 
      <p class="caro_lbl">Playlist</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_recommend.png" alt="History"></p> 
      <p class="caro_lbl">History</p> 
     </a> 
    </div> 

CSS

.carousel_area{ 
    display:block; 
    width:1152px; 
    height:150px; 
    overflow:hidden; 
    position:absolute; 
    top:0px; 
    left:64px; 
} 
.carousel{ 
    display:block; 
    width:206px; 
    height:100px; 
    margin:50px 1px 0px 0px; 
    background:#175151 repeat-x; 
    float:left; 
    text-decoration:none;} 

頁面寬度是1280年我的想法,在右箭頭的點擊我已經做出拳頭元素左邊緣到一些負值,但我不知道如何做到這一點。我正在使用jQuery。任何人都可以在這裏幫助我

+0

Jquery在哪裏? – AnaMaria

+0

我沒有寫jQuery。點擊右箭頭我必須更改css位置 – Priya

+0

我正在爲智能電視應用程序創建此頁面。所以我的想法是不使用旋轉木馬的插件。只是我想要移動標籤的位置。 – Priya

回答

-2

如果您需要製作幻燈片,可能最容易使用jquery插件。有幾十個jquery插件可以顯示傳送帶/幻燈片/電影片段。如果你想自己做,也有數百個在線的教程討論這個問題。現在也可以僅使用CSS3來完成它。

+0

我想知道如何將第一個製表符左邊距更改爲負數 – Priya

+3

如何將此分類爲答案? [回覆] – AnaMaria

+0

我只是想幫助一個看起來不能寫自己的傳送帶的人。即使是一個基本的旋轉木馬,也需要至少幾十行jquery。而這到底是一個「標籤」?我的解決方案,如果我要做這樣的旋轉木馬將是使用一個插件。我認爲這是一個有效的答案。 – Ringo

0

我解決了這個問題。我添加了一個稱爲旋轉木馬包裝的div。在這我固定顯示區域的寬度和溢出隱藏。然後在carousel_area我刪除了隱藏的溢出,我放置了我所有的選項卡。點擊箭頭按鈕,我改變了carousel_area的邊距。

<div class="carousel_wrapper"> 
<div class="carousel_area"> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_channels.png" alt="Channels"></p> 
      <p class="caro_lbl">Channels</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_favourite.png" alt="Favourites"></p> 
      <p class="caro_lbl">Favourites</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel carousel_focus"> 
      <p class="caro_icon"><img src="images/icn_feature.png" alt="Featured"></p> 
      <p class="caro_lbl">Featured</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_history.png" alt="Recommended"></p> 
      <p class="caro_lbl">Recommended</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_playlist.png" alt="Playlist"></p> 
      <p class="caro_lbl">Playlist</p> 
     </a> 
     <a href="javascript:void(0);" class="carousel"> 
      <p class="caro_icon"><img src="images/icn_recommend.png" alt="History"></p> 
      <p class="caro_lbl">History</p> 
     </a> 
    </div> 
</div> 

CSS:

.carousel_wrapper{ 
    diplay:block; 
    width:1151px; 
    height:150px; 
    overflow:hidden; 
    position:absolute; 
    top:0px; 
    left:64px; 
    } 

.carousel_area{ 
    display:block; 
    width:1152px; 
    height:150px;  
    position:absolute; 
    top:0px; 
    left:64px; 
} 

的Jquery:

$('.rght_btn').click(function(){ 
    left=left-206; 
    $('.carousel_area').css({left:left}); 
}); 
0

首先誰對網站頁面的作品的,請避免在pixcels寬度,除非UR設置最小寬度,爲更好地請到寬度以百分比表示,例如

<style> 
.divimg{ 
     width:54%; 
     } 
</style> 

如果你使用這樣的圖像不能得到解決的問題