轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

伦为JAY下囚

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量452

点赞数

分类专栏：语法前端文章标签：前端 jQuery

本文链接：https://blog.csdn.net/HJay_Chou/article/details/100810015

版权

前端同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

语法

6 篇文章 0 订阅

订阅专栏

轮播图

布局
实现

布局

利用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);
    })

效果如下：
在这里插入图片描述

伦为JAY下囚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图

轮播图布局实现入口函数小圆点切换实现上一张按钮下一张按钮创建定时器布局利用jQuery实现小米轮播图效果。实现该效果由三部分组成：图片、切换上一张和下一张按钮以及图片下方小圆点。在实现过程中，添加了定时器，开始时，图片自动的从右到左切换，底下的小圆点也在相对于的切换，点击上一张或者下一张按钮的时候，图片和小圆点也在对于的切换。布局与样式代码如下：HTML<body> ...
复制链接

扫一扫