jQuery实现淡入淡出样式轮播

jQuery实现淡入淡出式轮播

　　HTML代码

<div class="viewport">
    <!-- 轮播图放置区域 -->
    <div class="lb">
        <a href="" id="img1"><img src="image/lunbo/lunbo1.jpg"></a>
        <a href="" id="img2"><img src="image/lunbo/lunbo2.jpg"></a>
        <a href="" id="img3"><img src="image/lunbo/lunbo3.jpg"></a>
        <a href="" id="img4"><img src="image/lunbo/lunbo4.jpg"></a>
        <a href="" id="img5"><img src="image/lunbo/lunbo5.jpg"></a>
    </div>
    <!-- 轮播图右下小点点 -->
    <div class="lb-control">
        <ul class="lb-page">
            <li class="page-item active" id="li1"></li>
            <li class="page-item" id="li2"></li>
            <li class="page-item" id="li3"></li>
            <li class="page-item" id="li4"></li>
            <li class="page-item" id="li5"></li>
        </ul>
    </div>
    <!-- 轮播图左右两侧箭头 -->
    <ul class="lb-pn">
        <li class="prev pn"></li>
        <li class="next pn"></li>
    </ul>
</div>

　　CSS代码

.viewport{
    position: relative;
    height: 460px;
    width: 100%; 
}
.viewport .lb{
    position: absolute;
    left: 0;
    top: 0;
    height: 460px;
    overflow: hidden;
    width: 100%;
}
.viewport a{
    opacity: 0;
    z-index: 10;
    position: absolute;
    display: block;
}
#img1{
    opacity: 1;
}
.viewport img{
    width: 1229px;
    height: 460px;
}
.lb-page{
    cursor: default;
    display: block;
    text-align: right;
    position: absolute;
    right: 30px;
    bottom: 20px;
    z-index: 999;
}
.lb-page .active{
    background: rgba(255,255,255,.3);
    border-color: rgba(0,0,0,.4);
}
.lb-page li{
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 10px;
    border: 2px solid #fff;
    border-color: rgba(255,255,255,.3);
    background: rgba(0,0,0,.4);
    transition: all .2s;
}
.lb-page li:hover{
    background: rgba(255,255,255,.3);
    border-color: rgba(0,0,0,.4);
}
.lb-pn .pn{
    display: block;
    position: absolute;
    cursor: pointer;
    top: 50%;
    z-index: 21;
    margin-top: -35px;
    height: 69px;
    width: 41px;
}
.lb-pn .prev{
    left: 234px;
    background: url('../image/lunbo/icon-slides.png') no-repeat -84px 50%;
}
.lb-pn .prev:hover{
    background-position: 0 50%;
}
.lb-pn .next{
    right: 0;
    background: url('../image/lunbo/icon-slides.png') no-repeat -125px 50%;
}
.lb-pn .next:hover{
    background-position: -42px 50%;
}

　　JS代码 ( 切记不要忘记导入jQuery )

$(function () {
    var count = 0;//图片序号,初始为0
    var imgList = $('.viewport a');
    var lbLi = $('.lb-page li');
    // 定义定时器
    var timer = setInterval(play,3000);
    //切换图片函数
    function change(fadeIn,fadeOut){
        //fadeIn: 即将淡入的图片序号
        //fadeOut: 即将淡出的图片序号
        //0.5秒内上一张淡出
        imgList.eq(fadeOut).animate({'opacity':'0'},500);
        //0.5秒内下一张淡入
        imgList.eq(fadeIn).animate({'opacity':'1'},500);
        //改变轮播右下小点点样式,同时清除其余兄弟小点点样式
        lbLi.eq(fadeIn).addClass('active').siblings().removeClass('active');
    }
    //实现向右切换函数函数
    function play(){
        var outcount = count; //outcount是即将要淡出的图片序号,也就是现在这张图片的序号
        count++; //count自加,count是将要淡入的图片序号,就是下一张图片序号
        //如果当前图片是最后一张,再加一回到第一张图
        count = count>=5?0:count;
        change(count,outcount);
    };
    //点击左右翻页进行跳转
    $(".lb-pn .prev").click(function(){
        clearInterval(timer);
        var outcount = count;
        count-- 
        //如果count是负数,跳转到最后一张图
        count = count<0?4:count;
        change(count,outcount);
        timer = setInterval(play,3000);
    });
    $('.lb-pn .next').click(function(){
        clearInterval(timer);
        play();
        timer = setInterval(play,3000);
    });
    //点击小点点跳转到指定序号图片
    lbLi.click(function(){
        clearInterval(timer);
        var index = $(this).index();
        change(index,count);
        count = index; //此处不加会产生bug: 下一张轮播图片不是从当前点击图片的下一张开始
        timer = setInterval(play,3000);
    });
    //悬浮清除定时器,移开继续
    $('.viewport .lb').hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(play,3000);
    });
});

　　排坑之路

　　因为对js的不熟悉,导致在写这个轮播的时候遇到了很多问题,首先出现的问题就是一次性跳转两张图片.其实实际上还是每次一张,但是那两张图片的跳转间隔非常短暂,就造成了一次性两张的假象.经排查发现是鼠标悬浮事件设计错误,每次悬浮在轮播区域之后就会再开一个定时器,两个定时器同时进行,时间造成重叠,就造成了隔一张跳两张的假象.解决方法: 抽离逻辑,单独作为函数来使用.

　　第二次调试发现又出现了点击右下方的点点不能实现跳转的问题,问题根源: 图片跳转函数逻辑错误, 解决方法: 修改函数. 在点击小点点切换图片的逻辑中,切记要修改将要淡出的图片序号(  count )为当前点击的小点点序号(  $(this).index() ),不然会出现轮播不从当前点击的点点开始的bug.