Question

我是初学者，并在此处阅读了很多与此相关的其他问题，但无法将它们应用于我的代码。我想要我的下一个按钮点击我的灯箱照片库中的下一个图像。我认为步骤应该如下所示：但是无法获得正确的代码来执行此操作/或更改其他人的代码以便为我工作。如果有人有时间向我解释这一点，我将不胜感激。

         $($buttonNext).click(function(){
            $image.next().find("img") = $nextImage;
            $image.remove();
            $nextImage.show();
                    });


    <!doctype html>
    <html lang ="en"> 

    <head>
        <meta charset ="utf-8">
           <title>Photo Gallery</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
                   <link rel="stylesheet" href="normalize.css">
                       <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
                           <link rel="stylesheet" href="base.css">
                               <link rel="stylesheet" href="nav.css">
    </head>

        <body>
            <header id="search-bar">
                <input type="text" name="search" placeholder="Search" value="search">
            </header>

                <div id="photo-container">
                    <ul id="imageGallery">
                        <li><a href="Photos/01.jpg"><img src="Photos/01.jpg" alt="photo of a dry hill" class="photo"></a></li>

                        <li><a href="Photos/02.jpg"><img src="Photos/02.jpg" alt="photo of a blue lake" class="photo"></a></li>

                        <li><a href="Photos/03.jpg"><img src="Photos/03.jpg" alt="photo of a shrub hill" class="photo"></a></li>

                        <li><a href="Photos/04.jpg"><img src="Photos/04.jpg" alt="photo of a snowcapped hill" class="photo"></a></li>

                        <li><a href="Photos/05.jpg"><img src="Photos/05.jpg" alt="photo of rocky red earth" class="photo"></a></li>

                        <li><a href="Photos/06.jpg"><img src="Photos/06.jpg" alt="photo of dry grassland area" class="photo"></a></li>

                        <li><a href="Photos/07.jpg"><img src="Photos/07.jpg" alt="photo of a green valley" class="photo"></a></li>

                        <li><a href="Photos/08.jpg"><img src="Photos/08.jpg" alt="photo of sandunes" class="photo"></a></li>

                         <li><a href="Photos/09.jpg"><img src="Photos/09.jpg" alt="photo of path with overlapping greenery" class="photo"></a></li>

                        <li><a href="Photos/10.jpg"><img src="Photos/10.jpg" alt="photo of an ocean at dusk" class="photo"></a></li>

                        <li><a href="Photos/11.jpg"><img src="Photos/11.jpg" alt="photo of a landscape through a gap in trees" class="photo"></a></li>

                         <li><a href="Photos/12.jpg"><img src="Photos/12.jpg" alt="photo of a lavendar field" class="photo"></a></li>
                    </ul>
                </div><!--closing photo-container-->

                    <div class = "arrows">
                        <div class = "previous">
                            Previous
                        </div><!--previous-->

                            <div class = "next">
                                Next
                            </div><!--closing next-->
                </div><!--closing arows div-->

            <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
                <script src="lightbox.js"></script>
        </body>
    </html>
        JQuery Code


        var $overlay = $('<div id="overlay"></div>');
        var $image = $("<img>");
        var $caption = $("<p></p>");
        //button attemp
        var $buttonNext = $("<button> > </button>");
        var $buttonPrevious = $("<button> < </button>");


        //an image
        $overlay.append($image);

        //a caption to overlay
        $overlay.append($caption);

        //attemting to add buttons.  This worked now need to get them to scroll fowards and back.

        $overlay.append($buttonPrevious);
        $overlay.append($buttonNext);


        // add an overlay
        $("body").append($overlay);

        // capture the click event on a link to an image

        $("#imageGallery a").click(function(event) {
          event.preventDefault();
         var imageLocation = $(this).attr("href");
          console.log(imageLocation);

        //update the overlay with the image linked in the link
          $image.attr("src", imageLocation);

        // Show the overlay
          $overlay.show();
            $image.show();


        //Get child alt attribute and set caption

         var captionText = $(this).children("img").attr("alt");
          $caption.text(captionText);

        } );

        //When overlay is clicked

        $overlay.click(function() {
         $overlay.hide();
        $image.hide();
        });

感谢您的时间。

css



* {

    font-family: 'Lato', sans-serif;
}

* {

    box-sizing: border-box;
}



