stackoom
  简体   繁体   中英

How do I loop through images with Previous/Next buttons?

 原文  2013-10-16 04:11:53  9   3    javascript

Question

I was able to get the images to loop through but now when I click on either the 'Previous' or 'Next' link, my file folder where I have my images stored pops up, every time. Any idea as to why this is happening or how to stop it?

THE SCRIPT 

<script type="text/javascript">
            /* <![CDATA[ */
                function changeDisplay(curLine) {
                    curLine.style.color = "red";
                    curLine.style.fontWeight = "bold";
                }

                function restoreDisplay(curLine) {
                    curLine.style.color = "blue";
                    curLine.style.fontWeight = "normal";
                }

                var curImage = 1;

                function changeImage(which) {
                    for (var i=0; i < 5; ++i) {
                        document.getElementById("image"+i).style.display = "none";
                    }
                    if (which < 1) 
                        which = 5;
                    if (which > 5)
                        which = 1;
                    document.getElementById("image"+which).style.display = "block";
                    curImage = which;
                }
            /* ]]> */
            </script>

THE HTML 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link type="text/css" rel="stylesheet" href="project.css" />

    </head>
    <body>
        <div>
            <table style="border:none" class="menu">
                <tr>
                    <td><a href="Index.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Home</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Specials.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Specials</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Tools.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Tools</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Prices.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Prices</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Order.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Shop</a></td>
                </tr>
            </table>
        </div>
        <div>
            <p style="font-weight:bold; font-size:20px">With winter approaching, every homeowner wants to be prepared for the snow and ice! We are now running a sale on a few items that will help handle the harsh winter conditions. Take a look at our prices and make sure you stock up. Click on the images below for more information.</p>
        </div>
        <div id="image" style="display:block">
            <img src="images/deicer.jpg" height="300" width="300" alt="deicer" />
        </div>
        <div id="image" style="display:none">
            <img src="images/snowblower.jpg" height="300px" width="300px" alt="snowblower" />
        </div>
        <div id="image" style="display:none">
            <img src="images/icemelt.jpg" height="300px" width="250px" alt="icemelt" />
        </div>
        <div id="image" style="display:none">
            <img src="images/shovel.jpg" height="225px" width="225px" alt="shovel" />
        </div>
        <div id="image" style="display:none">
            <img src="images/scraper.jpg" height="124" width="124" alt="scraper" />
        </div>
        <button type="button" onclick="changeImage(curImage - 1)">Previous</button>
        <button type="button" onclick="changeImage(curImage + 1)">Next</button> 
    </body>
</html>

3 answers

solution1
 1  2013-10-16 04:16:40

Add index (1 - 5) to all your image divs like: 

<div id="image1" style="display:block">

Change index in the loop as well to have everywhere 1 - 5 . Or change everything to 0 - 4 .

solution2
 1 ACCPTED  2013-10-16 04:17:48

all your image containers 

<div id="image" style="display:none">

have the same id and don't correspond to the format image#

Also change the following loop from 

for (var i=0; i < 5; ++i) {
     document.getElementById("image"+i).style.display = "none";
    }

to 

for (var i=0; i < 5; ++i) {
         document.getElementById("image"+ (i + 1)).style.display = "none";
        }

solution3
 0  2013-10-16 04:23:15

I got it to work by adding 1,2,3,4 to each of your image containers..

My version is below 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link type="text/css" rel="stylesheet" href="project.css" />
        <script type="text/javascript">
        /* <![CDATA[ */
            function changeDisplay(curLine) {
                curLine.style.color = "red";
                curLine.style.fontWeight = "bold";
            }

            function restoreDisplay(curLine) {
                curLine.style.color = "blue";
                curLine.style.fontWeight = "normal";
            }

            var curImage = 1;

            function changeImage(which) {
                for (var i=0; i < 5; ++i) {
                    document.getElementById("image"+i).style.display = "none";
                }
                if (which < 1) 
                    which = 5;
                if (which > 5)
                    which = 1;
                document.getElementById("image"+which).style.display = "block";
                curImage = which;
            }
        /* ]]> */
        </script>
    </head>
    <body>
        <div>
            <table style="border:none" class="menu">
                <tr>
                    <td><a href="Index.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Home</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Specials.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Specials</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Tools.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Tools</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Prices.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Prices</a></td>
                    <td class="menupipe">|</td>
                    <td><a href="Order.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Shop</a></td>
                </tr>
            </table>
        </div>
        <div>
            <p style="font-weight:bold; font-size:20px">With winter approaching, every homeowner wants to be prepared for the snow and ice! We are now running a sale on a few items that will help handle the harsh winter conditions. Take a look at our prices and make sure you stock up. Click on the images below for more information.</p>
        </div>
        <div id="image0" style="display:block">
            <img src="http://placehold.it/350/ffffff/000000">
        </div>
        <div id="image1" style="display:none">
            <img src="http://placehold.it/350/ffffff/000000">
        </div>
        <div id="image2" style="display:none">
            <img src="http://placehold.it/350/ffffff/000000">
        </div>
        <div id="image3" style="display:none">
            <img src="http://placehold.it/350/ffffff/000000">       
        </div>
        <div id="image4" style="display:none">
            <img src="http://placehold.it/350/ffffff/000000">
        </div>
        <button type="button" onclick="changeImage(curImage - 1)">Previous</button>
        <button type="button" onclick="changeImage(curImage + 1)">Next</button> 
    </body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I add next and previous buttons to my slideshow with jQuery? How do I loop through an array of buttons and only continue looping if the user clicks the next button in the array Using previous and next buttons to cycle through images in javascript Trying to make “next” and “previous” buttons that loop through navigation onclick Adding previous and next buttons for images How would I implement Next/Previous Buttons to cycle through tabular data in HTML The “previous” and “next” buttons do not work How do i add next and previous buttons to my react slideshow website Scroll through anchor tags with next and previous buttons Next and Previous buttons step through Bootstrap Tabs
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM