javascript - 一个页面上的三个 javascript 函数 - 功能失调

Question

我的第一篇文章在这里，让我们开始吧。我有一个单页网站，每个 div 上有三个图像 slider 。一个 Div 一个接一个:

<script type="text/javascript">
var imagecount = 1;
var total = 3;
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if(imagecount > total){ imagecount = 1;}
if(imagecount < 1){ imagecount = total;}
Image.src = "img/Slide1/img"+ imagecount +".jpg"; }
</script>

<script type="text/javascript">
var imagecount = 1;
var total = 3;
function slide(x) {
var Image = document.getElementById('img2');
imagecount = imagecount + x;
if(imagecount > total){ imagecount = 1;}
if(imagecount < 1){ imagecount = total;}
Image.src = "img/Slide2/comd"+ imagecount +".jpg"; }
</script>

因为我也添加了另一个代码，所以第一个上的导航按钮对第一个 DIV 不起作用，但对第二个 DIV 起作用。

HTML:

<div id="main-content">

<div id="container">
    <img src="img/slide1/img1.jpg" id="img">
    <div id="left_holder"> <img onclick="slide(-1)" class="left" src="img/Slide1/leftandright/leftred_up.png" onmouseover="this.src='img/Slide1/leftandright/leftred_over.png'" onmouseout="this.src='img/Slide1/leftandright/leftred_up.png'"> </div>
    <div id="right_holder"> <img onclick="slide(1)" class="right" src="img/Slide1/leftandright/rightred_up.png" onmouseover="this.src='img/Slide1/leftandright/rightred_over.png'" onmouseout="this.src='img/Slide1/leftandright/rightred_up.png'"> </div>
</div>

第二个 JS 函数的 HTML:

<div id="main-content2">

<div id="container">
    <img src="img/slide2/comd1.jpg" id="img2">
    <div id="left_holder"> <img  onclick="slide2(-1)" class="left" src="img/Slide2/leftandright/leftorn_up.png" onmouseover="this.src='img/Slide2/leftandright/leftorn_over.png'" onmouseout="this.src='img/Slide2/leftandright/leftorn_up.png'"> </div>
    <div id="right_holder"> <img onclick="slide2(1)" class="right" src="img/Slide2/leftandright/rightorn_up.png" onmouseover="this.src='img/Slide2/leftandright/rightorn_over.png'" onmouseout="this.src='img/Slide2/leftandright/rightorn_up.png'"> </div>
</div>

我会快速回复所有回复，所以如果您有任何问题，请尽管提出!

请温柔点

Answer 1

function slideShow(element,count) {
    var imagecount = parseInt( element.parentNode.parentNode.getAttribute("data-current"), 10);
    var total = parseInt( element.parentNode.parentNode.getAttribute("data-count"), 10);
        var Image = element.parentNode.parentNode.getElementsByTagName("img");
        imagecount = imagecount + count;
        element.parentNode.parentNode.setAttribute("data-current",imagecount);
        if(imagecount > total){ 
           imagecount = 1;
           element.parentNode.parentNode.setAttribute("data-current",imagecount);
        }else if(imagecount < 1){ 
           imagecount = total;
           element.parentNode.parentNode.setAttribute("data-current",imagecount);
        }

        Image.src = "img/Slide1/img"+ imagecount +".jpg"; 
}

现在你的 html

<div id="slide_show_1" data-count="3" data-current="1">
    <img src="img/slide1/img1.jpg" id="img">
    <div id="left_holder"> 
        <img onclick="new slideShow(this,1)" class="left" src="img/Slide1/leftandright/leftred_up.png" onmouseover="this.src='img/Slide1/leftandright/leftred_over.png'" onmouseout="this.src='img/Slide1/leftandright/leftred_up.png'"> 
    </div>
    <div id="right_holder"> 
        <img onclick="new slideShow(this,1)" class="right" src="img/Slide1/leftandright/rightred_up.png" onmouseover="this.src='img/Slide1/leftandright/rightred_over.png'" onmouseout="this.src='img/Slide1/leftandright/rightred_up.png'"> 
    </div>
</div>

演示 http://jsbin.com/bejozuquqo/1/edit