轮播图

布局

利用jQuery实现小米轮播图效果。实现该效果由三部分组成：图片、切换上一张和下一张按钮以及图片下方小圆点。在实现过程中，添加了定时器，开始时，图片自动的从右到左切换，底下的小圆点也在相对于的切换，点击上一张或者下一张按钮的时候，图片和小圆点也在对于的切换。

布局与样式代码如下：
HTML

<body>
    <div id="banner">
        <div class="img_wrap">
            <ul>
                <li class="item" style="display: block;">
                    <img src="images/1.jpg"  width="1226" height="460" alt="">
                </li>
                <li class="item">
                    <img src="images/2.jpg" width="1226" height="460" alt="">
                </li>
                <li class="item">
                    <img src="images/3.jpg" width="1226" height="460" alt="">
                </li>
                <li class="item">
                    <img src="images/4.jpg" width="1226" height="460" alt="">
                </li>
                <li class="item">
                    <img src="images/5.jpg" width="1226" height="460" alt="">
                </li>
            </ul>
        </div>
        <div class="lr_tab">
            <div class="left btn"></div>
            <div class="right btn"></div>
        </div>
        <div class="small_btn">
            <ul>
                <li class="btn active"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
            </ul>
        </div>
    </div>
</body>

CSS

body{
    margin:0;
}
#banner{
    width:1226px;
    height:460px ;
    margin:100px auto;
    position:relative;
}
ul,li{
    list-style: none;
    margin:0;
    padding:0;
}
#banner .item{
    position:absolute;
    display: none;
    top:0;
    left: 0;
}

.lr_tab .btn{
    position:absolute;
    width:41px;
    height: 69px;
    top:200px;
    background:url("images/icon-slides.png");
}
/*上一张下一张按钮*/
 .lr_tab .left{
    left: 234px;
    background-position-x: -83px;
}
.lr_tab .right{
    right:0;
    background-position-x:-125px;
}
.lr_tab .left:hover{
    background-position-x: 0px;
}
.lr_tab .right:hover{
    background-position-x: -43px;
}
/*下面的五个小圆圈*/
.small_btn{
    width:110px;
    height: 30px;
    position:absolute;
    right:40px;
    bottom:10px;
}
.small_btn .btn{
    width:6px;
    height: 6px;
    background-color: #899898;
    border:2px solid #b0adb2;
    float: left;
    border-radius:50%;
    margin-left:10px;
}
.small_btn .btn:hover{                 //鼠标移动到小圆点上改变小圆点的背景色为白色
    background-color: #fff;
}
.small_btn .active{					//小圆点选中状态将背景色改为白色
    background-color: #fff;
}

注：一定要引入jQuery文件。

<script rel="script" src="js/jquery-3.4.1.js"></script>

效果如下

实现

入口函数

在jQuery语法中，代码要写在入口函数中，jQuery的入口函数有4种写法。推荐使用第三种，方便简洁。

入口函数写法如下：

 第一种写法
     $(document).ready(function () {
     alert("hello");
   });

 第二种写法
    jQuery(document).ready(function () {
      alert("hello");
  });

 第三种写法(推荐）
   (function () {
      alert("hello");
 });

 第四种写法
    jQuery(function () {
       alert("hello");
  });

小圆点切换实现

图片中小圆点与图片时一一对应的，当图片切换时，对应的小圆点也会对应切换。在布局的时候，让所有的图片定位重合在一起，并将图片隐藏，让第一张图片显示，并将下面的第一个小圆点添加了active类，改变默认的小圆点的背景色，当图片对应切换时，将active类添加给图片对应的小圆点。

// jQuery入口函数
$(document).ready(function () {
    //定义一个index变量来表示图片的位置
    var index=0;
    //定义一个变量，来获取图片的总数
    var num=$(".img_wrap .item").length;

    //单击小圆点实现圆点的切换,就是给点击的小圆点添加active类，把第一个
    //的active类去掉
    $(".small_btn .btn").click(function () {
        //获取当前元素的索引
        index=$(this).index();
        //给当前的小圆点添加active类，把其它的兄弟小圆点的active类删除
        $(this).addClass("active").siblings().removeClass("active");
        // 单击小圆点实现图片的切换，渐入渐出
        $(".item").eq(index).fadeIn().siblings().fadeOut();
    });

上一张按钮

为上一张按钮添加鼠标响应事件，直接找到要添加鼠标单击按钮即可，不需要提前定义，通过var一个变量来使用，快速高效。每次点击上一张按钮时，将该图片对应的索引减减，如果此时图片是第一张时，下一次点击显示为最后一张，并且每次点击都要改变小圆圈的状态。

 // 为两个按钮添加鼠标单击响应事件
    // "切换到上一张"按钮
    $(".lr_tab .left").click(function () {
        index--;
        if(index<0){
            // 如果图片到达第一张时，下一次点击从最后一张开始
            index=num-1;
        }
        // $(".item").eq(index).fadeIn().siblings().fadeOut();
        // 将索引为index的图片渐入，其他图片渐出
        $(".item").eq(index).fadeIn().siblings().fadeOut();
        $(".small_btn .btn").eq(index).addClass("active").siblings().removeClass("active");
    });

下一张按钮

与上一张按钮思路相同。

  // "切换到下一张"按钮
    $(".lr_tab .right").click(function () {
        index++;
        if(index>num-1){
            // 如果图片到达最后一张时，下一次单击从第一张开始
            index=0;
        }
        $(".item").eq(index).fadeIn().siblings().fadeOut();
        $(".small_btn .btn").eq(index).addClass("active").siblings().removeClass("active");
    });

创建定时器

创建一个定时器，实现图片的自动轮播，当鼠标放入图片中时，图片暂停自动轮播，即清除定时器即可。

  // 创建一个定时器，实现图片的自动轮播
    var timer=setInterval(function () {
        index++;
        if(index>num-1){
            // 如果图片到达最后一张时，下一次单击从第一张开始
            index=0;
        }
        $(".item").eq(index).fadeIn().siblings().fadeOut();
        $(".small_btn .btn").eq(index).addClass("active").siblings().removeClass("active");
    },2000);

    //设置鼠标放到图片上时暂停自动轮播
    $(".item").hover(function () {
        clearInterval(timer);
    },function () {
        timer=setInterval(function () {
            index++;
            if(index>num-1){
                // 如果图片到达最后一张时，下一次单击从第一张开始
                index=0;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            $(".small_btn .btn").eq(index).addClass("active").siblings().removeClass("active");
        },2000);
    })

效果如下：