Home/ Questions/Q 9039931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T09:51:18+00:00

i have a problem in javascript [NOT JQUERY] ; i want to create slideshow,

  • 0

i have a problem in javascript [NOT JQUERY];
i want to create slideshow, for each slide i create that want when user click on it, jump to that slide…

var images = $('#images img'), image;

for(var i = 0; image = images[i]; i++)
{

    var a = document.createElement('span');
    a.onclick = function(){
        var img = image;
        removeClass();
        console.log(img);
        img.className = 'active';
    }

    $('#nav')[0].appendChild(a);

}

in above code i am trying remove active class name from slides and then add active to related slide, but i don’t know how can get that slide in span.onclick function

My Code:

<!doctype html>


<head>

    <title>Welcome</title>
    <style>
        #images {position:relative;}
        #images img {position:absolute;top:0;right:0;opacity:0;transition:all 0.8s;-webkit-transition:all 0.8s;}
        .active {opacity:1!important;}
        #nav span {display:inline-block;width:12px;height:12px;background:red;border:1px solid #CCC;cursor:pointer;}
    </style>
</head>
<body>
    <div id="images">
        <img src="1.jpg" class="active" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
        <img src="5.jpg" />
        <img src="6.jpg" />
    </div>
    <div id="nav"></div>
</body>


<script>

    function $(id)
    {
        return document.querySelectorAll(id);
    }

    function removeClass(){
        var images = $('#images img'), image;
        for(var i = 0; image = images[i]; i++)
        {
            image.className = '';
        }
    }


    var images = $('#images img'), image;

    for(var i = 0; image = images[i]; i++)
    {

        var a = document.createElement('span');
        a.onclick = function(){
            var img = image;
            removeClass();
            console.log(img);
            img.className = 'active';
        }

        $('#nav')[0].appendChild(a);

    }

    function start(){
        return setInterval(function()
        {
            var current = $('.active')[0];
            var next = current.nextElementSibling;
            if(!next){
            console.log('noefds f as');
                next = $('#images img:first-child')[0];
            }
            current.className = '';
            next.className = 'active';

        },1000);
    };

    slide = start();

    var holder = $('#images')[0];

    holder.onmouseenter = function(){

        clearInterval(slide);

    }

    holder.onmouseleave = function(){
        slide = start();
    }

</script>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    JavaScript doesn’t have block scope, so all of the click handlers you create are referring to the same image variable. You can create a scope by introducing a new function and calling it immediately:

    var a = document.createElement('span');
a.onclick = (function(img){
    return function() {
        removeClass();
        img.className = 'active';
    };
})(image);

    Or slightly cleaner, but you may need to shim forEach in oldIE:

    var images = $('#images img'), nav = $("#nav")[0];
[].forEach.call(images, function(image){
    var a = document.createElement('span');
    a.onclick = function(){
        removeClass();
        image.className = 'active';
    }
    nav.appendChild(a);
});
    • 0