dfssdfdsdfd 2021-12-09 19:09 采纳率: 97.6%
浏览 36
已结题

谁帮我看一下，js的，为什么点击轮播图点不了，好的必采纳





<!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 src="jquery-3.6.0.js"></script>
    <title>Document</title>
<style>
    #jnImageroll{
        height: 320px;
        overflow: hidden;
        position: relative;
        width: 550px;
        margin: 0 auto;
    }
    #jnImageroll img{
        position: absolute;
        left: 0;
        top: 0;
    }
    .dot{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        font-size: 0;
        margin-left: -40px;
    }
    .dot li{
        display: inline-block;
        margin: 0 5px;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: rgba(145,144,144, .8);
        cursor: pointer;
    }
    .dot .on{
        background-color: #fff;
    }
    .arrow{
        display: none;
    }
    .arrow span{
        display: block;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0);
        color: #fff;
        text-align: center;
        font-size: 40px;
        line-height: 50px;
        cursor: pointer;
    }
    .arrow .prev{
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -50px;
    }
    .arrow .next{
        position: absolute;
        right: 0;
        top:50%;
        margin-top: -50px;
    }

</style>
</head>
<body>
    <div id="jnImageroll">
        <a href="#nogo" id="JS_imgWarp">
            <img src="images/1.jpg" alt="相约情人节">
            <img src="images/2.jpg" alt="新款上线">
            <img src="images/xiyangyangshangdiao.png" alt="愤怒的小鸟特卖">
            <img src="images/xiyangyangjianjie.jpeg" alt="男鞋促销">
            <img src="images/xiyangyang.jpeg" alt="春季新品发布">
        </a>
        <ul class="dot">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="arrow"><span class="prev">&lt;</span><span class="next">&gt;</span></div>
    </div>
    <script>
        $(function () {
            var $imgrolls=$("#jnImageroll ul li");
            var len=$imgrolls.length;
            var index=0;
            var adTimer=null;
            $('#jnImageroll').hover(function(){
                $('.arrow').show();
            },function(){
                $('.arrow').show();
            });
            $('.prev').click(function(){
                index--;
                if(index<0){index=len-1}
                showImg(index);
            });
        

        function showImg(index){
            var $rollobj=$('#jnImageroll');
            var $rolllist=$rollobj.find("ul li");
            var newhref=$rolllist.eq(index).attr("href");
            $("#JS_imgWrap").attr("href",newhref)
                .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
            $rolllist.removeClass("on")
                .eq(index).addClass("on");
        }

        $imgrolls.mouseover(function(){
            index=$imgrolls.index(this);
            showImg(index);
        }).eq(0).mouseover();

        $('#jnImageroll').hover(function(){
            if(adTimer){
                clearInterval(adTimer);
            }
        },function(){
            adTimer=setInterval(function(){
                showImg(index);
                index++;
                if(index==len){index=0;}
            },3000);
        }).trigger("mouseleave");
        })
    </script>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-09 20:36
    关注
     
 
<!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 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
<style>
    #jnImageroll{
        height: 320px;
        overflow: hidden;
        position: relative;
        width: 550px;
        margin: 0 auto;
    }
    #jnImageroll img{
        position: absolute;
        left: 0;
        top: 0;
    }
    .dot{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        font-size: 0;
        margin-left: -40px;
    }
    .dot li{
        display: inline-block;
        margin: 0 5px;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: rgba(145,144,144, .8);
        cursor: pointer;
    }
    .dot .on{
        background-color: #fff;
    }
    .arrow{
        display: none;
    }
    .arrow span{
        display: block;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0);
        color: #fff;
        text-align: center;
        font-size: 40px;
        line-height: 50px;
        cursor: pointer;
    }
    .arrow .prev{
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -50px;
    }
    .arrow .next{
        position: absolute;
        right: 0;
        top:50%;
        margin-top: -50px;
    }
</style>
</head>
<body>
    <div id="jnImageroll">
        <a href="#nogo" id="JS_imgWarp">
            <img class="img" src="https://img0.baidu.com/it/u=1718241065,2019855389&fm=26&fmt=auto" alt="相约情人节">
            <img class="img" src="https://img2.baidu.com/it/u=2260303532,2183863165&fm=26&fmt=auto" alt="新款上线">
            <img class="img" src="https://img0.baidu.com/it/u=2201225864,2449795080&fm=26&fmt=auto" alt="愤怒的小鸟特卖">
            <img class="img" src="https://img1.baidu.com/it/u=3352713640,4164566572&fm=26&fmt=auto" alt="男鞋促销">
            <img class="img" src="https://img2.baidu.com/it/u=3925758292,293196376&fm=26&fmt=auto" alt="春季新品发布">
        </a>
        <ul class="dot">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="arrow"><span class="prev">&lt;</span><span class="next">&gt;</span></div>
    </div>
    <script>
        $(function () {
            var $imgrolls=$("#jnImageroll ul li");
            var len=$imgrolls.length;
            var index=0;
            var adTimer=null;
            $('#jnImageroll').hover(function(){
                $('.arrow').show();
            },function(){
                $('.arrow').show();
            });
            $('.prev').click(function(){
                if(index === 0){
                    index = len-1
                }else{
                    index--
                }
                console.log(len,index)
    //             index--;
                
    //             if(index<0){index=len-1}
                showImg(index);
            });
        
        
        //获取轮播的图片数组
        var img=document.getElementsByClassName('img');//获取select对象
        let imgarr = []
        let optionArrStr = []
         //获取选项的值
        for(let i=0;i<img.length;i++){
            imgarr.push(img[i].src) 
        }
 
        function showImg(index){
            var $rollobj=$('#jnImageroll');
            var $rolllist=$rollobj.find("ul li");
            var newhref=imgarr[index]
            console.log(newhref)
            $(".img").attr('src',newhref)
            $("#JS_imgWrap").attr("href",newhref).stop(true,true).fadeIn().siblings().fadeOut();
                // .find("img").eq(index)
            $rolllist.removeClass("on")
                .eq(index).addClass("on");
        }
        
        $imgrolls.mouseover(function(){
            index=$imgrolls.index(this);
            showImg(index);
        }).eq(0).mouseover();
        
        $('#jnImageroll').hover(function(){
            if(adTimer){
                clearInterval(adTimer);
            }
        },function(){
            adTimer=setInterval(function(){
                showImg(index);
                index++;
                if(index==len){index=0;}
            },3000);
        }).trigger("mouseleave");
        })
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 12月17日
  • 已采纳回答 12月9日
  • 创建了问题 12月9日

悬赏问题

  • ¥15 poi合并多个word成一个新word,原word中横版没了.
  • ¥15 【火车头采集器】搜狐娱乐这种列表页网址，怎么采集？
  • ¥15 求MCSCANX 帮助
  • ¥15 机器学习训练相关模型
  • ¥15 Todesk 远程写代码 anaconda jupyter python3
  • ¥15 我的R语言提示去除连锁不平衡时clump_data报错，图片以下所示，卡了好几天了，苦恼不知道如何解决，有人帮我看看怎么解决吗？
  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数，无法执行二选一查询
  • ¥15 液位控制，当液位超过高限时常开触点59闭合，直到液位低于低限时，断开
  • ¥15 marlin编译错误，如何解决？