润如玉 2022-05-13 18:41 采纳率: 66.7%
浏览 28
已结题

使用jQuery实现轮播图左右按钮与数字按钮相互抵制,只能实现一个功能是为什么?

问题遇到的现象和发生背景

在实现轮播图滚动时,用左右按钮控制滚动再点数字按钮就会出现白屏,只有数字按钮发生变化,而图片不发生变化
以下是我的代码

问题相关代码,请勿粘贴截图
<!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">
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<title>jquery轮播图</title>
 <style>
 *{
     padding: 0%;
     margin: 0%;
 } 
 .uli{
     width:1000px;
     height:400px;
     display: flex;
     overflow: hidden;
    }
        .uli li>img{
            position: relative;
            left: 0px;
            top: 0px;
            height: 400px;
        }
        .uli li{
            width:1000px;
            height: 400px;
            list-style:none;
        }
       
       #images{
            width:1000px;
            height: 400px;
            left:0;
            position:absolute;
        }   

     .square{/*数字按钮格式*/
    position: absolute;
    right: 700px;
    top: 400px;
         }
     .square span{
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 5px;
    background-color: #fff;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
         }
      .square span.current{  
            background-color: #ebcde3;
    color: #fff;
         }
        .left{/*左按钮格式*/
            position: absolute;
            top: 200px;
            left: 8px; 
            color: #c06fad;
            border-radius:2em;
            background-color: #ebcde3;
            cursor: pointer;
            font-size: 40px
        }
        .right{/*右按钮格式*/
            position: absolute;
            top: 200px;
            right: 8px;
            color: #c06fad;
            border-radius:2em;
            background-color: #ebcde3;
            cursor: pointer;
            font-size: 40px;
            
        }
         
 </style> 
</head>
<body>
    <div id="scroller">
        <div id="images">
    <ul class="uli" > 
      <li><img id="img1" src="./ima/1.jpg"> </li>
      <li><img src="./ima/2.jpg"> </li>
      <li><img src="./ima/3.jpg"> </li>
      <li><img src="./ima/4.jpg"> </li> 
    </ul>
        </div>
        <div class="square" id="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
    </div>
    <div class="pa1"> 
        <span class="left"><</span>
        <span class="right">></span>
    </div>
    <script type="text/javascript">
        $(function(){
            slide();
            timer=setInterval(function(){
                autoloop();
            },1000);
            $("#scroller").hover(function () {
          clearInterval(timer);
       },
       function () {
          //当鼠标移出图片的时候继续动画
          timer = setInterval(function () {
             autoloop();
          },3000);
       })
    });
    // 写一个入口函数
        $(function(){
            // 设置图片的大小
            var img = 1000;
            // 设置索引为 0 
            var index = 0;
            // 设置图片的数量的长度
            var option = $('.uli>li img').length;
            // 左边部分开始
            $('.right').click(function(){
                // 再点击事件里面执行回调函数
                left();
            })
            // 函数名称 left
            function left(){
                // index的索引值为 0 当他小于图片的长度的时候 就让他执行 ++ option要执行减 1 否则会有一张空白的页面
               if (index < option-1) {
                     index ++;
                }else {
                    index = 0;
                }
                move();
            }
            // 左边部分结束
            // 右边部分开始
            $('.left').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},3000)
            }
        })
    
    function slide() {
       $("#square span").click(function () {
          //当前被点击的索引
          var index = $(this).index();
          // 当前被激活的颜色
          $(this).addClass("current")
              .siblings("span").removeClass("current");
          //当前被点击的图片索引显示,其它的隐藏
          $("#images li").eq(index).show().siblings("li").hide();
          //记住当前被点击的图片,向右顺序轮播
          loopIndex = index;
       });
    }
    
    function autoloop() {
       loopIndex++;
       //边界判断
       if ( loopIndex == $("#images li").length){
          loopIndex = 0;
       }
       $("#square span").eq(loopIndex).addClass("current")
           .siblings("span").removeClass("current");
       $("#images li").eq(loopIndex).show().siblings("li").hide();
    }
    </script>

</body>
</html>

会出现白屏,只剩下按钮 没有照片了 ,please

  • 写回答

2条回答 默认 最新

  • 关注
    
    <!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">
        <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
        <title>jquery轮播图</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
                border: 0;
            }
    
            .all {
                width: 500px;
                height: 200px;
                padding: 7px;
                border: 1px solid #ccc;
                margin: 100px auto;
                position: relative;
            }
    
            /* 1.包裹的容器样式 */
            .screen {
                width: 500px;
                height: 200px;
                /* 设置一个包裹轮播图的盒子 并且设置固定宽高 超出部分 hidden */
                overflow: hidden;
                position: relative;
            }
    
            /* 2.轮播图列表的样式 */
            .screen li {
                width: 500px;
                height: 200px;
                overflow: hidden;
                /* li设置浮动使得 li在一排显示 */
                float: left;
            }
    
            /* 定位属性 left */
            .screen ul {
                position: absolute;
                left: 0;
                top: 0px;
                /* 要设置足够的宽容纳下所有的li(就是大于等于 所有li加起来的宽度) */
                width: 3000px;
            }
    
            /* 3.导航点的样式 */
            .all ol {
                position: absolute;
                right: 10px;
                bottom: 10px;
                line-height: 20px;
                text-align: center;
            }
    
            .all ol li {
                float: left;
                width: 20px;
                height: 20px;
                background: #fff;
                border: 1px solid #ccc;
                margin-left: 10px;
                cursor: pointer;
            }
    
            /* 4.导航点高亮效果 */
            .all ol li.current {
                background: yellow;
            }
    
            /* 5.左右按钮 */
            #arr span {
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #000;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #fff;
                opacity: 0.3;
                border: 1px solid #fff;
            }
    
            #arr #right {
                right: 5px;
                left: auto;
            }
    
        </style>
    </head>
    
    <body>
        <div class="all" id='all'>
            <div class="screen" id="screen">
                <ul id="ul">
                    <li><img src="ima/1.jpg" width="500" height="200" /></li>
                    <li><img src="ima/2.jpg" width="500" height="200" /></li>
                    <li><img src="ima/3.jpg" width="500" height="200" /></li>
                    <li><img src="ima/4.jpg" width="500" height="200" /></li>
                    <li><img src="ima/5.jpg" width="500" height="200" /></li>
                    <!-- 轮播图片需要追加一张图片和第一张一样的用来过渡 -->
                    <!-- 当轮播到这最后一张时,把定位的left属性设置为0px 回到第一张 由于是瞬间回到的 所以看不出特别的明显-->
                    <li><img src="ima/1.jpg" width="500" height="200" /></li>
                </ul>
                <!-- 导航点 -->
                <ol>
                    <li class="current">1</li>
                    <li class="">2</li>
                    <li class="">3</li>
                    <li class="">4</li>
                    <li class="">5</li>
                </ol>
                <!-- 左右按钮 -->
                <div id="arr">
                    <span id="left"></span>
                    <span id="right">></span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                // 需求:
                // 1.完成轮播图的布局(垂直)
                // 2.左侧用于显示缩略图
                // 3.图片自动切换(无缝衔接)
                // 4.缩略图跟随切换
    
                // 编码:
                // 定义属性记录值
                // 图片索引值
                var index = 0;
    
                // 导航点索引值
                var square = 0;
    
                // 定时器变量
                var timer = null;
    
                // 获取一张图片的宽,在变换left值的时候用
                var width = $(".screen")[0].offsetWidth;
                // console.log(width); // 测试能不能获取
    
                // 轮播图片数量
                var Ulen = $("#ul li").length;
                // console.log(Ulen);   //测试 
    
                // 导航点数量
                var Clen = $(".screen ol li").length;
                // console.log(Clen);   //测试
    
                // 编写函数 实现图片自动播放切换原理
                var autoPlay = function () {
                    // 图片索引值自增
                    index++;
                    console.log(index);
                    // 判断,因为index是从0开始的(0-5),Ulen值为6,所以需要减 1 
                    if (index > Ulen - 1) {
                        // 给index赋值切换回第2张,当索引值index到最后一张图片之后,已经马上跳回第一张了,但是肉眼感觉不出来
                        index = 1;
                        // 设置承载图片的容器ul的left为0 是第一张 这个是在过渡的时候瞬间回到第一张的
                        // 第一张和最后一张图片是一样的 所以不是特别看得出来
                        $("#ul").css("left", 0);
                    }
                    // 动画切换下一个图片,图片从左往右 所以left值是﹣的
                    // 索引值代表图片个数 width代表一张图片宽度,相乘就可以求出到第几张图片
                    $("#ul").animate({ left: -(index * width) }, 500)
                    // 导航点索引值自增
                    square++;
                    // 判断,当导航点索引值到最后一个点时,切换回第一个
                    if (square > Clen - 1) {
                        // 给square赋值0
                        square = 0;
                    }
                    // 切换小图边框高亮,给当前的square值设置高亮 其它的移除,
                    // 已经设置好样式 直接添加类名就行
                    $(".screen ol li").eq(square)
                        .addClass("current")
                        .siblings()
                        .removeClass("current");
                }
    
                // 测试
                // autoPlay();
    
                // 执行定时器函数,实现自动播放
                timer = setInterval(function () {
                    autoPlay();
                }, 1500);
    
                // 鼠标移入移出导航点,hover方法,有两个函数,分别是鼠标移进去和移出来
                $(".screen ol li").hover(
                    // 鼠标移入导航点停止执行动画
                    function () {
                        clearInterval(timer);
                    },
                    // 鼠标移出导航点继续执行动画
                    function () {
                        timer = setInterval(function () {
                            autoPlay();
                        }, 1500);
                    }
                )
    
                //点击导航点切换图片和导航点高亮
                $(".screen ol li").bind("click", function () {
                    // this指向绑定点击事件的对象,获取的是点击哪一个的下标
                    var _index = $(this).index();
                    // console.log(index);  // 测试输出
                    // 把获取的值分别赋给图片和导航点
                    index = _index;
                    square = _index;
                    // 高亮的导航点
                    $(".screen ol li").eq(square)
                        .addClass("current")
                        .siblings()
                        .removeClass("current");
                        // 显示的图片
                    $("#ul").animate({ left: -(index * width) }, 500)
                })
    
                // 左右按钮
                // 左按钮
                $("#left").on("click", function () {
                    // 判断定时器是否在执行,在执行的话取消定时器
                    if (timer) {
                        clearInterval(timer);
                    }
                    // 索引值自减
                    index--;
                    // 当索引值是在第一个的时候,值直接切换成最后一个,这里的最后一个不包括用来过渡和第一张一样的那张图片,因此index为 4
                    if (index < 0) {
                        index = 4;
                        // 切换到最后一张图片
                        $("#ul").css({ "left": "-2500px" });
                    }
                    // 当index >= 0 时 正常执行切换
                    $("#ul").animate({ left: -(index * width) })
                    // 导航点索引值自减
                    square--;
                    // 三目运算符判断是否 < 0
                    square = square < 0 ? 4 : square;
                    // 设置高亮
                    $(".screen ol li").eq(square)
                        .addClass("current")
                        .siblings()
                        .removeClass("current");
                })
    
                $("#right").on("click", function () {
                    if (timer) {
                        clearInterval(timer);
                    }
                    index++;
                    // 012345 当在最后一张图片时瞬间切换的第二张图片 index = 1
                    if (index > 5) {
                        index = 1;
                        // 跳回一张
                        $("#ul").css({ "left": "0px" });
                    }
                    $("#ul").animate({ left: -(index * width) })
                    square++;
                    square = square > 4 ? 0 : square;
                    $(".screen ol li").eq(square)
                        .addClass("current")
                        .siblings()
                        .removeClass("current");
                })
            })
        </script>
    
    </body>
    
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月23日
  • 已采纳回答 5月15日
  • 创建了问题 5月13日

悬赏问题

  • ¥15 powerbuilder出现这样的报错
  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上