在一段时间后一个接一个地看图像

我是前端开发中的新人，我面临的一个主要问题是我有3个图像放在彼此上，现在我想移动一个图像，所以其他图像然后它会出现，第三张图像在一段时间后出现。在一段时间后一个接一个地看图像

我想要在我的网站中的相同位置的三幅图像，但只希望在一段时间之后一次又一次看到这三幅图像。请帮我怎么做？

我可以使用字幕属性或JavaScript？

2012-10-05 Muhammad Azeem

我已经加入纯JS的解决方案，我会在稍后一些效果添加到它... – Develoger

在这里你去纯JavaScript解决方案：

编辑我添加图像旋转...查看活生生的例子（下面的链接）

<script> 

    var current = 0; 
    var rotator_obj = null; 

    var images_array = new Array(); 
    images_array[0] = "rotator_1"; 
    images_array[1] = "rotator_2"; 
    images_array[2] = "rotator_3"; 

    var rotate_them = setInterval(function(){rotating()},4000); 

    function rotating(){ 

     rotator_obj = document.getElementById(images_array[current]); 

     if(current != 0) { 

      var rotator_obj_pass = document.getElementById(images_array[current-1]); 
      rotator_obj_pass.style.left = "-320px"; 

     } 
     else { 

      rotator_obj.style.left = "-320px"; 

     } 

     var slideit = setInterval(function(){change_position(rotator_obj)},30); 

     current++; 

     if (current == images_array.length+1) { 

      var rotator_obj_passed = document.getElementById(images_array[current-2]); 
      rotator_obj_passed.style.left = "-320px"; 
      current = 0; 
      rotating(); 

     } 

    } 

    function change_position(rotator_obj, type) { 

     var intleft = parseInt(rotator_obj.style.left); 

     if (intleft != 0) { 

      rotator_obj.style.left = intleft + 32 + "px"; 

     } 
     else if (intleft == 0) { 

      clearInterval(slideit); 

     } 

    } 


</script> 

<style> 

    #rotate_outer { 

     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 320px; 
     height: 240px; 
     margin-top: -120px; 
     margin-left: -160px; 
     overflow: hidden; 

    } 

    #rotate_outer img { 

     position: absolute; 
     top: 0px; 
     left: 0px; 

    } 

</style> 

<html> 
<head> 
</head> 
<body onload="rotating();"> 

    <div id="rotate_outer"> 
     <img src="0.jpg" id="rotator_1" style="left: -320px;" /> 
     <img src="1.jpg" id="rotator_2" style="left: -320px;" /> 
     <img src="2.jpg" id="rotator_3" style="left: -320px;" /> 
    </div> 

</body> 
</html>

和工作例如：
http://simplestudio.rs/yard/rotate/rotate.html

来源

2012-10-05 08:24:31 Develoger

我建议拥有全部3张图片并根据需要隐藏/显示。更改源代码可能会导致浏览器再次请求图像，以确保其缓存版本是最新的 – SReject

您是对的，以这种方式我可以轻松制作过渡动画。我写得很快，我会修改它！ – Develoger

不要害怕，我已经在下面了：D – SReject

非jQuery的选项

如果你不想下去jQuery的路线，你可以尝试http://www.menucool.com/javascript-image-slider。设置就像一样简单，你只需要确保你的图像是一个ID为slider的div，并且div与你的图像尺寸相同。

jQuery的选项

的jQuery cycle plugin将帮助你实现这一目标。它需要jQuery的工作，但它不需要太多的设置来创建一个简单的幻灯片放映。

看一看的'super basic' demo：

$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
});

它many options如果你想要的东西有点票友。

来源

2012-10-05 08:03:29 boz

请不要建议使用的整个库，除非多了一个颇有几分从它的单一操作将被使用。 – SReject

我认为对于一个初学者来说，这是实现OP之后的最简单的方法。我可以给他一个纯粹的JavaScript解决方案，但它可能会有点太多。 – boz

是的，但是，我认为OP会更好地学习JavaScript，而不是依赖于libraryA或B。如果你看，有太多的人“知道jQuery而不是javascript” – SReject

arrayImageSource= ["Image1","Image2","Image3"]; 

setInterval(cycle, 2000); 
var count = 0; 

function cycle() 
{ 
    image.src = arrayImageSource[count] 
    count = (count === 2) ? 0 : count + 1; 
}

也许是这样的？

来源

2012-10-05 08:13:04 Anton

我建议拥有所有3张图片并根据需要隐藏/显示。更改源代码将导致浏览器每次都要求提供一个新版本 – SReject

如果你瞄准很好的过渡和效果，我建议的图像滑块称为“jqFancyTransitions”

来源

2012-10-05 08:13:55

请不要建议使用整个库，除非使用比它更多的操作。这是我认为OP会更好地学习JavaScript，而不是依赖于libraryA或B。如果你看，有太多的人“知道jQuery而不是javascript” – SReject

这就是为什么我说“良好的过渡和效果”。告诉我单个操作如何实现这样的工作？他是一名前端开发人员。最重要的是让网站更漂亮，而不仅仅是“完成工作” –

<html> 
<head> 
<script type="text/javascript"> 
    window.onload = function(){ 
     window.displayImgCount = 0; 
     function cycleImage(){ 
      if (displayImgCount !== 0) { 
       document.getElementById("img" + displayImgCount).style.display = "none"; 
      } 
      displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1; 
      document.getElementById("img" + displayImgCount).style.display = "block"; 
      setTimeout(cycleImage, 1000); 
     } 
     cycleImage(); 
    } 
</script> 
</head> 
<body> 
    <img id="img1" src="./img1.png" style="display: none"> 
    <img id="img2" src="./img2.png" style="display: none"> 
    <img id="img3" src="./img3.png" style="display: none"> 
</body> 
</html>

小提琴：http://jsfiddle.net/SReject/F7haV/

来源

2012-10-05 08:25:10 SReject

在一段时间后一个接一个地看图像

回答

相关问题