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

Question

我的第一个 post 在这里，让我们开始吧。我有一个单页网站，每个网站上有三个图像滑块 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 但第二个。

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>

HTML第二个JS函数：

<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

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

个人建议，创建一个class或者一个对象。目前你正在多次写同样的东西。创建一个这样的对象称为面向对象编程。如果您想了解更多相关信息，这里有一个很好的介绍： Introduction to Object-Oriented JavaScript

Answer 2

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

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

Three javascript functions on one single page - disfunctional

html

javascript

css

function

slide