-2

在我的页面中总共有 9 个标签。最初我显示 5 个选项卡，左右箭头。当用户单击右箭头时，它必须显示第 6 个选项卡，而第一个选项卡必须隐藏。

这是小提琴

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。任何人都可以帮助我吗

4

3 回答 3

0

我解决了这个问题。我又添加了一个名为 carousel wrapper 的 div。在那我固定了显示区域的宽度并隐藏了溢出。然后在 carousel_area 中，我删除了隐藏的溢出并放置了所有选项卡。Onclick 箭头按钮我更改了 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;
}

查询：

$('.rght_btn').click(function(){
    left=left-206;
    $('.carousel_area').css({left:left});
});
于 2013-08-02T05:53:33.857 回答
0

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

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

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

于 2013-08-02T05:59:47.637 回答
-2

如果您需要制作幻灯片，使用 jquery 插件可能是最简单的。从字面上看，有几十个 jquery 插件可以显示轮播/幻灯片/幻灯片。如果你想自己做，网上也有数百个教程讨论这个。现在也可以仅使用 CSS3 来实现。

于 2013-08-01T06:39:44.717 回答