Question

我有一个codepen链接https://codepen.io/robgolbeck/pen/bVGmop，它与我想要的非常相似。我唯一想要的是，点击拇指图像时，大图像应该被点击的拇指图像替换，它不应该出现在拇指列表中。总共只有5个图像应该存在旋转，而这里有6个（ 5+ 1拇指重复）。我试图调整JS，但它并没有像预期的那样工作。谁能请帮忙。从早上起就遇到了这个问题。提前谢谢。

JS

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
});

Answer 1

在#thumbs img的点击处理程序事件中，您可以先显示所有图像，然后隐藏当前图像。开始你可以触发点击第一张图片。

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs img').show();
  $(this).hide();
});
$('#thumbs img').first().trigger('click');

Answer 2

您只需使用jQuerys show()和hide()方法即可。首先显示#thumbs的所有子元素，然后使用$(this).hide();隐藏当前点击的元素。

要最初隐藏第一张图片，您可以使用$('#thumbs').children().first().hide();

$('#thumbs').children().first().hide();
$('#thumbs img').click(function() {
  $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs').children().show();
  $(this).hide();
});

#thumbs {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage {
  border: 1px solid gray;
  padding: 4px;
  background-color: white;
  cursor: pointer;
}

#thumbs img {
  float: left;
  margin-right: 6px;
}

#description {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 10px 20px;
  width: 525px;
  margin: 5px;
}

#panel {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
  </div>
  <div id="thumbs">
    <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_04_thumb.jpg" alt="4th image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_05_thumb.jpg" alt="5th image description" />
  </div>
</div>

Answer 3

我认为jQuery的 attr 方法会导致问题，请尝试使用 prop 方法，如下面的代码段所示：

$('#thumbs img').click(function(){
   $('#largeImage').prop('src',$(this).prop('src').replace('thumb','large'));;
    $('#description').html($(this).prop('alt'));
});

Answer 4

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button_main = (Button)findViewById(R.id.button_main);
        imageView_main = (ImageView)findViewById(R.id.imageView_main);

        GlideDrawableImageViewTarget imageViewMainTarget = new GlideDrawableImageViewTarget(imageView_main);
        Glide.with(MainActivity.this).load(R.raw.test).into(imageViewMainTarget);

        button_main.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ImageView gifImageView = new ImageView(MainActivity.this);
                GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(gifImageView);
                Glide.with(MainActivity.this).load(R.raw.test).into(imageViewTarget);

                AlertDialog.Builder share_dialog = new AlertDialog.Builder(MainActivity.this);
                share_dialog.setMessage("GIF Test");
                share_dialog.setPositiveButton("Done", null);
                share_dialog.setView(gifImageView);
                share_dialog.show();
            }
        });
    }

缩略图图像应与点击时的当前图像交换

4 个答案: