单选按钮和图像滑块

将类"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更改为此（允许点击对象不影响功能）：

这是工作小提琴：

http://jsfiddle.net/xhmrwhtv/3/**新修改的工作Fiddle**

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

您是否对简单的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:

<div style="width: 100%; position: absolute; margin-top:5%;">
        <div id="slideshow" style="display: inline-block; position:relative;">
            <img src="pictures/coinWars/1.jpg" class="active" />
            <img src="pictures/coinWars/2.jpg"  />
            <img src="pictures/coinWars/3.jpg" />
            <img src="pictures/coinWars/4.jpg"  />
            <img src="pictures/coinWars/5.jpg"  />
            <img src="pictures/coinWars/6.jpg"  />
            <img src="pictures/coinWars/7.jpg"  />
            <img src="pictures/coinWars/8.jpg"  />
            <img src="pictures/coinWars/9.jpg"  />
            <img src="pictures/coinWars/10.jpg"  />
        </div>

这将制作一个简单的图片幻灯片，您可以更改它以允许它在单击时更改，而不是在间隔时更改。

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

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

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>

然后我添加了变量（仅针对第一组更改：

var images1 = ["http://placehold.it/100x100","http://placehold.it/200x200","http://placehold.it/300x300"];
var images1num = 0;

images1num表示当前使用的图像src。从0到2开始。

然后你必须修改单选按钮点击：

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个。

以下是JSFiddle：http://jsfiddle.net/v4phdL3p/44/

复制另外两个滑块是一种很好的学习体验。

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

正在使用Fiddle。。。。

<img id = "img" src = "http://www.menucool.com/slider/prod/image-slider-1.jpg" width = 200; onclick = "changeImage()">
<br>
    <input type="radio" name = "rdo" id = "radio1" onclick = "changeSlide(this)" checked />
    <input type="radio" name = "rdo" id = "radio2" onclick = "changeSlide(this)"/>
    <input type="radio" name = "rdo" id = "radio3" onclick = "changeSlide(this)"/>

JavaScript:

    function changeImage(){
    if(document.getElementById("img").src == "http://www.menucool.com/slider/prod/image-slider-1.jpg" ){
        document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-3.jpg";        
        document.getElementById("radio2").checked = true;
    }
    else if(document.getElementById("img").src == "http://www.menucool.com/slider/prod/image-slider-3.jpg"){
        document.getElementById("img").src ="http://www.userinterfaceicons.com/80x80/minimize.png";        
        document.getElementById("radio3").checked = true;
    }
    else if(document.getElementById("img").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
        document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-1.jpg";
        document.getElementById("radio1").checked = true;
    }
}
function changeSlide(id){
    if(document.getElementById("radio1")==id){           
        document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-1.jpg";
    }    
   else if(document.getElementById("radio2")==id){    
        document.getElementById("img").src = "http://www.menucool.com/slider/prod/image-slider-3.jpg";
    }    
    else if(document.getElementById("radio3")==id){        
        document.getElementById("img").src ="http://www.userinterfaceicons.com/80x80/minimize.png";
    }
}