标签：jquery index 轮播 img imgObj pictureDemo position 定时 eq

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要设置好，不然两张照片位置不一！

标签：jquery,index,轮播,img,imgObj,pictureDemo,position,定时,eq
来源： https://www.cnblogs.com/xizui/p/12068758.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。