在我的页面中共有9个标签。最初我显示5个选项卡,左箭头和右箭头。当用户单击右箭头时,它必须显示第6个选项卡,并且第1个选项卡必须隐藏。
以下是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 :(得分:0)
我解决了这个问题。我添加了一个名为carousel wrapper的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});
});
答案 1 :(得分:0)
首先在网站页面上工作的人请避免使用pixcel中的宽度,除非你设置最小宽度,为了更好,请使用百分比宽度,例如
<style>
.divimg{
width:54%;
}
</style>
如果您使用这样的图像无法解决问题
答案 2 :(得分:-2)
如果您需要制作幻灯片,最简单的方法是使用jquery插件。实际上有几十个jquery插件显示旋转木马/幻灯片/幻灯片。如果你想自己做,也有数百个在线教程谈论这个。现在也可以只使用CSS3。