jQuery幻灯片隐藏显示div与图像 [英] Jquery slide hide-show div with an image

问题描述

我有一个横幅，单击时需要更改.目前，我已经隐藏了第二个横幅，当前显示了横幅1.当我单击箭头时，我希望横幅1隐藏并且横幅2显示等.这只是我尝试使用html的问题.

I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.

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

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

i want homeArrow to be the click button to show next banner

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

but not sure how to connect to jquery...

这是JS小提琴:

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

推荐答案

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

Hide / Show one Banner at a time:

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

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

可以通过在jQuery中添加更多代码来实现从左向右滑动: http://www.learningjquery.com/2009/02/不同方向的幻灯片元素/

Sliding from left to right can be achieved by a little more code in jQuery see: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

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

You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.

更新:

这是左/右滑动. HTML:

Here is the left / right slidy. 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/

这篇关于jQuery幻灯片隐藏显示div与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！