/* mini header and navigation styles*/ 

.mini-header {
    background-color: #4484cE;
    height: 3.5em;
    margin: 0;
    padding: 1px;
    color: white;
     border-bottom: 2px solid #ccc;

}

.mini-header h3 {
    text-align: left;  
    margin-left: .3em;
} 

.mini-header h3 a {
    text-decoration: none;
    color: white;
}

.mini-header h3 a:hover {
    color: #D9D9D9;
}


 .mini-header{
        position:relative;
    } 

 #tomatis-logo1, #facebook-logo1{
    display:inline-block;
    position:absolute;
    top: 8px;
    width: 2.5em; 
    height: 2.5em;
    border: 2.5px solid  #ffa31a;
    border-radius: 6px;

}

    #tomatis-logo1 {
        right: 25%;
    }

    #facebook-logo1 {
        right: 5%;
    }
/* main header and navigation styles*/ 

.main-header {
    background-color: white;
    height: 10em;
    margin-top: -1.25em; 
    border-bottom: 2px solid #ccc;
}

.main-header h1, h2, h4 {
    text-align: center;
}

.main-header h1 {
    padding-top: .5em;
    text-shadow: 1px 1px #ccc;
}

.main-header h2, h4 {
    color: #ffa31a;
    text-shadow: 1px 1px darkgrey;

}

.main-header h2 { 
    margin-top: -.5em;
}

.main-header h4 { 
    margin-top: -1em;
}


.nav {
    display: flex;
}

.nav {
    flex-direction: row;
    justify-content: space-between;
    max-width: 500px;
   list-style-type: none;    
}

.nav li a {

    text-decoration: none;
    color: black;
    justify-content: center;
    margin-left: -1.5em;
    margin-right: .5em;
    font-size: .8em;  
}

.nav li a:hover { 
    color: #D9D9D9;
}


/* colour styles*/ 

body {
    background-color: #D9D9D9;
}


/* main content styles*/ 

#large-cover-image {
    display: none;
}

#content-paragraph{
    display: none;
    font-style: italic;
    width: 20em;
    height: 20em;
}


#mobile-cover-image {

display: block;
margin:auto;
margin-top: 2em;
margin-bottom: .5em;
height: 40vh;
width: 70vw;
border: 4px solid #ccc;
border-radius: 6px;

}

/* card content styles*/ 

.card {

  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;

}

#pam-image {
  border: 2px solid #ccc;
  border-radius: 6px; 
}

.main-content {
    position: relative;
    padding-bottom: 30px;
}

footer {
    background-color: #4484cE;
    font-style: italic;
    color: white;
    text-align: center;
    position: fixed;
    bottom:0;
    width:100%;
    height:30px; 
}

    footer p {
    margin-top: -10px;
    margin-bottom: 0;
}



    #menu .selected {
        width: 100%
        height: 20px;
    }


#willImage{

    height: 70%;
    width: 60%;
}

Answer 1

希望这是你想要的，我只实现了三个图像的功能。根据需要进行更改，并参考下面的演示。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div#myimages{
	width: 400px;
	height: 400px;
	overflow: hidden;

}

div#myimages img{
	width: 100%;
	height: 100%;
}


</style>


<body>
<input type="button" name="" value="previous" id="pre">
<input type="button" name="" value="next" id="nxt">
	<div id="myimages">
	 <img src="https://s.graphiq.com/sites/default/files/stories/t4/25_Longest-Living_Dogs_2867_2024.jpg" id="id0">
	 <img src="http://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg" id="id1">
	 <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" id="id2">
	</div>

<script type="text/javascript">

var idvalue = 0;
$("#pre, #nxt").click(function(){


	var the_clicked_id = $(this).attr('id');
	if (the_clicked_id == "pre") 
	{
		if(idvalue == 0 || idvalue <0)
		{
			idvalue =0;
		}
		else
		{
			idvalue = idvalue -1;
		}

	}
	else
	{
		if (idvalue == 2 || idvalue >2) 
		{
			idvalue = 2;
		}
		else
		{
			idvalue = idvalue + 1;
		}

	}


	var imageId = "#id"+idvalue;
	//alert(imageId);
	$(imageId).show();
	$("img").not(imageId).hide();

});


</script>




</body>


</html>

如何使我的下一个按钮代码生效？

1 个答案: