在我的頁面中共有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。任何人都可以在這裏幫助我
Jquery在哪裏? – AnaMaria
我沒有寫jQuery。點擊右箭頭我必須更改css位置 – Priya
我正在爲智能電視應用程序創建此頁面。所以我的想法是不使用旋轉木馬的插件。只是我想要移動標籤的位置。 – Priya