Add automatic content exchange

Question

Add automatic content exchange

Navigation

#1 by (3 votes)

1

I need to find a way to exchange the data-id and data-content information to .number and .passo automatically, without having to depend on hover ().

I need to keep both the automatic form of this exchange as a presentation and hover () if the user wants to remain in the visualization of a specific information.

I think I was clear

JS

$(function(){
    $('.nav-metodologia img').hover(function(){
        var getID      = $(this).data('id');
        var getContent = $(this).data('content');

        $('.number').html(getID);
        $('.passo').html(getContent);

        //console.log(pegaId);
    });
});

HTML

<div class="nav-metodologia pull-right slide-here">
    <img src="images/01.png" data-id="1" data-content="conteudo 01"/>
    <img src="images/02.png" data-id="2" data-content="conteudo 02"/>
    <img src="images/03.png" data-id="3" data-content="conteudo 03"/>
</div><!-- /.nav-metodologia -->

<div class="box-metodologia">
    <div class="number radius-2">1</div>
    <div class="passo">
        <p>Conteúdo inicial</p>
    </div><!-- /.box-metodologia -->
</div><!-- /box-metodologia -->

javascript jquery

asked by anonymous 30.05.2014 / 05:49

1 answer

Change method using Java and SQL How to create a name for checkbox created with mvc helper

score 3 · Accepted Answer

To switch between items, you can keep a variable that indicates the next item to be changed and use setInterval to perform the change repeatedly and increment the variable.

To stop the presentation with the cursor, you can use clearInterval in the event mouseover and setInterval again in the mouseout event to resume the presentation.

JSFiddle Example

Adapted this question in Stack Overflow in English