jQuery实现图片轮播

html代码

<div id="banner">
    <ul id="imgList">
        <li><a href="#"><img src="img/1bg_shoulei.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/2bg_xnet.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/3bg_member.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/4bg_xkn.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/5bg_xav.jpg" alt=""></a></li>
    </ul>
    <div id="circle">
        
    </div>
    <div id="focus">
        <span id="focusLeft">&lt;</span>
        <span id="focusRight">&gt;</span>
    </div>
</div>

css代码

*{
    padding: 0;
    margin: 0;
}
#banner{
    width: 730px;
    height: 454px;
    margin: 100px auto;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
}
#banner>ul{
    width: 1000%;
    position: absolute;
    top: 0;
    left: 0;
}
#banner>ul>li{
    list-style: none;
    float: left;
}
#banner>ul>li img{
    width: 730px;
    height: 454px;
    vertical-align: top;
}
#circle{
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 30px;
    left: 320px;
}
#circle>span {
    float: left;
    border: 3px solid rgba(255,255,255,0.5);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
}
#circle .on {
    border: 3px solid rgba(255,255,255,1);
}
#focus{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}
#banner:hover #focus{
    display: block;
}
#focus>span{
    position: absolute;
    top:50%;
    margin-top: -20px;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-color:rgba(0,0,0,0.2);
    font-size: 20px;
    color: white;
}
#focusLeft{
    left: 5px;
}
#focusRight{
    right: 5px;
}

js代码

<script>
    // 封装移动动画函数
    function moveAnimated(moveElement,targetLeft) {
        // 先清理定时器，防止定时器累加，速度越来越快
        clearInterval(moveElement.timeId);
        //每次的点击操作都只产生一个定时器，定时器的id值存储到一个对象的属性中
        moveElement.timeId=setInterval(function () {
            // 获取div当前left值
            var currentLeft=moveElement.offsetLeft;
            //设置每次移动一次的距离------步数
            var step=10;
            //判断移动的方向
            step=currentLeft<targetLeft?step:-step;
            // 每次移动后的位置
            currentLeft+=step;
            // 判断当前移动后的位置是否达到目标位置
            if(Math.abs(targetLeft-currentLeft)>Math.abs(step)){
                moveElement.style.left=currentLeft+"px";
            }else{
                //到达目标位置则清理定时器
                clearInterval(moveElement.timeId);
                moveElement.style.left=targetLeft+"px";
            }
        },8)
    }

    var imgWidth=$("#imgList>li").width();
    var circleIndex=0

    //创建小圆点按钮
    $("#imgList>li").each(function (i) {
        $("#circle").append("<span></span>");
        //为每个span标签添加一个自定义属性，存储索引值
        $("#circle>span:last").attr("index",i);
    })
    $("#circle>span:first").attr("class","on");

    //为小圆点绑定鼠标移入事件
    $("#circle>span").on("mouseover",function () {
        //清空所有的class值
        $("#circle>span").attr("class","")
        //设置当前的class值
        $(this).attr("class","on");
        //获取小圆点按钮的索引值
        circleIndex=$(this).index();
        //改变图片的left值
        moveAnimated($("#imgList")[0],-circleIndex*imgWidth)
    })

    //克隆第一张图片的结构，加入到图片队列
    $("#imgList>li:first").clone(true).appendTo($("#imgList"))

    //点击左边按钮
    $("#focusLeft").on("click",function () {
        //如果移动到第一张图片
        if(circleIndex==0){
            //显示最后一张图片
            circleIndex=$("#circle>span").length;
            $("#imgList").css("left",-circleIndex*imgWidth+"px");
        }
        circleIndex--;
        moveAnimated($("#imgList")[0],-circleIndex*imgWidth)
        //清空所有的class值
        $("#circle>span").attr("class","")
        //设置当前的class值
        $("#circle span:eq("+circleIndex+")").attr("class","on");

    })

    // 点击右边按钮
    function clickRight(){
        //如果移动到最后一张图片
        if(circleIndex==$("#imgList").children().length-1){
            //显示第一张图片
            circleIndex=0;
            $("#imgList").css("left","0px");
        }
        circleIndex++;
        moveAnimated($("#imgList")[0],-circleIndex*imgWidth)
        //改变小圆点按钮的状态
        if(circleIndex==$("#imgList").children().length-1){
            $("#circle>span:first").attr("class","on");
            $("#circle>span:last").attr("class","");
        }else{
            //清空所有的class值
            $("#circle>span").attr("class","")
            //设置当前的class值
            $("#circle span:eq("+circleIndex+")").attr("class","on");
        }
    }
    $("#focusRight").on("click",clickRight)

    // 图片自动轮播
    var timeId=setInterval(clickRight,2000)

    //鼠标移入
    $("#banner").on("mouseover",function () {
        clearInterval(timeId)
    })
    //鼠标移出
    $("#banner").on("mouseout",function () {
        timeId=setInterval(clickRight,2000)
    })
</script>

实现效果及源代码
参考：https://pan.baidu.com/s/16gF05OxbRQuHRbwIOirmng
提取码：8lo0

来源：CSDN

作者：依赖_赖

链接：https://blog.csdn.net/weixin_39150852/article/details/84959211

标签

轮播

jquery

class

circle