Fatal编程技术网
  • javascript/
  • jQuery/Javascript:Button-替换图像

jQuery/Javascript:Button-替换图像

javascript jquery image

jQuery/Javascript:Button-替换图像,javascript,jquery,image,Javascript,Jquery,Image,我对JavaScript知之甚少，需要一些帮助。我有这个代码（如下），当倒计时结束时，它会用一个新的图像替换图像 我想修改一下，这样就不用倒计时了，而是按下了一个按钮（img）。以下是我的设计，以获得一个想法： 我猜这次我需要4个ImageLoader，而不是一个（每个框一个）和一些代码，以便在单击“older->”按钮时触发图像加载 <!DOCTYPE html> <html> <head> <meta charset="UTF

我对JavaScript知之甚少，需要一些帮助。我有这个代码（如下），当倒计时结束时，它会用一个新的图像替换图像

我想修改一下，这样就不用倒计时了，而是按下了一个按钮（img）。以下是我的设计，以获得一个想法：

我猜这次我需要4个ImageLoader，而不是一个（每个框一个）和一些代码，以便在单击“older->”按钮时触发图像加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
        <script type="text/javascript">
            <!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
            $(document).ready(function() {

                // The jquery code for constructing and starting the counter
                // has been wrapped inside a function so we can call it whenever we want to
                function startCounter(imageLoader){
                    $('#counter_2').countdown({
                         image: 'img/digits.png',
                         startTime: '00:03',
                         timerEnd: function(){ callback(imageLoader) },
                         format: 'mm:ss'
                    })
                }

                // Takes care of whatever need to be done every time
                function callback(imageLoader){
                    // Replace image
                    $('#image').attr('src', imageLoader.nextImage());

                    // Clear the finished counter, so a new can be constructed in its place
                    $('#counter_2').empty();

                    // Construct a new counter and starts it
                    startCounter(imageLoader);
                }

                function ImageLoader(images){
                    this.images = images;
                    this.current = 0;
                    this.nextImage = function(){
                        this.current = (this.current+1) % this.images.length;
                        return this.images[this.current];;
                    }
                }

                // Fill in images in this array
                imageLoader = new ImageLoader(['img/turd.png', 'img/guitar.gif', 'img/carrot.jpg', 'img/puppy.jpg']);

                // Set everything off! (Construct a new counter and starts it)
                startCounter(imageLoader);
            });
        </script>
        <style type="text/css">
            div.counter{
                font-size: 36px;
                font-weight: bold;
                line-height: 77px;
            }
        </style>
    </head>
    <body>
        <div id="counter_2" class="counter"></div>
        <img id="image" src="img/turd.png" alt="Hot steaming turd">
    </body>
</html>


$（文档）.ready（函数（）{
//用于构造和启动计数器的jquery代码
//已包装在函数中，因此我们可以随时调用它
功能启动计数器（图像加载器）{
$（'计数器2'）。倒计时({
图片：“img/digits.png”，
开始时间：“00:03”，
timerEnd:function（）{callback（imageLoader）}，
格式：“mm:ss”
})
}
//每次需要做的事情都会处理好
函数回调（imageLoader）{
//替换图像
$（'#image'）.attr（'src'，imageLoader.nextImage（））；
//清除已完成的计数器，以便可以在其位置构建新的计数器
$（'#counter_2'）。空（）；
//构造一个新计数器并启动它
startCounter（图像加载器）；
}
函数ImageLoader（图像）{
这个。图像=图像；
该电流=0；
this.nextImage=函数（）{
this.current=（this.current+1）%this.images.length；
返回this.images[this.current]；；
}
}
//在此数组中填充图像
imageLoader=新的imageLoader（['img/turd.png'，'img/guitart.gif'，'img/carrot.jpg'，'img/puppy.jpg']）；
//设置所有设置！（构建一个新计数器并启动它）
startCounter（图像加载器）；
});
分区计数器{
字体大小：36px；
字体大小：粗体；
线高：77px；
}
谢谢大家，我真的被困住了，非常感谢你们的帮助。

所以你们根本不想看到倒计时？听起来像是一个很好的老式JavaScript setInterval方法：@user1506980不，我没有，但我可以解决这个问题-问题是imageloader，我需要它来替换4个图像而不是一个。你只需要一个按钮来滚动图像吗？@tymv是的，就像我按“OLDER->”时，它会加载一组不同的图像。因此，我需要帮助修改上面的代码，以更改4个图像，而不是仅仅一个。我不确定我自己是否可以帮助代码提到“热气腾腾的垃圾”。