如何用jQuery语言写轮播图

不爱吃糖的程序媛

发布于 2024-01-18 19:47:45

1710

发布于 2024-01-18 19:47:45

轮播效果：点击下一个按钮跳转到下一张图片，点击上一个按钮跳转到上一个图片；鼠标移进图片轮播停止，鼠标移出则自动轮播。 1.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #container {
            width: 1000px;
            height: 380px;
            position: relative;
            margin: 20px auto;
            overflow: hidden;
        }
        #list {
            width: 7000px;
            height:380px;
            position: absolute;
            z-index: 1;
        }
        #list img {
            float: left;
            display: block;
        }
        #pre {
            background: url(../images/左箭头.png) no-repeat;
            width: 30px;
            height: 30px;
            float: left;
            position: absolute;
            top: 190px;
            left: 10px;
            cursor: pointer;
            display: none;
            z-index: 999;
        }
        #next {
            background: url(../images/右箭头.png) no-repeat;
            width: 30px;
            height: 30px;
            float: right;
            position: absolute;
            top: 190px;
            right: 10px;
            cursor: pointer;
            display: none;
            z-index: 999;
        }
        #container:hover #pre,
        #container:hover #next {
            display: block;
        }
        #pre:hover,
        #next:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
        #dot {
            width: 1000px;
            height: 10px;
            position: absolute;
            bottom: 15px;
            left: 450px;
            z-index: 10;
        }
        #dot span {
            width: 10px;
            height: 10px;
            display: block;
            border-radius: 10px;
            background-color: #fff;
            margin: 0 5px;
            float: left;
            cursor: pointer;
        }
        #dot .on {
            background-color: #69aaec;
        }
    </style>
</head>
    <!-- js代码 -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        window.onload=()=>{
        //定义变量
        //注意选择器的。或者#
        let container=$("#container");
        let pre_btn=$("#pre");
        let next_btn=$("#next");
        let list=$("#list");
        let dots=$("#dot span");
        let index=0;//图片的下标
        let int=null;//int是什么：接收定时器返回的数值
      //总：先写事件，后写方法
    //   1.下一个按钮的事件
    //   2.上一个按钮事件
    //   3.小圆点点击事件
    //   4.鼠标移动图片悬停事件
    //   5.核对小圆点与图片对应的方法
    //   6.图片自动轮播的方法

        //下一张图片的按钮的点击事件
        next_btn.click(function(){
            // $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true
            console.log($('#list').is(':animated'))
            if($('#list').is(':animated')){
               return false;
            }
          
            //判断下一张图片往左走
            index=++index>4?0:index;
            //此处的-1000的负号是代表往左走
           let new_left=-1000*index;
            //判断好了就实行动画方法，让它动！
           list.animate({"left":new_left+'px'},1000,checkDots);
        })

      //上一张图片的按钮的点击事件
      pre_btn.click(function(){
            // $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true
            console.log($('#list').is(':animated'))
            if($('#list').is(':animated')){
                return false;
            }
            //判断图片的逻辑
            index=--index<0?4:index;
            //生成新的图片位置
            let new_left=-1000*index;
            //谁动起来
            list.animate({"left":new_left+'px'},1000,checkDots);
      })

      //小圆点点击,对应图片事件
       dots.click(function(){
            // $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true
            if ($('#list').is(':animated')) {
                    return false;
                }
            //小圆点当前点击，用数组包起来
            index=$(this).attr("data-index");
            let new_left=-1000*index;
            list.animate({"left":new_left+'px'},1000,checkDots)
            //小圆点点击后，怎么移动的
       })
      
      //鼠标点击容器，图片悬停事件
           container.hover(function(){
                //鼠标移进去的时候清除定时器
                clearInterval(int)
               
           },function(){
                //鼠标移出去的时候自动播放动画
                autoPlay();
           })
         
          
     //检查是否对应焦点方法
     let checkDots=function(){
         //每滑动一次删除掉原来的小圆点类
         dots.removeClass("on");
         //再添加新的图片对应的小圆点
         dots.eq(index).addClass("on");
     }
      //自动轮播方法
     function autoPlay(){
         int =setInterval(function(){
             next_btn.click();
         },2000)
     }
    }
    </script>
<body>
<div id="container">
    <div id="pre"></div>
    <div id="next"></div>
    <div id="list" style="left:0px">
        <a href="#"><img src="../images/ts-01.jpg" width="1000"></a>
        <a href="#"><img src="../images/ts-02.jpg" width="1000"></a>
        <a href="#"><img src="../images/ts-03.jpg" width="1000"></a>
        <a href="#"><img src="../images/ts-04.jpg" width="1000"></a>
        <a href="#"><img src="../images/ts-01.jpg" width="1000"></a>
    </div>
    <div id="dot">
        <span data-index="0" class="on"></span>
        <span data-index="1"></span>
        <span data-index="2"></span>
        <span data-index="3"></span>
        <span data-index="4"></span>
    </div>
</div>
</body>
</html>

2.展示效果