简单的jQuery幻灯片图像向下移动一秒钟 [英] Simple jQuery Slideshow Image Moving Downwards for a Split Second

问题描述

  $（＃slideshow> div：gt（0）所以我在这里有一个简单的幻灯片代码： ））。隐藏（）; 
 
 setInterval（function（）{
 $（'＃slideshow> div：first'）
 .fadeOut（100）
 .next（）
 .fadeIn（1000）
 .end（）
 .appendTo（'＃slideshow'）; 
}，3000）; 
  

以下是我的HTML div：

 < div style =display：block; max-height：210px; ID = 幻灯片放映 > 
< div> 
< img src =https://lh5.googleusercontent.com/-hmenNgmckUY/UMYwzUQNdrI/AAAAAAAAB0Y/Z__BD-lxgYo/s912/gears.JPG> 
< / div> 
< div> 
< img src =https://lh6.googleusercontent.com/-Xn464dhgk6g/UNTgxgKrbvI/AAAAAAAAAwA/2omVTkLCjSE/s928/didy%2520site%25201.JPG> 
< / div> 
 
< / div> 
  

这里有一个工作小提琴： http://jsfiddle.net/shrimpboyho/9n9GK/

然而，请注意，当图片改变你在完全消失之前可以看到之前的图像褪色并向下移动？ b
$ b

这对我来说是一个问题，因为幻灯片需要放在一段文本上方，并且图片随着图片更改而闪烁，并且很烦人。有什么方法可以解决这个问题。

解决方案

 < div style =display ：block; max-height：210px; ID = 幻灯片放映 > 
  

是这个最大高度的实际工作，如果是的话，试试这个：

 < div style =display：block; max-height：210px; overflow：hidden; ID = 幻灯片放映 > 
  

So I have this code here for a simple slideshow:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(100)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Here is my HTML div:

<div style= "display:block;max-height: 210px;" id="slideshow">
   <div>
     <img src="https://lh5.googleusercontent.com/-hmenNgmckUY/UMYwzUQNdrI/AAAAAAAAB0Y/Z__BD-lxgYo/s912/gears.JPG">
   </div>
   <div>
     <img src="https://lh6.googleusercontent.com/-Xn464dhgk6g/UNTgxgKrbvI/AAAAAAAAAwA/2omVTkLCjSE/s928/didy%2520site%25201.JPG">
   </div>

</div>

And here is a working fiddle: http://jsfiddle.net/shrimpboyho/9n9GK/

However, notice that when the pictures change you can see the previous image fade and move downwards before completely disappearing?

This is a problem for me because the slideshow needs to be placed above a paragraph of text, and the picture flashes on the text as the pictures change and it is annoying. Are there any ways I can fix this.

解决方案

<div style= "display:block;max-height: 210px;" id="slideshow">

is this max-height actually working, if yes, try this:

 <div style= "display:block;max-height: 210px; overflow:hidden;" id="slideshow">

这篇关于简单的jQuery幻灯片图像向下移动一秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！