Question

我正在尝试创建一个div，该div的视口左边的宽度为50％，右边的宽度为50％。我希望每个div都可以点击更改上一个/下一个幻灯片图像

示例：https://jonoverrall.com/colin/owzib05x14nq1xd08etgqoe7nmmvum

有人对如何实现这一目标有任何建议吗？

<div class="slideshow-container">

<div class="mySlides fade">

    <img src="001%20(1).jpg" onclick="plusSlides(1)">
    <div class="text">As a Fountain 2017</div>
    <div class="opacity">001 </div>
</div>

<div class="mySlides fade">

    <img src="001%20(2).jpg" onclick="plusSlides(1)">
    <div class="text">Deliverance 2017</div>
    <div class="opacity">002 </div>
</div>

CSS

img {
  height: 100%;
  width: 100%;
  max-height: 100vh;
  max-width: 100vh;
  object-fit: contain;
}


.mySlides img {
   display: inline-block;
   vertical-align: middle;
 }

.slideshow-container img {
    display: block;
    margin: 0px auto;
}

JS

var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;

showSlides(slideIndex);


function plusSlides(n) {
   showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
   var i;
if (n > slides.length) {
   slideIndex = 1
}
if (n < 1) {
  slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
}
    slides[slideIndex - 1].style.display = "block";
}

https://codepen.io/anon/pen/xobQRM

Answer 1

您可以看到用以下代码单击的那一侧：

function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    //    var coor = "X coords: " + x + ", Y coords: " + y;
    //    document.getElementById("demo").innerHTML = coor;
    var ele = document.getElementById("tt");
    var width = ele.offsetWidth;
    var height = ele.offsetHeight;
    var half=(width/2);
    if(x>half)
    {
        alert('right click');

    }
    else
   {
       alert('left click');

    }


}

如何创建divs来实现幻灯片图像在单击时向左/向右更改？

1 个答案: