jq实现图片轮播

涉及知识点：
父元素与子元素的position
rgba()的4个参数可以设置颜色和透明度
transform:rotate(180deg)旋转180度
background的属性
jQuery的eq()遍历方法，fadeIn()淡入方法
setInterval()定时器的使用

实现效果：

• 图片定时向右轮番淡入显示
• 点击两边箭头可以向对应方向显示下张图片
• 鼠标移动到图片上停止播放
• 鼠标移动到对应的点上显示对应的图片

示例

话不多说，开搞！
第一步：搭房子，把放图片的盒子建好。

<div class="banner">
            <div class="imges">
                <a href="#">![](./img/img01.png)</a>
                <a href="#">![](./img/img02.jpg)</a>
                <a href="#">![](./img/img03.jpg)</a>
                <a href="#">![](./img/img04.jpg)</a>
                <a href="#">![](./img/img05.jpg)</a>
            </div>
            <ul class="bannerDot">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="bannerBtnL">
                <a href="./img/left_arrow.png"></a>
            </div>
            <div class="bannerBtnR">
                <a href="./img/right_arrow.png"></a>
            </div>
        </div>

第二步：刷涂料，设置css样式。

* {
    border: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.banner {
    width: 850px;
    height: 500px;
    margin: 0 auto;
    position: relative;
}
.banner .imges {
    position: relative;
}
.banner .imges img {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 500px;
}
.bannerDot {
    width: 100px;
    height: 10px;
    position: absolute;
    right: 40%;
    bottom: 20px;
}
.bannerDot li {
    list-style: none;
    float: left;
    width: 8px;
    height: 8px;
    margin: 2px;
    border: 2px solid rgba(225, 225, 225, 0.3);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.bannerDot li:hover {
    border: 2px solid rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.6);
}
.bannerBtnL {
    height: 70px;
    width: 40px;
    background: url(img/arrows.png) no-repeat -0px -123px;
    transform: rotate(180deg);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -42px;
    cursor: pointer;
}
.bannerBtnL:hover {
    background-position: -86px -123px;
}
.bannerBtnR {
    height: 70px;
    width: 40px;
    background: url(img/arrows.png) no-repeat -0px -123px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -42px;
    cursor: pointer;
}
.bannerBtnR:hover {
    background-position: -86px -123px;
}

第三步：造机关，写js文件。

$(document).ready(function () {
    var bannerImg = $(".imges img"); //图片
    var dot = $(".bannerDot li"); //圆圈
    var index = 0;
    function demo(derection) {
        //定义一个demo函数，带一个方向参数，方向向左或右；
        if (derection == "right") {
            index++;
            //当下标>=图片长度，返回第一张；
            if (index >= bannerImg.length) {
                index = 0;
            }
        } else if (derection == "left") {
            index--;
            //下标<0的时候，下标是图片的长度减一；
            if (index <= -1) {
                index = bannerImg.length - 1;
            }
        }
        bannerImg.hide(); //图片隐藏；
        bannerImg.eq(index).fadeIn(); //fadeIn()方法，使用淡入效果显示被选元素
        dot.css({
            background: "rgba(0,0,0,0.4)",
            border: "2px solid rgba(225, 225, 225, 0.3)"
        }); //圆圈添加css
        dot.eq(index).css({
            background: "rgba(225, 225, 225,0.6)",
            border: "2px solid rgba(0,0,0,0.3)"
        }); //遍历圆圈更改css
    }
    //setInterval()方法 定时调用函数，直到清除clearInterval();
    var t = setInterval(function () {
        demo("right");
    }, 3000); //每3秒调用一次demo函数
    $(".banner").hover(function () {
        clearInterval(t);
    }, function () {
        t = setInterval(function () {
            demo("right");
        }, 3000);
    })
    //点击箭头实现图片向左向右；
    $(".bannerBtnL").click(function () {
        demo("left");
    })
    $(".bannerBtnR").click(function () {
        demo("right");
    })
    //鼠标移到圆圈上显示对应的图片
    dot.hover(function () {
        var nowImg = $(this).index(); //当前圆圈的下标
        dot.css({
            background: "rgba(0,0,0,0.4)",
            border: "2px solid rgba(225, 225, 225, 0.3)"
        });
        $(this).css({
            background: "rgba(225, 225, 225,0.6)",
            border: "2px solid rgba(0,0,0,0.3)"
        });
        bannerImg.hide();
        bannerImg.eq(nowImg).show();
        index = nowImg;//善后工作，图片接着播放下一张
    })
})

第四步：打完收工。Y(^_)Y

附上示例所用的箭头图：

arrows.png

最后啰嗦几句
js最后鼠标指向圆圈显示对应图片的时候，刚开始用的fadeIn()方法，淡入淡出是很好，但是鼠标从一个圆移到另一个圆的时候，接连两次淡入淡出效果有点闪眼，所以干脆直接去掉效果用了show()方法。