html图片一张一张自动放映,javascript,css_JQuery下实现三张图片的自动播放 . 关于fadeIn()和fadeOut()的较原理的问题，万望大神解惑！，javascript,cs...

JQuery下实现三张图片的自动播放 . 关于fadeIn()和fadeOut()的较原理的问题，万望大神解惑！

在

• 无序列表中放入三张图片，想用jquery实现三张图片的自动播放效果：

html代码如下：

• 
• 
• 

css代码如下：

body{margin:0 auto;background: #000;border: solid 1px red;}

ul{margin:0px;border: solid yellow 1px;padding:0px;position: relative;}

li{display: none;border: solid red 1px;width: 750px;height: 500px;margin:0 auto;position:absolute;}

img{display:inline-block;width:750px;height: 500px;}

jquery代码如下：

$(function(){

var order = 0; //order变量用于图片的计数

var change = setInterval(function(){

order++;

if(order == $("li").length){

order = 0;}

show(order);

},3000);

function show(order){

$("li").eq(order - 1).fadeOut(600); //将上一张图片隐藏

$("li").eq(order).fadeIn(600); //将这张图片出现

};

})

OK，问题出现了(此处，要隐藏的上张图片用a表示，要显示的此张图片用b表示)：

Q1 ：show(order)方法中，一共写了两条语句。

不是应该顺序执行，将第一条语句执行完成后再执行第二条语句吗？即对a，调用fadeOut()方法调用完后(此时a已经不再占用它的位置)，然后执行第二句，调用fadeIn()方法将b在a的位置显示出来吗？ .... 但是，实际情况是a在消失的过程中，b在a图片的下方已经占用了位置，开始渐渐的显示了，当a消失后，b图片上去填补上a的位置... fadeIn()与fadeOut()里面的具体细节是什么？产生上述情况的原因是什么？求指教！！ ORZ！！

--->如果在

中添加上position:absolute ， 在

• 中添加上position:relative,倒是可以避免出现上述问题，使得
• 中只显示一张图片，这是为什么？

  Q2 ：同一标签(比如此处的

• 标签)的不同元素的不同index值是怎样产生的？产生的机制是什么？

  Q3：在显示完第三张图片后，应把第三张图片隐藏，然后显示第1张图片。调了很久，只有将order值定为0，即：

  if(order == $("li").length){order = 0;}

  才能是第三张图片消失。但是如果order = 0的话，show(order)方法中，eq(order-1)获得的是eq(-1)！！选择器获得的应该是index值为-1的元素吧... 为什么能操作第三张图片？第三张图片的index值不是2吗？难道元素的index值是个循环的？

  希望大家多多指教！！

  相关阅读:

  这是php中__call和__callStatic在被继承后会产生的bug?

  SQL怎么在更新的时候加上锁?

  linux 每个进程都属于某一个tty吗

  Mac配置PHP开发环境

  什么是半逆向换行符(half-reverse line feed,HRLF)?

  PHP，如何判断一个array的key是自己填的还是自动生成的？

  生产环境都使用什么Mysql中间件？

  原生JS是什么意思？

  远程docker如何管理上intellij idea

  一个页面两个textarea，取不到第二个的值

  thinkphp无法加载Index模块

  AFN3.0 上传图片时报3840这种老错误，大神快请进~~

  绑定click事件append div,点击回复再移除。为什么点击“回复”按钮会增加下次append的div的个数？

  django项目中遇到的python装饰器参数问题，求大神指点

  subl命令怎样使用

  Spring Security有没有开源的用户管理系统？

  npm install错误

  felixge/node-mysql 中.query()函数问题

  很窄的那种网页。即使在大屏幕中也保持很窄的样式。在bootstrap中应该如何书写

  前端如何写出高效选择器？