1

我在 javascript [NOT JQUERY]中有问题；我想创建幻灯片，对于我创建的每张幻灯片，当用户单击它时，跳转到该幻灯片...

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);

}

在上面的代码中，我尝试从幻灯片中删除活动类名，然后将活动添加到相关幻灯片，但我不知道如何在 span.onclick 函数中获取该幻灯片

我的代码：

<!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>

4

2 回答 2

1

JavaScript 没有块作用域，因此您创建的所有点击处理程序都引用同一个image变量。您可以通过引入新函数并立即调用它来创建范围：

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

或者稍微干净一些，但您可能需要forEach在 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);
});
于 2012-12-26T20:50:20.260 回答
-2

你可以重构你的代码：

var $images = $('#images img').each(function() {
    var $this = $(this);
    $("<span>Text here</span>").on("click", function() {
        $images.removeClass("active");
        $this.addClass("active");
    }).appendTo("#nav");
});
于 2012-12-26T20:40:47.293 回答