jQuery图片轮播

实现功能

1.图片自动以淡入淡出的方式轮播，当鼠标悬停在图片上面的时候轮播停止；
2.图片下面表示顺序的数字会随着图片切换颜色改变，当鼠标悬停在数字上时，图片切换为鼠标当前悬停的数字对应的图片

实现效果

HTML代码

<div class="photos">
    <h3>图片轮播</h3>
    <!-- 轮播的图片内容 -->
    <ul class="img">
        <li><a href="xxx.com" target="_blank"><img src="/1.jpg" alt="windows壁纸" width="300px" height="180px"></a></li>
        <li><a href="xxx.com" target="_blank"><img src="/2.jpg" alt="windows壁纸" width="300px" height="180px"></a></li>
        <li><a href="xxx.com" target="_blank"><img src="/3.jpg" alt="windows壁纸" width="300px" height="180px"></a></li>
        <li><a href="xxx.com" target="_blank"><img src="/4.jpg" alt="windows壁纸" width="300px" height="180px"></a></li>
        <li><a href="xxx.com" target="_blank"><img src="/5.jpg" alt="windows壁纸" width="300px" height="180px"></a></li>
    </ul>
    <!-- 图片下方的数字，通过jQuery自动添加 -->
    <div class="num_center"><ul class="num"></ul></div>
</div>

CSS代码

/*轮播图容器*/
.photos {
    width: 300px;
    height: 240px;
    background-color: #dddddd;
    padding: 1px 20px 30px 20px;
    border-radius: 10px;
}
/* 轮播图片的格式设置 */
.img { position: relative; }
.img li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
/* 图片下方数字 */
.num_center {
    height: 30px;
    position: relative;
    /* 把这排数字移动到合适的位置，用top和left来调整 */
    top: 82%;
    left: 50%;
    /* 未知宽高的块级元素居中设置，参考博客见最下面 */
    transform: translate(-50%, -50%);
}
.num {
    position: absolute;
    font-size: 0;
    width: 200px;
    text-align: center;
}
.num li {
    width: 18px;
    height: 18px;
    background-color: #777777;
    color: #ffffff;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    font-size: 10px;
    margin: 0 3px;
    cursor: pointer; /* 鼠标形状 */
}
/* 轮播到当前图片时，对应的数字背景颜色改变 */
.num li.active {
    background-color: #b92c28;
}

JavaScript代码

// 在HTML文件的头部记得引用jQuery：
// <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function () {
        //动态添加数字浮标
        var imgNum = $(".img li").size();
        for (var i = 1; i <= imgNum; i++) {
            $(".num").append("<li>" + i + "</li>");
        }
        
		// eq() 方法返回带有被选元素的指定索引号的元素，fadeIN()方法实现淡入
        $(".img li").eq(0).fadeIn(800);
        $(".num li").eq(0).addClass("active");

        //数字浮标的焦点事件
        $(".num li").mousemove(function () {
            if (!$(this).hasClass("active")) {
                $(this).addClass("active").siblings().removeClass("active");
                idx = $(this).index();
                $(".img li").eq(idx).stop().fadeIn(800).siblings().stop().fadeOut(800);
            }
        });

        //自动轮播
        var idx = 0;
        var timer = setInterval(move, 1500);
        function move(left) {
            if (left) { //向左移动
                idx--;
                if (idx === -1) {
                    idx = imgNum - 1;
                }
            } else {
                idx++;
                if (idx === imgNum) {
                    idx = 0;
                }
            }
            $(".num li").eq(idx).addClass("active").siblings().removeClass("active");
            $(".img li").eq(idx).stop().fadeIn(800).siblings().stop().fadeOut(800);
        }

        //图片获取焦点时，停止自动轮播
        $(".photos").hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(move, 1500);
        });
    });
</script>

元素居中