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

使用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条回答 默认 最新

相关推荐 更多相似问题