Skip to main content
Insertado código para que sea ejecutable mediante snippet y se vea más claro el efecto.
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64
<!DOCTYPE html>
<html>
<head>
    <title>prueba</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<style type="text/css">
    .prueba{

        height: 800px;
        background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
    }
</style>

<div class="prueba">
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>


    <script type="text/javascript">
        var slideIndex = 0;
        var img = [
        "http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg",
        "http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.jpg"
        ];

        setInterval(function(){setImage(1)}, 3000);

        function plusDivs(n) {
            setImage(n);
        }

        function setImage(n){
            slideIndex = slideIndex + n;

            if(slideIndex > 3){
                slideIndex = 0;
            }else if(slideIndex < 0){
                slideIndex = 3;
            }

            $('.prueba').css("background-image", "url("+img[slideIndex]+")"); 
        }
    </script>
</body>
</html>

var slideIndex = 0;
        var img = [
        "http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg",
        "http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.jpg"
        ];

        setInterval(function(){setImage(1)}, 3000);

        function plusDivs(n) {
            setImage(n);
        }

        function setImage(n){
            slideIndex = slideIndex + n;

            if(slideIndex > 3){
                slideIndex = 0;
            }else if(slideIndex < 0){
                slideIndex = 3;
            }

            $('.prueba').css("background-image", "url("+img[slideIndex]+")"); 
        }
.prueba{
  height: 800px;
  background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prueba">
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<!DOCTYPE html>
<html>
<head>
    <title>prueba</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<style type="text/css">
    .prueba{

        height: 800px;
        background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
    }
</style>

<div class="prueba">
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>


    <script type="text/javascript">
        var slideIndex = 0;
        var img = [
        "http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg",
        "http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.jpg"
        ];

        setInterval(function(){setImage(1)}, 3000);

        function plusDivs(n) {
            setImage(n);
        }

        function setImage(n){
            slideIndex = slideIndex + n;

            if(slideIndex > 3){
                slideIndex = 0;
            }else if(slideIndex < 0){
                slideIndex = 3;
            }

            $('.prueba').css("background-image", "url("+img[slideIndex]+")"); 
        }
    </script>
</body>
</html>

var slideIndex = 0;
        var img = [
        "http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg",
        "http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.jpg"
        ];

        setInterval(function(){setImage(1)}, 3000);

        function plusDivs(n) {
            setImage(n);
        }

        function setImage(n){
            slideIndex = slideIndex + n;

            if(slideIndex > 3){
                slideIndex = 0;
            }else if(slideIndex < 0){
                slideIndex = 3;
            }

            $('.prueba').css("background-image", "url("+img[slideIndex]+")"); 
        }
.prueba{
  height: 800px;
  background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prueba">
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

Origen Enlace
goku venz
  • 408
  • 4
  • 11
  • 27

Como quitar parpadeo al cargar imágenes en slideshow?

Desarrolle un pequeño slideshow pero al momento de cargar las imagenes por primera vez aparece un parpadeo muy molesto, tiempo despues de que las imagenes ya fueron cargadas no vuelve aparecer ese parpadeo.

no quiero utilizar esta forma, quiero poder resolverla de la forma que tengo.

<img src="http:..." style="display:none" >
<img src="http:..." style="display:none" >
<img src="http:..." style="display:none" >

<script>
  $('#id').hide();
  $('#id').show();
</script>

Esta es mi codigo que tengo

<!DOCTYPE html>
<html>
<head>
    <title>prueba</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<style type="text/css">
    .prueba{

        height: 800px;
        background-image: url(http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg);
    }
</style>

<div class="prueba">
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>


    <script type="text/javascript">
        var slideIndex = 0;
        var img = [
        "http://www.todopaisajes.com/1024x768/paisaje-de-flores.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-natural-en-el-campo.jpg",
        "http://www.todopaisajes.com/1024x768/paisaje-rural-del-campo.jpg",
        "http://v3wall.com/wallpaper/1024_768/1005/1024_768_20100517121753395086.jpg"
        ];

        setInterval(function(){setImage(1)}, 3000);

        function plusDivs(n) {
            setImage(n);
        }

        function setImage(n){
            slideIndex = slideIndex + n;

            if(slideIndex > 3){
                slideIndex = 0;
            }else if(slideIndex < 0){
                slideIndex = 3;
            }

            $('.prueba').css("background-image", "url("+img[slideIndex]+")"); 
        }
    </script>
</body>
</html>