润如玉 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 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误