Question

我有一个横幅，我需要点击更改。目前我隐藏了第二条横幅，目前横幅为1。当我点击箭头时，我希望横幅1隐藏，横幅2显示等等..只有问题我尝试使用html。

<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>

我希望homeArrow成为点击按钮以显示下一个横幅

但不确定如何连接到jquery ......

这是JS小提琴：

http://jsfiddle.net/8a7GL/152/

Answer 1

您可以使用jquery提供的show/hide功能，甚至可以给它一个动画。

只需为横幅添加一个选择器并使用.click事件。

Answer 2

一次隐藏/显示一个横幅：

$(".homeArrow").on('click',function () {
    $(".homeImage").slideToggle();
});

http://jsfiddle.net/8a7GL/152/

从左到右滑动可以通过jQuery中的更多代码来实现： http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

您还可以使用addClass / removeClass并进行滑动CSS3过渡。这将大大提高质量。

更新：

这是左/右滑行。 HTML：

<div class="homeBannerContainer" style="display: block">
    <div id="a1" class="homeImage">
         <h4>Banner 1</h4>

        <img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
        <div class="homeBanner">
             <h3>My banner</h3>

        </div>
    </div>
    <div id="a2" class="homeImage" style="display: none">
         <h4>Banner 2</h4>

        <img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
        <div class="homeBanner" style="display: none">
             <h3>My banner 2</h3>

        </div>
    </div>
    <div class="homeArrow">
        <img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
    </div>

CSS：

    $(".homeArrow").on('click', function () {
    $('.homeImage').animate({
        width: 'toggle'
    });

});

样本： http://jsfiddle.net/8a7GL/174/

Answer 3

http://api.jquery.com/toggle/

function change(){
    $("#firstbanner").toggle();
    $("#secondbanner").toggle();
}

在HTML中：

<button onclick="change()" />

Answer 4

试试这个：

if ($('#Banner2Home').is(":visible")) {

    $('#Banner2Home').hide();

} else {

    $('#Banner2Home').show();

}

return false;

Jquery幻灯片隐藏显示div与图像

4 个答案: