轮播图
制作一个pc端的轮播图

先把html的页面搭建出来

html页面的代码

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div>
            <!--搭建轮播框架开始-->
            <div class="lb-kj">
                <ul id="lb-img">
                    <li><img src="img/lb1.jpg" /></li>
                    <li><img src="img/lb2.jpg" /></li>
                    <li><img src="img/lb3.jpg" /></li>
                    <li><img src="img/lb4.jpg" /></li>
                </ul>
            </div>
            <!--搭建轮播框架结束-->

            <!--搭建圆点框架开始-->
            <div class="lb-ydkj">
                <ul class="lb-yd" id="lb-number">
                    <!--把li内的div画成圆点开始-->
                    <li>
                        <div class="lb-hy"></div>
                    </li>
                    <li>
                        <div class="lb-hy"></div>
                    </li>
                    <li>
                        <div class="lb-hy"></div>
                    </li>
                    <li>
                        <div class="lb-hy"></div>
                    </li>
                    <!--把li内的div画成圆点结束-->
                </ul>
            </div>
            <!--搭建圆点框架结束-->

        </div>
        <link rel="stylesheet" href="css/lb.css" />
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="js/lb.js"></script>
    </body>

</html>
复制代码

再给html的页面添加样式

css样式

复制代码
/*把所有的li去掉圆点*/
ul li {
    list-style: none;
}

/*轮播图的框架样式设置*/
.lb-kj {
    width: 50%;
    height: 244px;
    margin: 0 auto;
}

/*轮播图的框架里的ul样式设置*/
.lb-kj ul {
    width: 100%;
    height: 244px;
    margin-top: 0px;
    overflow: hidden;
    padding-left: 0px;
}

/*把轮播里的图片改成100%*/
.lb-kj img {
    width: 100%;
}

/*让圆点的li排成一行*/
.lb-ydkj ul li {
    display: inline-block;
}

/*圆点框架的样式设置*/
.lb-ydkj {
    width: 50%;
    margin: 0 auto;
    margin-top: -5%;
    position: relative;
}

/*画圆的样式设置*/
.lb-hy {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #9D9D9D;
    margin-right: 10px;
}

/*圆点的ul样式设置*/
.lb-yd {
    width: 30%;
    margin: 0 auto;
}
复制代码

然后就是让轮播图和圆点动起来了

js页面

复制代码
$(function() {
    //轮播图
    var index = 0;

    showImg();

    function showImg() {
        //播放第index 图片
        $("#lb-img li").hide();
        $("#lb-img li").eq(index).show();

        //小圆点样式
        $("#lb-number li .lb-hy").css("background", 'none')
        $("#lb-number li .lb-hy").eq(index).css("background-color", "red");
    }
    var id;
    //定时器轮播
    var id = setInterval(function() {
        if(index >= 3) {
            index = 0;
        } else {
            index++;
        }
        showImg();

    }, 2000)

    //鼠标悬浮的时候
    $("#lb-number li").hover(function() {
        //停止定时器
        clearInterval(id);
        //换到第几个图片
        index = $(this).index();
        showImg();
    }, function() {
        //继续轮播
        id = setInterval(function() {
            if(index >= 3) {
                index = 0;
            } else {
                index++;
            }
            showImg();

        }, 2000)
    })
});
复制代码

效果图

posted on 2020-01-09 16:39  jjkkllaa  阅读(151)  评论(0)  编辑  收藏  举报