Question

我点击图像时尝试制作图像滑块 '上一步'和'下一步'按钮我想制作幻灯片！从当前的形象这个jquery代码是图像点击的全屏图像查看功能。

单击按钮时请帮助滑动功能。

$('.media').ready(function() {
  $('.media_img').click(function() {
    var numImage = $('#image_slider').children().length;
    var total = numImage;
    var src = $(this).attr('src');

    window.alert(numImage);

    $('.media_full').fadeIn(500);
    $('.img_view img').attr('src', src);

    $('.prev').click(function() {
      window.alert('go to prev');

    });

    $('.next').click(function() {
      window.alert('go to next');
    });

  });
  $('.view_close').click(function(){
    $('.media_full').fadeOut(500);
  });
});

.media { position: relative; width: 100%; height: 150px; }
.media ul { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; }
.media ul li { height: 100%; display: inline-block; list-style: none; }
.media ul li img { width: auto; height: 100%; cursor: pointer; }
.media_full { z-index: 10; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.prev { position: absolute; top: 0; left: 0; width: 100px; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 2em; font-weight: bold; }
.next { position: absolute; top: 0; right: 0; width: 100px; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 2em; font-weight: bold; }
.view_close { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: 200px; height: 50px; font-size: 2em; color: #FFFFFF; background-color: rgba(0,0,0,0.8); border-radius: 30px; }
.img_view { position: fixed; top: 0; right: 0; bottom: 0; left:0; width: auto; height: 100%; }
.img_view img { display: block; margin: 0px auto; height: 100%; }
.prev { position: absolute; left: 0; } .next { position: absolute; right: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="media">
  <ul id="image_slider">
    <li><img class="media_img" src="sp1.jpg" alt="" /></li>
    <li><img class="media_img" src="sp3.jpg" alt="" /></li>
    <li><img class="media_img" src="sp2.jpg" alt="" /></li>
    <li><img class="media_img" src="sp4.jpg" alt="" /></li>
    <li><img class="media_img" src="sp_gif.gif" alt="" /></li>
  </ul>
  <div class="media_full">
    <div class="img_view">
      <img id="img" src="" alt="" />
    </div>
    <button class="prev" id="prev" type="button">◀</button>
    <button class="next" id="next" type="button">▶</button>
    <button class="view_close" type="button">close view</button>
  </div>
</div>

Answer 1

单击下一个/上一个按钮时，我们可以找到并单击下一个/上一个图像。这将触发为单击图像而编写的逻辑。请参阅以下代码

$('.prev').off('click').click(function () {
    if ($(currImg).closest('li').prev().find('.media_img').length) {
        $(currImg).closest('li').prev().find('.media_img').trigger('click');
    }
    else{
        $('.media_img:last').trigger('click');
    }
});

$('.next').off('click').click(function () {
   if ($(currImg).closest('li').next().find('.media_img').length) {
       $(currImg).closest('li').next().find('.media_img').trigger('click');
   }
   else{
       $('.media_img:first').trigger('click');
   }
});

参见JSFiddle here

完整尺寸的图像点击＆amp;滑块

1 个答案: