jquery实现轮播图

html

    <div class="list">
        <div class="content">
            <img src="./image/1.jpg" alt="">
            <img src="./image/2.jpg" alt="">
            <img src="./image/3.jpg" alt="">
            <img src="./image/4.jpg" alt="">
            <img src="./image/5.jpg" alt="">
            <img src="./image/1.jpg" alt="">
        </div>
        // 小圆点
        <div class="btns">
            <span class="choose"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        // 向前向后按钮
        <div class="prev">&lt;</div>
        <div class="next">&gt;</div>
    </div>

2 css

    <style>
        * { 
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list {
            width: 560px;
            height: 300px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;  // 图片排成一排，需要溢出隐藏
        }
        .content {
            width: 4200px;
            height: 300px;
            /* 去除图片之间的空隙 */
            font-size: 0;
            position: absolute;
        }
        .content img {
            width: 560px;
            height: 300px;
        }
        .prev,
        .next {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 50px;
            margin-top: -25px;
            color: #fff;
            background-color: rgba(0,0,0,0.6);
            font-size: 30px;
            text-align: center;
            line-height: 50px;
        }
        .prev {
            left: 0;
        }
        .next {
            right: 0;
        }
        .btns {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 30px;
            text-align: center;
        }
        .btns span {
            /* span标签不能直接设置宽度，只能设置padding */
            padding: 6px;
            margin: 0 6px;
            /* 让默认字号为0，不然就是椭圆了 */
            font-size: 0;
            background-color: #fff;
            border-radius: 50%;
        }
        .btns span.choose {
            background-color: #f00;
        }

    </style>

3 js

<script src="./jquery/jquery.js"></script>
<script> 
var $content = $('.content');	// 获取一整排的图片
var $btns = $('.btns span');	// 获取轮播图小圆点
// 当前显示图片的索引值
var index = 0;
// 循环定时器
var timeber;
// 启动轮播
function startInterval(){
    timeber = setInterval(function(){
        // 显示下一张
        index++;
        change()

    },3000)
}
// 页面加载完成，启动轮播
startInterval();
// 更改图片以及按钮
function change(fn){
    $content.animate({left: index *-560},500,function(){
        // 修改猫腻图（额外添加的图片）当轮到第5张额外的图片的时候，自动换成第一张
        if (index === 5){
            index = 0;
            $content.css('left',-560 * index);
        }   
        // 更新小圆点
        $btns
            .eq(index).addClass('choose')
            // 兄弟元素
            .siblings().removeClass('choose')
        fn && fn();

    });
}
// 点击小圆点，切换图片
$btns.click(function(){
    clearInterval(timeber);
    // 获取索引值
    index = $(this).index();
    change(startInterval);

})

// 下一张
$('.next').click(function(){
    // 清除定时器
    clearInterval(timeber);
    // 更改索引值
    index ++;
    if (index >= 6){
            index = 0;
        }
    change(startInterval);
})
// 上一张
$('.prev').click(function(){
    // 清除定时器
    clearInterval(timeber);
    // 更改索引值
    index --;
    if (index < 0){
    // 如果显示的是第一张图片，即index=0,此时按上一张按钮，就把图片切到多出的一张猫腻图，即最后的一张，并把index改成4，通过change函数从最后一张切换到index=4的那一张
            index = 4;
            $content.css('left',-560 * 5);
        }
    change(startInterval);
})
</script>