如何在HTML中制作相同的滑块

我已经制作了一个带有图片缩略图的滑块，我想在页面中使用另一个滑块，但是当我在html中只使用相同的代码时，只有第一个工作正常。这是我想要做什么this is my page image 如何在HTML中制作相同的滑块

<script> 

    function changeImage(event) { 
    event = event || window.event; 

    var targetElement = event.target || event.srcelement; 

    if (targetElement.tagName == "IMG") { 
    document.getElementById("mainImage").src = targetElement.getAttribute("src"); 
    } 
} 

</script>

HTML

<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" id="mainImage"></img/> 
<br /> 

<div id="imgstyle" onclick="changeImage(event)"> 
    <image class="imgstyle" src="images/g1.jpg" /> 
    <image class="imgstyle" src="images/g2.jpg" /> 
    <image class="imgstyle" src="images/g3.jpg" /> 
    <image class="imgstyle" src="images/g4.jpg" /> 
    <image class="imgstyle" src="images/g5.jpg" /> 
</div> 
<br /> 


<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" id="mainImage"></img/> 
<br /> 

<div id="imgstyle" onclick="changeImage(event)"> 
    <image class="imgstyle" src="images/g1.jpg" /> 
    <image class="imgstyle" src="images/g2.jpg" /> 
    <image class="imgstyle" src="images/g3.jpg" /> 
    <image class="imgstyle" src="images/g4.jpg" /> 
    <image class="imgstyle" src="images/g5.jpg" /> 
</div> 

    <br><br>

CSS

* { 
    box-sizing: border-box; 
} 
.imgstyle { 
    display: block; 
    float: left; 
    width: 100px; 
} 

.imgstyle + .imgstyle { 
    border-left: 1px solid; 
}

来源

2017-10-08 minn

我试过的代码中，滑块不起作用。你可以请分享最小的工作代码！使用[JSFIddle]（https://jsfiddle.net/r8Ltu7az/） –

如果您是通过ID获取元素，这将返回第一个匹配的document.getElementById（ “mainImage”）; 这就是为什么它正在为第一次一个仅而是使用

<div id="imgstyle" onclick="changeImage(event, 0)"> 
<div id="imgstyle" onclick="changeImage(event, 1)"> //for second one

的js

function changeImage(event, a) { 
    event = event || window.event; 
    var targetElement = event.target || event.srcelement; 
    if (targetElement.tagName == "IMG") { 
    document.getElementsByClassName("mainImage")[a].src = targetElement.getAttribute("src"); 
    } 
    }

此外，我想主要IMG的改变上课

<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" class="mainImage"></img/>

来源

2017-10-08 08:21:27

如何在HTML中制作相同的滑块

回答

相关问题