Question

我做了滑块。重新加载页面时，将显示第一张照片。当我单击“下一步”时，它什么也不显示。我应该单击“上一个”，然后再次单击“下一个”。完成该操作后，将显示照片。

我试图制作单独的功能，使用单独的Image对象，但是没有任何效果。

<div class="container main" style=" padding:40px;">
    <div id="slide" class="container-fluid slide" style="max-height:481px;height:480px; padding: 0;display:     flex;">
            <div class="switch left" onclick="change('prev');" style="">    
                    <div class="pont" style="border-radius: 10px ;width:    100px;height:   100px;margin:auto; margin-top:  190px; transform: rotate(45deg);border-left: 10px solid #fff;border-bottom: 10px solid #fff;"    >  

                    </div>
            </div>
            <div class="img-block" style="z-index: 1">  
                    <div class="img">   
                            <img id="imag" src="img/1.jpg" alt="">
                            <script>    
        var imag    = document.getElementById('imag');
        var wid = imag.width;
        var het = imag.height;
        var cof = wid/het;
        document.getElementById('imag').height = "478";
        document.getElementById('imag').width   = 478*cof;
</script>
                    </div>
                    <div class="des">   
                            <p id="description">    

                            </p>
                    </div>
            </div>

            <div style="margin-right: 0;"    onclick="change('next');"   class="switch right">  
                    <div class="pont" style="border-radius: 10px ;width:    100px;height:   100px;margin:auto; margin-top:  190px; transform: rotate(225deg);border-left: 10px solid #fff;border-bottom: 10px solid #fff;"   >  

                    </div>
            </div>
    </div>
</div>
<script>    
    var pointer = 1;
function    change(where_to_move)
{
    var img = new Image();
    if (where_to_move == "next") {
        if(pointer == 7)
        {
            pointer = 1;
        }
        else
        {
            pointer++;
        }
    }
    else
    {
        if(pointer==1)
        {
            pointer = 7;
        }
        else
        {
            pointer--;
        }
    }
    img.src = "img/"+pointer+".jpg";
    var cofc = img.width / img.height;
    img.height = "478";
    img.width = 479*cofc;
    document.getElementById('imag').src= img.src;
    document.getElementById('imag').height = img.height;
    document.getElementById('imag').width = img.width;
}
</script>

我希望它以适当的方式工作

Answer 1

因为您问对了，这就是我的想象；）
CSS

.Slide_2 {
  max-height:481px;
  height: 480px; 
  padding: 0;
  display: flex;
}

.Pont_2 {
  border-radius: 10px ;
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 190px;
  border-left: 10px solid #fff;
  border-bottom: 10px solid #fff;
}

HTML正文

<div class="container main" style=" padding:40px;">
  <div id="slide" class="container-fluid slide Slide_2">
    <div class="switch left" onclick="change(-1);" >
      <div class="pont Pont_2" style="transform: rotate(45deg);"></div>
    </div>
    <div class="img-block" style="z-index: 1">
      <div class="img">
        <img id="imag" src="ZIM/concept_A.jpg" alt="">

      </div>
      <div class="des">
        <p id="description"> </p>
      </div>
    </div>

    <div style="margin-right: 0;" onclick="change(+1);" class="switch right">
      <div class="pont Pont_2" style="transform: rotate(225deg);">
      </div>
    </div>
  </div>
</div>

JS部分

const
  imag = document.getElementById('imag'),
  ImgTab = Array.from([1,2,3,4,5,6,7]).map(r=>{
    let
      IMG = new Image(),
      SRC = `img/${r}.jpg`;
      IMG.src = SRC;                      // loading image in memory
      return {'src':SRC, 'img': IMG};     // keep it in memory
    }),
  NbMax = ImgTab.length;

imag.style.height = "478px";

var pointer = 0;

function change(MovVal) {
  pointer = (pointer + MovVal + NbMax) % NbMax;
  imag.src = ImgTab[pointer].src;
}

滑块上的照片不会在第一时间加载

1 个答案: