jquery实现简单定时轮播图
JS
$(document).ready(function(){ var index = 0; //刚开始设置一个index,index为图片的索引值 $(".pictureDemo img").hide(); $(".pictureDemo img").eq(index).show(); //当图片索引为0时,显示对应的图片,其他的隐藏 //设置一个定时器 timer = setInterval(function(){ var imgObj = $(".pictureDemo img"); //通过index的值进行循环 index++; if(index>1){ index = 0; } imgObj.fadeOut(1000); imgObj.eq(index).fadeIn(1000); },2000) })
html
<div class = "pictureDemo"> <img src = "img/tbdemo.jpg"> <img src = "img/tbdemo2.jpg"> </div>
css
.pictureDemo{ height:300px; width:90%; margin:90px auto 0; position:relative; } .pictureDemo img{ height:100%; width:100%; position:absolute; }
注:css里面position要设置好,不然两张照片位置不一!