jq 实现无缝轮播图

工作中经常会用到轮播图，这里记载两种轮播图，供大家参考

一、自动播放的无缝轮播图（一张图片占满屏）

首先是HTML，

<div class='bannerCon'>
        <ul class="bannerContainer" id="bannerContainer">
            <li class="banner"><img src="../imgs/banner1.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner2.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner3.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner4.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner5.png" alt="" ></li>
        </ul>
        <div class="bannerTip">
            <ul class="bannerUL" id="bannerTip"></ul>
        </div>
</div>

 

下面是样式表：

.bannerCon{
    overflow:hidden;
    width:100%;
    position:relative;
}
.bannerContainer{
    position:relative;
}
.bannerContainer li{
    float:left;
}
.bannerContain