Question

我在这里的第一篇文章，所以让我们这样做。我有一个单页网站，每个div上有三个图像滑块。一个接一个的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，但第二个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>

DEMO http://jsbin.com/bejozuquqo/1/edit

Answer 2

直接的答案是，在JavaScript中，您有两个“幻灯片”功能，而其中一个应该像HTML一样命名为“slide2”。由于评论中提到的命名冲突，这可能仍然无法正常工作。

Peronal建议，创建一个类或一个对象。目前你正在多次写同样的事情。创建这个对象称为面向对象编程。如果您想了解更多相关信息，请参阅以下内容： Introduction to Object-Oriented JavaScript

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

2 个答案: