Question

我的代码有一个小问题。我确定有些东西丢失了，但我无法弄清楚。当我想转到上一张图片时，实际上是转到下一张图片，然后又回头...

我将与您共享代码，非常感谢。.花了一个小时的时间来查找问题，但是找不到问题...谢谢

    <!DOCTYPE html>
<html>
<head>
 <title>Practica</title>
 <meta charset="UTF-8">
 <script src="script.js"></script>
 <style>
  *{margin:0;padding:0;}
  html,body{
  width:100%;
  height:100%;
   }
    #mainImage{
    width:50%;
    display:table;
    margin:auto;
    height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
     }
    a{
      color:white;
     font-size:60px;
     text-decoration:none;
       }

    .next {
     position:absolute;
      top:500px;
      right:0px;
      }

    .back {
      position:absolute;
      top:500px;
      left:0px;}
    </style>
    </head>


   <body>
     <div id="mainImage" style="background:url(images/unu.jpg)">
     <a href="#" class="back" onclick="backImage()">&#10096;</a>
     <a href="#" class="next" onclick="nextImage()">&#10097;</a>

     </div>

     </body>


      </html>

JS

   var imageArray = ["background:url(images/unu.jpg)", 
    "background:url(images/doi.jpg)", "background:url(images/trei.jpg)", 
    "background:url(images/patru.jpg)", "background:url(images/cinci.jpg)"];
    var imageIndex = 1;

    function nextImage() {
     var myImage = document.getElementById("mainImage");
     myImage.setAttribute("style",imageArray[imageIndex]);  
     imageIndex++;
     if (imageIndex >= imageArray.length) {
       imageIndex = 0;
       }

     }

    function backImage(){
      var myImage = document.getElementById("mainImage");
      myImage.setAttribute("style",imageArray[imageIndex]); 
      imageIndex--;
      if (imageIndex < 0){
      imageIndex = imageArray.length;
       }
    }

Answer 1

在从索引设置图像之前增加/减少索引：

function nextImage() {
  imageIndex++;
  var myImage = document.getElementById("mainImage");
  myImage.setAttribute("style",imageArray[imageIndex]);

对backImage执行相同操作。

Answer 2

此功能存在逻辑问题

ActivityA implements SingleItemEventListener {
@Override
    public void onSingleItemClicked(int position) {
Data data = getData(position);

if (data != null) {
Bundle bundle = new Bundle();
bundle.putParcelable("single_data_key", data);
Fragment fragmentB = fragmentManager.findFragmentByTag(FragmentB.class.getName());

        if (fragmentB == null && bundle != null) {
            fragmentB = Fragment.instantiate(this, FragmentB.class.getName(), bundle);
        }

        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction
                .replace(R.id.FragmentLayout, fragmentB, FragmentB.class.getName())
                .addToBackStack(FragmentB.class.getName())
                .commit();
}
}
}

首先说您处于第0张图片，即imageIndex = 1，然后单击下一步

功能nextImage（）将设置第一个图像，而imageIndex现在将变为2，如下所示：

function backImage(){
      var myImage = document.getElementById("mainImage");
      myImage.setAttribute("style",imageArray[imageIndex]); 
      imageIndex--;
      if (imageIndex < 0){
      imageIndex = imageArray.length;
       }
    }

因此您的代码必须是

function backImage(){
          //imageIndex is 2 now
          var myImage = document.getElementById("mainImage");
          myImage.setAttribute("style",imageArray[imageIndex]); //load 3rd image i.e 2nd indexed image  //it should be 1st ideally
          imageIndex--; //decrease imageIndex to 1
          if (imageIndex < 0){
          imageIndex = imageArray.length;
           }
        }

具有下一个和后一个问题的JavaScript轮播功能

2 个答案: