Javascript 单选按钮和图像滑块

多亏了用户A.V的一些建议，我制作了一个基于单选按钮的图像滑块，您可以在这里看到：

现在，我想做最后一件事，但我不知道怎么做。我想能够切换到下一个图像点击图像本身当然选择跳转到下一个按钮，太

如果有人能帮忙，那就太棒了。提前谢谢

JSFiddle

---

你想过简单的JavaScript或jQuery脚本吗？这并不难做到，下面是一个例子：

jQuery：

function slideSwitch() {
            var $active = $('#slideshow IMG.active');

            if ($active.length == 0) $active = $('#slideshow IMG:last');

            var $next = $active.next().length ? $active.next()
                : $('#slideshow IMG:first');

            $active.addClass('last-active');

            $next.css({ opacity: 0.0 })
                .addClass('active')
                .animate({ opacity: 1.0 }, 1000, function () {
                    $active.removeClass('active last-active');
                });
        }

        $(function () {
            setInterval("slideSwitch()", 3000);
        });

html:

这将使一个简单的幻灯片显示的图片，你可以改变它，让它改变点击，而不是在间隔

---

这是我的代码，但请随意使用并根据需要进行修改。

有许多javaScript滑块。你只需要搜索谷歌就可以得到答案。但是，下面的代码可能会有所帮助

---

首先更改函数以访问名称而不是对象

function changeImage(imgName, name)
{
    image = document.getElementById(name);
    image.src = imgName;
}

然后添加到img onclick：

<img src="http://placehold.it/100x100" name="image1" id="image1" onclick="changeImageClick(1);"><br>

images1num是您当前所在的图像src。从0到2开始

然后，您必须修改单选按钮onclick以：

changeImage('http://placehold.it/200x200','image1'); images1num = 1;

以下是函数：

function changeImageClick(num)
{
    if(num == 1)
    {
        images1num = (images1num + 1) % images1.length;
        changeImage(images1[images1num],'image1');

        var input = document.getElementsByTagName('input');
        var nextInput = false;   

        for(var i = 0; i < input.length; i++)
        {
            if(input[i].checked == true && input[i].name == 'image1')
            {
                nextInput = true;

                 if(nextInput)
                {
                    input[(i+1)%images1.length].click();
                    nextInput = false;
                    break;
                }
            }
        }
    }
}

同样，这仅适用于您的100x100200x200300x300，但该概念适用于所有3个

以下是JSFIDLE：

---

复制其他两个滑块是一个很好的学习体验。

将类sliderImage添加到图像占位符中，然后使用以下代码：

$(".sliderImage").click(function(){

    var name = $(this).attr("name")
    var selector = "input[checked][name='" + name +"']"
    currrentRadio = $(selector)
    currrentRadio.removeAttr("checked")

    if (currrentRadio.next().attr("name") === name) {

        currrentRadio.next().attr('checked', 'checked').prop("checked",true).trigger("click")

    } else {

        var nextRadio = "input[name='" + name + "']"
        firstRadio = $(nextRadio)[0]
        $(firstRadio).attr('checked', 'checked').prop("checked",true).trigger("click")   

    }

})

*编辑*将changeImage更改为此，以允许单击对象不影响功能：

这是工作小提琴：

**新改良工作小提琴**

function changeImage(imgName, obj)
{
     image = document.getElementById(obj.name);
     image.src = imgName;
     var name = obj.name;
     var selector = "input[checked][name='" + name +"']";
     currrentRadio = $(selector);
     currrentRadio.removeAttr("checked");

     $(obj).attr('checked', 'checked').prop("checked",true).trigger("click");
}

---

始终在问题中张贴您的代码。当您发布一个没有代码的JSFIDLE链接并选择通过将非代码文本突出显示为代码来规避规则时，您看到了警告。我必须承认我没有首先得到它：-/我以后会处理它！你的密码？你想和这个家伙谈谈2008年偷的东西对不起，对不起，我用了同样的方法。我很久以前写过这篇文章，如果它碰巧是那样的话，那就是我的错，但我相信所有这些都是我亲手写的。document.getElementByIdradio2.checked=false；不需要，因为如果执行document.getElementByIdradio1.click；由于它是一个单选按钮组，它将负责禁用其他组。@Simply Craig。至少你的概念会很清楚…谢谢你。对，除了他给它们起了相同的名字，所以你删除了名称分组来添加更多的代码？似乎不合逻辑。重新添加name=image1，不要添加太多无用的代码。您的代码没有完全实现他想要的，需要修改，因此如果我单击单选按钮3，然后单击图像，它将转到图像1和单选按钮1，目前，如果我点击图片，然后点击第一个单选按钮，然后再次点击图片，它会转到第三个图片和单选按钮，而不是第二个img和按钮。非常感谢！对我来说，更新版本似乎是最好的方式，因为将来添加新图像时不需要javascript编辑。另外，我得到了代码，学到了很多。再次感谢您的大力帮助！

changeImage('http://placehold.it/200x200','image1'); images1num = 1;

function changeImageClick(num)
{
    if(num == 1)
    {
        images1num = (images1num + 1) % images1.length;
        changeImage(images1[images1num],'image1');

        var input = document.getElementsByTagName('input');
        var nextInput = false;   

        for(var i = 0; i < input.length; i++)
        {
            if(input[i].checked == true && input[i].name == 'image1')
            {
                nextInput = true;

                 if(nextInput)
                {
                    input[(i+1)%images1.length].click();
                    nextInput = false;
                    break;
                }
            }
        }
    }
}

$(".sliderImage").click(function(){

    var name = $(this).attr("name")
    var selector = "input[checked][name='" + name +"']"
    currrentRadio = $(selector)
    currrentRadio.removeAttr("checked")

    if (currrentRadio.next().attr("name") === name) {

        currrentRadio.next().attr('checked', 'checked').prop("checked",true).trigger("click")

    } else {

        var nextRadio = "input[name='" + name + "']"
        firstRadio = $(nextRadio)[0]
        $(firstRadio).attr('checked', 'checked').prop("checked",true).trigger("click")   

    }

})

function changeImage(imgName, obj)
{
     image = document.getElementById(obj.name);
     image.src = imgName;
     var name = obj.name;
     var selector = "input[checked][name='" + name +"']";
     currrentRadio = $(selector);
     currrentRadio.removeAttr("checked");

     $(obj).attr('checked', 'checked').prop("checked",true).trigger("click");
}