Question

我正在尝试构建一个库模式滑块。到目前为止，我可以使用目标src打开正确显示图像的模态。如何使用相同的src属性更改单击或下一个或上一个btn上的模态图像？

HTML：

#include <assert.h>
#include <limits.h>
#include <math.h>
#include <stdbool.h>
#include <stddef.h>
#include <stdint.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

char* readline();
char* longestWord();

int main(){
  FILE* fptr = fopen(getenv("OUTPUT_PATH"), "w");
  char* sentence = readline();
  char* res = longestWord(sentence);
  fprintf(fptr, "%s\n", res);
  fclose(fptr);
  return 0;
}

char* readline() {
  size_t alloc_length = 1024;
  size_t data_length = 0;
  char* data = malloc(alloc_length);
  while (true) {
    char* cursor = data + data_length;
    char* line = fgets(cursor, alloc_length - data_length, stdin);
    if (!line){ 
         break; 
    }
    data_length += strlen(cursor);
    if (data_length < alloc_length - 1 || data[data_length - 1] == '\n'){ 
         break; 
    }
    size_t new_length = alloc_length << 1;
    data = realloc(data, new_length);
    if (!data) { break; }
    alloc_length = new_length;
  }
  if (data[data_length - 1] == '\n') {
    data[data_length - 1] = '\0';
  }
  data = realloc(data, data_length);
  return data;
}


char* longestWord(char* sentence) {
 char res[134] = "00";
 char word[134];
 char s[134];
 strcpy(s, sentence);
 memset(word,0,strlen(word));
 int l, c = 0, max = -1;
 l = strlen(s);
 for(int i = 0 ; i < l ; i++){
    if(s[i] != ' '){
        word[c]= s[i] ;
        c++;
    }else{
          if(c > max) {
             word[c+1]='\0';
             max = c;
             strcpy(res, word);
         }
        c = 0;
        memset(word,0,strlen(word));
    }
 }
 if(c > max) {
      max = c;
      strcpy(res, word);
 }
 return res;
}

JS：

<div class="galleryModal">

            <div class="galleryModal__imgContainer">
                <span id="closeModal" class="closeBtn">&times</span>

                <img src="/dist/images/gal1.jpg" alt="modal main image" class="galleryModal__img current">

                <div class="galleryModal__controls">
                    <svg class="prevBtn modalBtn">
                        <use xlink:href="/dist/images/sprite.svg#icon-play3"></use>
                    </svg>
                    <svg class="nextBtn modalBtn">
                        <use xlink:href="/dist/images/sprite.svg#icon-play3"></use>
                    </svg>
                </div>
            </div>

        </div>

Answer 1

我所理解的是，您点击图像时需要图像网格，您需要在弹出窗口中显示该图像，然后单击下一个/上一个按钮，其他图像显示。

检查此工作代码段here。尝试使用这些示例代码段更改代码。你很容易实现。

希望这可能会有所帮助。

在滑块中使用img src原型来更改滑块图像

1 个答案: