Question

在主页中有3个图像和2个按钮，分别命名为next和previous。单击下一个按钮时，3个图像将更改为下3个图像。总图像为100.然后单击新的3个图像显示。在第三次单击时，仅显示最后一个图像。在上一个按钮单击执行反向。代码在下面，未完成

<html>
<head>
    <title>
        Check! 1
    </title>
    <style type="text/css"> 
        #myimage {
    position:absolute;
    left:800;
    top:500;
  height: 50px;
  width: 50px;
}
#myimage1 {
    position:absolute;
    left:500;
    top:500;
 height: 50px;
width: 50px;
}   
#imageDiv
{
position:static;
top: 50px;
left: 10px;


}
    </style>
    <script type="text/javascript">
    var count=0;    
function image(thisImg) {
var img = document.createElement("IMG");
img.src = "img/"+thisImg;
document.getElementById('imageDiv').appendChild(img);
}
function test()
    { 

        //alert("just checking yaar");
        if(count<4)
        {
        ++count;
        console.log("count",count);
        if(count==1)
        {
            image('44585_Murree-Best-Hill-Station-wallpapers-        pictures_640x320.jpg');
            image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
            image('gravityflue04-640x320.jpg');
        }
        else if(count==2)
        {
            image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg');
            image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
            image('gravityflue04-640x320.jpg');

        }
        else if(count==3)
        {
            image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg');
            image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
            image('gravityflue04-640x320.jpg');
        }
        else if(count==4)
        {

            image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg');
            image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
            image('gravityflue04-640x320.jpg');
        }
        else 
        { 
            console.log("Invalid Count");
        }
    }
    }
    function test2()
    {

        if(count>0)
        {
        --count;    
        console.log("count",count);
        }
        else
        {
            console.log("Invalid Count");
        }
    }

</script>
</head>
<body>
<input type="image" id="myimage" value="next" name="next" src="next-button.jpg"   onclick="test()">
    <input type="image" id="myimage1" value="" name="next"  src="111645-glowing-green-neon-icon-media-a-media31-back.png" onclick="test2()">

Answer 1

使用jQuery解决这个问题可能最容易。

以下是您可以使用的解决方案：http://jqueryfordesigners.com/demo/infinite-carousel-loop.html

以下是教程：http://jqueryfordesigners.com/automatic-infinite-carousel/

Answer 2

使用图像名称加载array。空<img />标记的数量（在图像<div />中）决定了一次显示多少图像。将displayImage更改为指向包含图像的文件夹。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button onclick="previous();">previous</button>
    <div id="images">
        <img />
        <img />
        <img />
    </div>
    <button onclick="next();">next</button>
    <script>
        var imageSources = Array(
            "orderedList0.png", "orderedList1.png", "orderedList2.png",
            "orderedList3.png", "orderedList4.png", "orderedList5.png",
            "orderedList6.png", "orderedList7.png", "orderedList8.png",
            "orderedList9.png");
        var firstImage = 0;
        var increment = document.getElementById("images").children.length;
        displayImages();
        function next() {
            if (firstImage + increment < imageSources.length) {
                firstImage += increment;
            }
            displayImages();
        }
        function previous() {
            if (firstImage - increment >= 0) {
                firstImage -= increment;
            }
            displayImages();
        }
        function displayImages() {
            var imageDiv = document.getElementById("images");
            for (var imageIndex = 0; imageIndex < imageDiv.children.length ; imageIndex++) {
                displayImage(imageDiv.children[imageIndex], imageSources[firstImage + imageIndex])
            }
        }
        function displayImage(image, src) {
            if (src) {
                image.src = "images/" + src;
                image.style.display = "";
            } else {
                image.style.display = "none";
            }
        }
    </script>
</body>
</html>

如何导入图像/点击按钮更改它们？

2 个答案: