Question

我尝试做一些关于如何在我的网站上使用某些页面的视频管理。使用矢量编辑器，我已经制作了一步一步的图片，并希望快速显示tham，以及其他类似gif文件的内容。

使用jquery隐藏和显示方法。

$(firstimage).hide();
$(secondimage).show();

它在chrome nad firefox上工作得很好，但是要让它变慢和点击。我试图将图像预加载到chache但没有运气。

mybe之前有人做过吗？

Answer 1

您有两种选择。选项一是为每个图像创建绝对定位的div，并通过click事件循环显示它们。

选项二是使用点击事件循环显示每个图像。

选项一：

HTML

<div id="container">
    <div id="image-1" class="images">
        <img src="path/some_image-0.gif" width="150" />
    </div>
    <div id="image-2" class="images">
        <img src="path/some_image-1.gif" width="150" />
    </div>
     <div id="image-3" class="images">
        <img src="path/some_image-2.gif" width="150" />
    </div>
    <div id="image-4" class="images">
        <img src="path/some_image-3.gif" width="150" />
    </div>
</div>

CSS

#container {
    position:relative;
}

.images {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

的JavaScript

var total_images = 4; // Set this variable to total number of images
$(document).ready(function() {
   $('.images').hide();
   $('#image-1').show();
   $('.images').click(function() {
       var current_img = parseInt($(this).attr('id').split('-')[1]); // get current file number
       var new_img = current_img+1; // Increment current image number by one
       $('#image-' + current_img).hide();
       if(new_img > total_images){  // check if total has been reached
          new_img = 1;
       }
       $('#image-' + new_img).show(); // set new image source
  });
});

此选项会更快，因为您无需等待加载图像。以下是此选项的JSFiddle：http://jsfiddle.net/xsCVY/1/

选项二：

HTML

<div id="container">
    <div id="image">
        <img src="/path/some_image-0.gif" class="images" />
    </div>
</div>

的JavaScript

<script>
    var total_images = 3; // Set this variable to total number of images
        $(document).ready(function() {
            $('.images').click(function() {
            var current_img = parseInt($(this).attr('src').split('-')[1]); // get current file number
            var new_img = current_img+1; // Increment current image number by one
            if(new_img > total_images){  // check if total has been reached
               new_img = 0;
            }
            $(this).attr('src','/path/some_image-' + new_img + '.gif'); // set new image source
 </script>

请记住，要使其正常工作，文件和文件路径中只应包含一个“ - ”，否则您必须拆分不同的唯一字符，然后使用数字0命名所有图像 - 无论是在“ - ”之后还是在你选择的其他角色之后。

这是一个jsfiddle：http://jsfiddle.net/PDzT8/

Answer 2

我的问题是将图像预加载到缓存中。我无法使用绝对位置，因为我的父元素混合了位置，它将图像带到父元素之外。我需要保持简单。非常感谢您的回复，我找到了今天有效的解决方案。我在幻灯片播放之前，第二次以1px宽度复制页面上所有使用过的图像，以便将它们缓存到内存中。不幸的是，所有JavaScript预加载方法都不起作用

jquery。在IE上快速移动图像

2 个答案: