Question

我制作了一个基于Radio Buttons的Image-Slider（感谢用户A.V的一些建议），你可以在这里看到：

现在，我还有最后一件事情，但我不知道如何做。我希望能够通过点击图像本身切换到下一个图像（当然选择跳转到下一个按钮）。

如果有人可以提供帮助，那会很棒。提前谢谢！

JSFiddle

http://jsfiddle.net/v4phdL3p/8/

Answer 1

你有没有想过一个简单的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>

这将对图片进行简单的幻灯片放映，您可以更改它以允许它在点击时更改，而不是在间隔上。

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

Answer 2

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

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

Answer 3

首先更改您的功能以访问名称而不是对象

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

这仅适用于您的100x100,200x200,300x300，但这个概念适用于所有3个。

这是JSFiddle：http://jsfiddle.net/v4phdL3p/44/

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

Answer 4

添加class＆＃34; sliderImage＆＃34;到您的图像占位符然后使用此代码：

$(".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/ **新修改的工作小提琴**

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

单选按钮和图像滑块

4 个答案: