Question

除了html / css以外，对Javascript /都不熟悉。这可能是一个愚蠢的问题：我有一个显示幻灯片的模态框，并且对其进行了设置，以便您可以通过单击图像或单击箭头键来滚动浏览幻灯片。我希望移动用户也可以在其中滑动，但是我不确定是否可以使用现有的javascript代码来执行此操作，或者不确定是否需要在其他地方使用。

谢谢！对不起，如果我的代码很奇怪！

周杰伦

/*MODAL BOX, BUTTONS, SCROLLBAR*/
/*Modal background*/
.modal
{display:none;
position:fixed;
z-index:1;
padding-top:0px;
left:0;
top:0;
width:100%;
height:100%;
background:white;
text-align: center;
margin:auto;}

/*Modal content*/
.modal-content
{
background-color:white;
margin:auto;
padding:0;  
text-align:center;    
display:inline-block;}

.mySlides
{display:none;
text-align: center;
margin:auto;}

/*Clicked-on images in modal box. */
.clicked-on 
{max-height:90vh;
max-width:98vw;
padding-top:45px;
text-align: center;
margin:auto;    
}

img
{height:200px;}

<!DOCTYPE html>
<!--Mobile scaling HTML, CSS link, favicon, icons link, webpage title-->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
			
<div class="info">
    <a href="home.html"><i class="fa fa-home" aria-hidden="true"></i></a>
 
</div>   

<!--Modal Box Javascript-->
<script>
    function openModal()
    {document.getElementById('myModal').style.display = "block";}
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    function currentSlide(n)
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++){slides[i].style.display = "none";}
    for (i = 0; i < dots.length; i++){dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
    }
</script>

<!--Keyboard navigation for previous slide, next slide, and close modal-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}       
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39){document.querySelector('.next').click();}};
</script>





<body>
<!--Images on webpage-->
<center>
<div class="painting">
    <img src="https://photos.gograph.com/thumbs/CSP/CSP990/cartoon-red-apple-vector-stock_k10352362.jpg" class="oil-images" onclick="openModal();currentSlide(1)">
    <img src="https://i.pinimg.com/originals/48/99/21/4899210a1b8818d3607e2243fc047b19.png" class="oil-images" onclick="openModal();currentSlide(2)">

<img src="https://clipartix.com/wp-content/uploads/2018/03/orange-clipart-2018-37.png">
 
</div>    
</center> 
<!-- Modal box content-->
<div id="myModal" class="modal">
    
    <!-- Previous slide, next slide, close buttons-->   
    <div class="info">
    <a class="prev" onclick="plusSlides(-1)"><i class="fa fa-caret-left" aria-hidden="true"></i></a>
    <a class="close" onclick="closeModal()"><i class="fa fa-th" aria-hidden="true"></i></a>
    <a class="next" onclick="plusSlides(1)"><i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>     
    
<!--Slide-specific content-->
<div class="modal-content">
   
    <div class="mySlides">
	<img src="https://photos.gograph.com/thumbs/CSP/CSP990/cartoon-red-apple-vector-stock_k10352362.jpg" class="clicked-on" onclick="plusSlides(1)">
	<br><span class="art-details">Apple</span>
    </div>
    
 	<div class="mySlides">
	<img src="https://i.pinimg.com/originals/48/99/21/4899210a1b8818d3607e2243fc047b19.png" class="clicked-on" onclick="plusSlides(1)">
    <br><span class="art-details">Grape</span>    
    </div>    

    
	<div class="mySlides">
	<img src="https://clipartix.com/wp-content/uploads/2018/03/orange-clipart-2018-37.png" class="clicked-on" onclick="plusSlides(1)">
    <br><span class="art-details">Orange</span>    
    </div>   

</div>
</div>  
    	
</body>	
</html>

您可以将滑动添加到Javascript“ onclick”操作中吗？

0 个答案: