如何在javascript滑块中淡入淡出？

我创建了一个使用JavaScript代码的滑块，我想在其中添加一些像淡入淡出的运动效果。如何在javascript滑块中淡入淡出？

这里是我的代码：

<script type="text/javascript"> 
     <!-- 
     var image1=new Image() 
     image1.src="1.jpg" 

     var image2=new Image() 
     image2.src="2.jpg" 

     var image3=new Image() 
     image3.src="3.jpg" 

     var image4=new Image() 
     image4.src="4.jpg" 
     //--> 
    </script> 

<script> 
    <!-- 
    var step=1 
    function slideit() 
    { 
     document.images.slide.src=eval("image"+step+".src") 
     if(step<4) 
     step++ 
     else 
     step=1 
     setTimeout("slideit() ",3500) 
    } 
    slideit() 
    //--> 
    </script>

是否有褪色或其他运动的任何代码？

任何帮助，将不胜感激。

在此先感谢。

来源

2013-06-05 Mina Hafzalla

你尝试过什么？我推荐jQuery'animate'函数。试一试。 –

好'jQuery'有'fadeIn（）'和'fadeOut（）' – Spokey

是的，有这些类型的东西开发的整个jquery插件。 easySlider是其中一个，flexSlider是另一个。 Bootstrap有一个他们称为旋转木马的滑块，虽然只有滑动效果，但添加交叉渐变相当容易。

来源

2013-06-05 21:53:21

看代码，有几件事情必须绝对改变：

许多相似的元素必须放入array，而不是在许多类似的命名变量。
不要使用eval，事实上，杀死它与火，所以它不会回来。 eval是滥用以弥补缺乏能力的关键字。

然后，褪色和运动，你可以看看这些sliders，如果需要定制其中的一个使用jQuery。理想情况下，您不必自己处理图像元素，因为它是滑块的工作。

来源

2013-06-05 22:05:21

给幻灯片容器一个id i.g. “images”，那么你可以创建img dom元素并将其附加到容器中，然后每3.5秒更改它的源代码并使用jquery为不透明度（fadeIn）设置动画。

$(document).ready(function() { 
    var src = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; 
    var slide = 0; 
    var img = new Image(); 
    document.getElementById('images').appendChild(img); 

    function slideit() { 
     img.style.opacity = 0; 
     img.src = src[slide % 4]; //%4 will reset the counter to 0 after 3. 
     img.onload = function() { 
      $('#images img').animate({ 
       'opacity': 1 
      }, 500); 
      slide++; 
     }; 
     setTimeout(slideit, 3500); 
    } 
    slideit(); 
});

jsfiddle

来源

2013-06-05 22:39:20 razzak

如何在javascript滑块中淡入淡出？

回答

相关问题