润如玉 2022-05-08 13:03 采纳率: 66.7%
浏览 20
已结题

如何使用jquery实现轮播图啊?

1图片的展示是滚动出现的
2有点击数字控制页面左右展示
3可左右按钮控制滚动
目前我只实现了数字滚动,刚开始提问题,发的图片发不出来 谢谢您的帮助🌹

  • 写回答

1条回答 默认 最新

  • 吕布辕门 后端领域新星创作者 2022-05-08 13:51
    关注

    如有帮助,请采纳一下,谢谢!如有不清楚可以在问额。

    1、在一个区域内,设置宽高,超出这部分区域就要实现一个隐藏

    2、获取图片的大小 为300,索引从0开始

    3、当你点击右边的按钮时候,就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px

    4、当他实现滑动的时候,加一个animate动画的效果,就欧了

    5、右边的效果和左边的一样,都是同理

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播图</title>
        <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .uli{
                width: 300px;
                height: 300px;
                display: flex;
                overflow: hidden;
            }
            .uli li>img{
                position: relative;
                left: 0px;
                top: 0px;
                height: 300px;
            }
            .uli li{
                width: 300px;
                height: 300px;
                list-style:none;
            }
            .a1{
                position: absolute;
                top: 100px;
                left: 0;
                cursor: pointer;
                font-size: 50px
            }
            .a2{
                position: absolute;
                top: 100px;
                left: 260px;
                cursor: pointer;
                font-size: 50px
            }
        </style>
    </head>
    <body>
        <!-- 设置ul li 中 图片的数量 饮料的数量-->
        <ul class="uli">
            <li><img src="./img/大冰红茶.png" alt=""></li>
            <li><img src="./img/大蜂蜜绿茶.png" alt=""></li>
            <li><img src="./img/大龙井绿茶.png" alt=""></li>
        </ul>
        <!-- 两个 div 中的 span 控制右边的便签和左边的标签为点击事件 -->
        <div class="pa1"> 
            <span class="a1"><</span>
            <span class="a2">></span>
        </div>
        <script type="text/javascript">
        // 写一个入口函数
            $(function(){
                // 设置图片的大小
                var img = 300;
                // 设置索引为 0 
                var index = 0;
                // 设置图片的数量的长度
                var option = $('.uli>li img').length;
                // 左边部分开始
                $('.a2').click(function(){
                    // 再点击事件里面执行回调函数
                    left()
                })
                // 函数名称 lest 
                function left(){
                    // index的索引值为 0 当他小于图片的长度的时候 就让他执行 ++ option要执行减 1 否则会有一张空白的页面
                   if (index < option-1) {
                         index++
                    }else {
                        index = 0
                    }
                    move()
                }
                // 左边部分结束
                // 右边部分开始
                $('.a1').click(function(){
                    // 再点击事件里面执行回调函数
                    right()
                })
                function right(){
                    // index的索引值为 0 当他大于图片的长度的时候 就让他执行 -- 
                    if (index > 0) {
                        index--
                    }else {
                        index = option-1
                    }
                    move()
                }
                // right left函数里面都有 move 就等于你点击你的 index 索引的时候为多少数值就会有几个图片滑过  500 为时间
                function move(){
                   var a = -index * img + 'px'
                   $('.uli li>img').animate({'left':a},500)
                }
            })
        </script>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 5月16日
  • 已采纳回答 5月8日
  • 创建了问题 5月8日

悬赏问题

  • ¥15 MATLAB代码求涡量
  • ¥100 采用栈和深度优先算法对我的代码进行修改显示路径
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)
  • ¥50 如何利用无人机拍摄的数码照片测量鸟卵的长短径
  • ¥100 github贡献者给与奖励
  • ¥15 使用DS18B20+ESP8266获取温度数据返回-127.00
  • ¥15 odbc代码新增sqlserver数据源