HTML自我总结（二）--------轮播图的制作

简单轮播图

代码
HTML：

<!--轮播图区-->
    <div class="flash">
        <!--插入4张轮播图-->
        <!--功能：使图片在界面上轮流播放-->
        <div class="pic">
            <img src="http://www.hubu.edu.cn/images/1.jpg">
            <img src="http://www.hubu.edu.cn/images/20190610.jpg" >
            <img src="http://www.hubu.edu.cn/images/qianjinga.jpg" >
            <img src="http://www.hubu.edu.cn/images/5.jpg" >
        </div>

        <!--插入四个圆点-->
        <div class="list">
            <ul>
                <!--第一个圆点为黑色-->
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <!--箭头-->
        <div class="jiantou">
            <img src="../../text/img/3.png" class="prev">
            <img src="../../text/img/3.png" class="next">
        </div>
    </div>

CSS：

/*轮播图css*/
/*轮播图边框*/
.flash{
    width: 1200px;
    height: 400px;
    background: red;
    margin: 0 auto;/*居中*/
    position: relative;
    overflow: hidden;/*超出部分隐藏*/
}

.flash .list ul{
    width: 200px;
    height: 30px;
    background: transparent;
    position: absolute;
    bottom: 20px;
    right: 0;
}

.flash .list ul li{
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    list-style: none;
    line-height: 20px;
    text-align: center;
    margin-left: 5px;
}

.prev{
    position: absolute;
    top:45%;
    left: 0;
}
.prev:hover{
    background: rgba(0,0,0,0.5);
}
.next{
    position: absolute;
    top: 45%;
    right: 0;
}
.next:hover{
    background: rgba(0,0,0,0.5);
}
.active{
    background: #ffffff;
}

JS：（记得插入jquery-3.3.1.js、jquery-3.3.1.min.js）

/*轮播图js*/
//全局变量
var time=0;
timeplay=null;
//手动播放轮播图
$(".flash .list ul li").mouseover(function () {
    clearInterval(timeplay);//阻止轮播图自动播放
    index=$(this).index();//获取序号
    $(this).addClass("active").siblings().removeClass("active");//当鼠标放入小圆点时，圆点变白，其余不变
    $(".flash .pic img").eq(index).show().siblings(".flash .pic img").hide();//当鼠标放入小圆点时，小圆点对应的图片显示出来、

}).mouseout(function () {
    /*鼠标离开圆点时，开始自动播放功能*/
    aa();
})
//自定义function，实现轮播图自动播放
aa();
function  aa() {
    //设置时钟

    timeplay=setInterval(function () {
        time++;
        $(".flash .list ul li").eq(time).addClass("active").siblings().removeClass();//圆点自动转换
        $(".flash .pic img").eq(time).show().siblings(".flash .pic img").hide();//图片自动转换
        //处理计数器超过最大序列数的问题
        if(time>=4){
            time=-1;
        }

    },2000);
}
//左切换
$(".flash .jiantou .prev").click(function () {
    time--;
    if(time>=0){
        $(".flash .list ul li").eq(time).addClass("active").siblings().removeClass();//圆点转换
        $(".flash .pic img").eq(time).show().siblings(".flash .pic img").hide();//图片转换
    }else{
        time=4;
        $(".flash .list ul li").eq(time=3).addClass("active").siblings().removeClass();//圆点转换
        $(".flash .pic img").eq(time=3).show().siblings(".flash .pic img").hide();//图片转换
    }
})
//鼠标放在箭头上 停止自动轮播
$(".flash .jiantou .prev").mouseover(function () {
    clearInterval(timeplay);
}).mouseout(function () {
    aa();
});
//右切换
$(".flash .jiantou .next").click(function () {
    time++;
    if(time<=3){
        $(".flash .list ul li").eq(time).addClass("active").siblings().removeClass();//圆点转换
        $(".flash .pic img").eq(time).show().siblings(".flash .pic img").hide();//图片转换
    }else{
        time=1;
        $(".flash .list ul li").eq(time=0).addClass("active").siblings().removeClass();//圆点转换
        $(".flash .pic img").eq(time=0).show().siblings(".flash .pic img").hide();//图片转换
    }
})
//鼠标放在箭头上 停止自动轮播
$(".flash .jiantou .next").mouseover(function () {
    clearInterval(timeplay);
}).mouseout(function () {
    aa();
});

结果