Soft transition in slider images [duplicate]

Question

Soft transition in slider images [duplicate]

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

-1

I have a div that displays a series of images in your background:

<div id="header-slider">

   ...   

</div>

In order for the images to loop through I made the following code in JQuery:

var imagens = 
[
    'url(imagem01.jpg)',
    'url(imagem02.jpg)',
    'url(imagem03.jpg)',
    'url(imagem04.jpg)',
    'url(imagem05.jpg)',
],imgindex = 0, $header = $('#header-slider');

setInterval(function()
    { 
        $header
        .css('background-image', imagens[imgindex++ % imagens.length]);
    }, 3000);

Now I need this transition to be smooth. There are several slider solutions that use img elements but I did not find any that manipulate the 'background-image' attribute. How can I do this?

Code

jquery css

asked by anonymous 03.03.2014 / 00:46

3 answers

simplify a big IF! Error collecting database information

score 2 · Answer 1

To do this, try creating a div inside the header-slider that must be the same size as header-slider .

After this, you can play with the funds, since you can put two at the same time.

Here's an example:

var imagens = 
[
    'url(imagem01.jpg)',
    'url(imagem02.jpg)',
    'url(imagem03.jpg)',
    'url(imagem04.jpg)',
    'url(imagem05.jpg)',
],imgindex = 0, div1 = $('#header-slider'), div2 = $('#header-slider2');
div2.css('background-image', fundos[0]);
setInterval(function() {
    div1.css('background-image', div2.css('background-image'));
    div2.fadeOut().css('background-image', imagens[imgindex++ % imagens.length]).fadeIn(1000);
}, 3000);

HTML

<div id="header-slider">
    <div id="header-slider2"></div>
</div>

CSS

#header-slider {
    position: relative;
}
#header-slider2 {
    position: absolute;
    top: 0px; left: 0px;
}

And a test .

score 0 · Answer 2

    <!doctype html>
    <html lang="pt-br">
    <head>
    <title>Slide
    </title>
    <style>
    input[type="text"]{
    -webkit-voice-volume: loud;
    }
    .image {
        position: absolute;
        margin-left: auto;

        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        align: center;
    }

    .Number {
        top: 5px;
        position: relative;
        display: inline;
        margin-left: 60px;
        height: 55px;
        width: 55px;
        padding: 5px;
        background-color: #999999;
        z-index: 6;
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        font-family: 'Prosto One', cursive;

        -webkit-box-shadow: 0px 0px 5px #000000;
        box-shadow: 0px 0px 5px #000000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        opacity: 0.8;

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .Number:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .Number:active{
        top: 7px;
    }

    .pp{
    font-family: 'Prosto One', cursive;
    text-decoration: none;
    font-size: 100px;
    color: #fff;
    line-height: 400px;
    position: absolute;
    top: 0px;
    z-index: 100;
    opacity: 0.8;
    -webkit-transition: all 0.5s;
    }
    .pp:hover{
    opacity: 1;
    }
    </style>
    <script>
    function prev(n){
        if(n == '1'){
            document.getElementById('img1').style.opacity = "1";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('5')";
            document.getElementById('two').href = "javascript:prev('2')";
        }if(n == '2'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "1";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('1')";
            document.getElementById('two').href = "javascript:prev('3')";
        }if(n == '3'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "1";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('2')";
            document.getElementById('two').href = "javascript:prev('4')";
        }if(n == '4'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "1";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('3')";
            document.getElementById('two').href = "javascript:prev('5')";
        }if(n == '5'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "1";
            document.getElementById('one').href = "javascript:prev('4')";
            document.getElementById('two').href = "javascript:prev('2')";
        }if(document.getElementById('aluie').value == 'passar'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "1";
            document.getElementById('one').href = "javascript:prev('4')";
            document.getElementById('two').href = "javascript:prev('2')";
        }
    }
    </script>
    <meta charset="utf-8" />
    <link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'>
    </head>
    <body onload="prev('1')" id="body">
    <img src="http://www.agendapet.com.br/Content/images/uploads/artigos/Gato%20himalaio%20andando.jpg"style="z-index:5" class="image" name="img1" id="img1" />
    <img src="http://caninablog.files.wordpress.com/2011/08/cachorro-louco.jpg?w=500&h=400"style="z-index:4" class="image" name="img2" id="img2" />
    <img src="http://mlb-s2-p.mlstatic.com/cavalo-mangalarga-marchador-marcha-picada-11207-MLB20041796266_022014-O.jpg"style="z-index:3" class="image" name="img3" id="img3" />
    <img src="http://www.unitmagazine.com/images/pet/23/pet-5.jpg"style="z-index:2" class="image" name="img4" id="img4" />
    <img src="http://1.bp.blogspot.com/-hUMf0dm72eQ/Uwfl0KLLDqI/AAAAAAAABk0/Q958VLvi2HQ/s1600/Sem+T%C3%ADtulo-1.png"style="z-index:1" class="image" name="img5" id="img5" />
    <a href="" class="pp" id="one" style="left: 15px"><</a>
    <a href="javascript:prev('2')" class="pp" style="left: 460px" id="two">></a>

    <a href="javascript:prev('1')" class="Number">1</a>
    <a href="javascript:prev('2')" class="Number">2</a>
    <a href="javascript:prev('3')" class="Number">3</a>
    <a href="javascript:prev('4')" class="Number">4</a>
    <a href="javascript:prev('5')" class="Number">5</a>

    </body>
    </html>

See if that works.

score 0 · Answer 3

I suggest using CSS transitions . So you do not need Javascript to make the smooth transition, you just need to add this to the CSS for div #header-slider :

-webkit-transition: background-image 0.7s ease-in-out; 
-moz-transition: background-image 0.7s ease-in-out;   
-o-transition: background-image 0.7s ease-in-out;
-ms-transition: background-image 0.7s ease-in-out;
transition: background-image 0.7s ease-in-out;
            ^-propriedade         ^-estilo de transição
                             ^-velocidade de transição

CSS transitions only work in modern browsers. ie IE10 +

Soft transition in slider images [duplicate]

3 answers

Example