Question

我试图默认隐藏按钮，只有当鼠标结束时它们才会显示。虽然我在旋转木马核心代码似乎添加了显示块的问题，即使我在CSS中设置了display none。

var $slides = $("#slides");
$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});
$slideButtons = $slides.find(".next,.prev");
$slides.find('ul.banners').hover(function(){
    $slideButtons.fadeIn();
},function(){
    $slideButtons.fadeOut();
});

HTML

<div id="slides">
    <ul class="banners">
        <li><img /></li>
        <li><img /></li>
    </ul>

    <ul class="pagination"></ul>

    <div class="next">Next</div>
    <div class="prev">Previous</div>
</div>

Answer 1

在css中尝试这种方式

 .next{
    display:none !important;
  }

  .prev{
     display:none !important;
  }

Answer 2

确保最新的样式属性（即html中最下面的属性）是将可见性设置为空的属性。添加到标签上的样式选项是我认为最重要的。尝试在标记中添加以下内容：

<tag style="visible:0;" ></tag>

如果这有效，那么你知道这是你的问题，这可能是一个解决方案，因为JavaScript可能会稍后在鼠标悬停时更改样式。

如果您的所有包含都在标题中，那么将CSS样式表（将可见性设置为空的那个）移动到其他人可能会有所帮助之后，但如果您的JavaScript包含在页面底部，则可能需要编辑JavaScript或移动它。

Answer 3

此插件使用sprite进行翻转效果。我认为快速解决方法是使用按钮来降低不透明度。

Answer 4

您可以尝试覆盖配置。我在您的代码中添加了display: none,。我没有测试过它。

$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        display: none,
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        display: none,
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});

插件后是否包含CSS样式表？插件执行后，您可以尝试通过CSS和/或jquery / javascript覆盖。

Answer 5

尝试以下代码：

$("#layout-main").hover(
    function(){
        $(".prev").fadeIn(500);
        $(".next").fadeIn(500);
        $(".pagination a").fadeIn(500);
    }, function(){
        $(".prev").fadeOut(500);
        $(".next").fadeOut(500);
        $(".pagination a").fadeOut(500);
    }
);

Answer 6

在css文件中使用这个简单的代码。

.carousel .carousel-control {visibility：hidden; } .carousel：hover .carousel-control {visibility：visible; }

jquery插件caroufredsel隐藏next / prev按钮直到mouseover carousel

6 个答案: