筑坐极_轮播图

第一步

布局

<div class="dsj">
    <ul class="ul">
    <li><img src="../imgs/1.jpg" alt=""></li>
    <li><img src="../imgs/2.jpg" alt=""></li>
    <li><img src="../imgs/3.jpg" alt=""></li>
    <li><img src="../imgs/4.jpg" alt=""></li>
    <li><img src="../imgs/5.jpg" alt=""></li>
    </ul>
    <ul class="dian">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

第二步

<script type="text/javascript">
   $(function () {
      let idx=0;
       let timer = null;


       let imgWidth = $(".ul>li>img").eq(0).width(); //获取图片宽
       let q = $(".ul>li").length; //获取轮播个数
       // console.log(imgWidth);
       // console.log(q);

       let clone = $(".ul>li").eq(0).clone();/*clone克隆，复制第一张*/
       $(".ul").append(clone);
       $(".ul").width((q + 1) * imgWidth + "px");/*修改宽度，放6张图*/


       $(".dian>li").mouseenter(function () {
        idx=$(this).index(); /*siblings同胞*/
        $(this).siblings("li").removeClass("active");/*将点击以外的图片移除class*/
        $(this).addClass("active");
           $(".ul").animate({"margin-left": -(idx * imgWidth ) + "px"}, 500)
       })
       autoPlay();/* autoPlay自动播放*/

       function autoPlay(){
           timer = setInterval(function () {
               if (idx < 5) {
                   idx++;
                   $(".ul").stop().animate({"margin-left": -(idx * imgWidth) + "px"}, 500);

                   $(".dots>li").removeClass("active");
                   $(".dots>li").eq(idx===5?0:idx).addClass("active");

               } else {
                   idx = 1;
                   $(".ul").css({"margin-left": "0"})
                   $(".ul").stop().animate({"margin-left": -(idx * imgWidth) + "px"}, 500);


                   $(".dots>li").removeClass("active");
                   $(".dots>li").eq(1).addClass("active");

               }
           }, 1000)
       }

       $(".dian").mouseenter(function () {
           clearInterval(timer);
       }).mouseleave(function () {
           autoPlay();
       })
  })



</script>

第三步

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .dsj {

        width: 670px;
        height: 329px;
        border: 1px solid black; /*黑色边框*/
        margin-top: 100px; /*离上边的距离*/
        margin-left: auto;
        margin-right: auto;

        overflow: hidden; /*超出部分隐藏*/
        position: relative;/*relative相对的*/
    }

    .ul {
        width: calc(670px * 5); /*calc计算*/
        height: 329px;
        background: #62822c;
        margin: 0;
        padding: 0;
        list-style: none; /*去掉小黑点*/

    }

    .ul > li {
        width: 670px;
        height: 327px;
        float: left;

    }
    .dian{
     position:absolute;/*absolute绝对的,完全的*/
        top: 300px;
        left: 200px;
        list-style:none;
    }
    .dian>li{
     float: left;/*float浮动的*/
        width: 12px;
        height: 12px;
        background: #0daf90;
        margin-left: 8px;
        border-radius: 6px;/* border边境,边界*/
        transition: all 0.3s;
        cursor: pointer;
    }
    .dian>li.active{ /*第一个被选中的点*/
        width: 24px;
    }

</style>

轮播图

苏林*

js，html

简单制作轮播图

2021.06.21

922人

苏林*

天津市大港区

Hot:18689

苏林*

当前作品暂无评分

还未获得评语哦~