jquery 轮播图（从零开发编写）

淡入淡出效果

利用的是绝对定位，绝对定位的元素会出现堆叠，jquery控制图片的隐藏与显示。

分享一个定位相关知识点

html

<div class="banner">
        <ul class="bannerImg">
            <li><a href="script:;"><img src="./img/pic_01.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_02.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_03.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_04.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/pic_05.jpg" alt=""></a></li>
        </ul>
        <ul class="navigation">
            <li class="actived"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="script:;" class="banner-arrow arrow-left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="script:;" class="banner-arrow arrow-right"><img src="./img/arrow-right.png" alt=""></a>
    </div>

 css

*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.banner {
    width: 630px;
    height: 300px;
    margin: 100px auto;
    position: relative;
}
.bannerImg {
    width: 100%;
    height: 100%;
    position: absolute;
}
.bannerImg li {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}
.bannerImg li:first-child {
    display: block;
}
.bannerImg li a img {
    width: 100%;
    height: 100%;
}
/* 左右切换按钮 */
.banner-arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    border:1px solid transparent;
    border-radius: 50%;
    background: #ddd;
    position: absolute;
    bottom: 135px;
    transition: all .3s linear;
}
.banner-arrow:hover {
    background: #333;
    opacity: 0.7;
}
.banner-arrow img {
    position: absolute;
    top:4px;
    left:10px;
}
.banner-arrow.arrow-left {
    left: 15px;
}
.banner-arrow.arrow-left img {
    left:6px;
}
.banner-arrow.arrow-right {
    right:15px;
}
/* 导航小圆点 */
.navigation {
    position: absolute;
    bottom:15px;
    left: 240px;
}
.navigation li {
    width: 15px;
    height:15px;
    float:left;
    margin-left: 10px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
}
.navigation li.actived {
    background: #e4393c;
}

js

$(function () {
// 自动轮播
var i = 0;
var flag = false;
function carouse () {
    i++;
    if(i>4){
        i = 0;
    }
    $(".bannerImg li")
        .eq(i)
        .fadeIn(500)
        .siblings()
        .fadeOut(500);
    $(".navigation li")
        .eq(i)
        .addClass("actived")
        .siblings()
        .removeClass("actived");
}
var timer = setInterval(carouse,2000)
// 鼠标移入停止轮播，鼠标移出开始轮播
$(".banner").hover(function() {
    clearInterval(timer);
    timer = null;
},function() {
    timer = setInterval(carouse,2000);
});
// 点击左边切换按钮
$(".arrow-left").click(function() {
    i--;
    if(i === -1){
        i = 4;
    };
    $(".bannerImg li")
        .eq(i)
        .stop(true)
        .fadeIn(500)
        .siblings()
        .fadeOut(500);
    $(".navigation li")
        .eq(i)
        .stop(true)
        .addClass("actived")
        .siblings()
        .removeClass("actived");
});
// 点击右边切换按钮
$(".arrow-right").click(function() {
    i++;
    if(i > 4){
        i = 0;
    };
    $(".bannerImg li").eq(i).stop(true).fadeIn(500).siblings().fadeOut(500);
    $(".navigation li").eq(i).stop(true).addClass("actived").siblings().removeClass("actived");
})
// 点击小圆点切换图片
$(".navigation li").click(function () {
    var $this = $(this);
    var i = $this.index();
    $(".bannerImg li").eq(i).stop(true).fadeIn(500).siblings().fadeOut(500);
    $(".navigation li").eq(i).stop(true).addClass("actived").siblings().removeClass("actived");
})


})

左滑右滑效果（不废话了）

html

<div class="banner">
        <ul class="bannerImg">
            <li><a href="script:;"><img src="./img/winter1.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter2.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter3.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter4.jpg" alt=""></a></li>
            <li><a href="script:;"><img src="./img/winter5.jpg" alt=""></a></li>
        </ul>
        <ul class="navigation">
            <li class="actived"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="script:;" class="banner-arrow arrow-left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="script:;" class="banner-arrow arrow-right"><img src="./img/arrow-right.png" alt=""></a>
    </div>

css

* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.banner {
    width: 800px;
    height: 400px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
}
/* 设置bannerImg的初始化位置及决定定位 是为了方便轮播实现 */
.bannerImg {
    position: absolute;
    left:0;
}
.bannerImg li {
    width: 800px;
    height: 400px;
    float: left;
}
.bannerImg li img {
    width: 100%;
    height: 100%;
}
/* 导航小圆点 */
.navigation {
    position: absolute;
    bottom: 15px;
    left: 40%;

}
.navigation li {
    float: left;
    width: 15px;
    height: 15px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #999;
    margin-left: 15px;

}
.navigation li.actived {
    background: #0aa1ed;
}
/* 左右切换箭头 */
.banner-arrow {
    position: absolute;
    top: 48%;
    width: 35px;
    height: 35px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #ccc;
    transition: all .3s linear;
}
.banner-arrow:hover {
    background: #aaa;
}
.banner-arrow img {
    position: absolute;
    top: 7px;
    left: 10px;
}
.banner-arrow.arrow-left {
    left: 10px;
}
.banner-arrow.arrow-right {
    right: 10px;
}

js

$(function() {
var timer = null, // 定时器
    move = 0, // 当前图片位置下标
    LIWIDTH = 800, // 图片容器宽度（li）
    wait = 3000, // 每隔多长时间播放一次
    interval = 500, // 图片的移动时间
    bannerImg = $(".bannerImg"),
    navigation = $(".navigation");
bannerImg.css("width",LIWIDTH*5);
// 自动轮播
function automove() {
    move++;
    if(move === 4){
        bannerImg.css("left",0);
        move = 0;
    }
    bannerImg.animate({
        left:-move*LIWIDTH
    },interval);
    // 导航小圆点的切换如果写在animate自带的function里
    // 则会出现一个延迟显现，所以单独提出来
    navigation.children()
                .eq(move)
                .addClass("actived")
                .siblings()
                .removeClass("actived");
}
function moved(){
    timer = setInterval(automove,wait);
}
moved();
// 点击左右边箭头切换图片
$(".arrow-left").click(function() {
    if(!bannerImg.is(":animated")){
        if(move === 0){
            move = 4;
            bannerImg.css("left",-LIWIDTH*move);
        }
        move--;
        bannerImg.animate({
            left:-move*LIWIDTH
        },interval);
        navigation.children()
                    .eq(move)
                    .addClass("actived")
                    .siblings()
                    .removeClass("actived");
    }
});
$(".arrow-right").click(function() {
    if(!bannerImg.is(":animated")){
        automove();
        console.log("向右移动");
    }
})
// 点击导航小圆点切换图片
navigation.on("click","li",function() {
    var $li = $(this);
    var index = $li.index();
    move = index;
    bannerImg
    .stop(true)
    .animate({
        left:-LIWIDTH*move
    },interval);
    $li.addClass("actived")
        .siblings()
        .removeClass("actived");
});
// 鼠标悬浮停止动画播放      鼠标移入和移出
$(".banner").hover(function() {
    clearInterval(timer);
    timer = null;
},function() {
    moved();
});

})