Question

在我的页面中共有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。任何人都可以帮助我

Answer 1

我解决了这个问题。我添加了一个名为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});
});

Answer 2

首先在网站页面上工作的人请避免使用pixcel中的宽度，除非你设置最小宽度，为了更好，请使用百分比宽度，例如

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

如果您使用这样的图像无法解决问题

Answer 3

如果您需要制作幻灯片，最简单的方法是使用jquery插件。实际上有几十个jquery插件显示旋转木马/幻灯片/幻灯片。如果你想自己做，也有数百个在线教程谈论这个。现在也可以只使用CSS3。

使用jQuery的CSS轮播显示

3 个答案: