求问，jquery的轮播图怎么添加超链接

使用普通的a标签href会导致轮播图效果消失

这是代码，求大佬指点：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/new_file.css">
        <script src="jquery-3.4.1.js" type="text/javascript" charset="UTF-8">
</script>
    </head>
    <body>
        <div>
        

    <div id="box">
        <div id="img">
            <img src="img/1.jpg" alt="" />
            <img src="img/2.jpg" alt="" />
            <img src="img/3.jpg" alt="" />
            <img src="img/4.jpg" alt="" />
        </div>
        <ul id="num">
        </ul>
    </div>
    </div>
    

    
    <script>
//        轮播图
        $(function() {
    init();
    changImg(); //解决第一次第一张到第二张的时间间隔
    start();
});
//初始化
function init() {
    var len = $('#img img').length; //获取图片有多少张
    var html = '';
    //拼html
    for (var i = 0; i < len; i++) {
        html += '<li onmouseover="changImg(' + i +
            ')" onmouseout="reStart(' + i + ')">' + (i + 1) + '</li>';
    }
    //写进ul
    $('#num').html(html);
    //显示第一张图片
    $('#img img').first().css('display', 'block');
    //第一个数字背景颜色
    $('#num li').eq(0).addClass('active');
}
//图片轮播
function changImg(num) {
    if (num == 'auto') { //定时器自动调用
        num = index;
    } else { //鼠标放上的时候 清楚定时器
        clearInterval(timer);
    }
    //链式写法
    $('#img img').eq(num).css('display', 'block').siblings().css('display',
        'none');
    $('#num li').eq(num).addClass('active').siblings()
        .removeClass('active');
    index++;
    if (index == $('#img img').length) { //最后一张
        index = 0; //第一张
    }
}
var index = 0;
var timer; //定时器
//定时器 播放
function start() {
    timer = setInterval('changImg("auto")', 2500);
}
//鼠标离开之后 又要自动播放
function reStart(num) {
    index = num;
    changImg(num);
    start();
}


    </script>
    </body>
</html>

方法有很多啊，不能加a标签的话，直接把链接url加到图片中

然后用jQuery给图片加点击事件  获取图片的url属性在JS中跳转

 <div id="img">
            <img src="img/1.jpg" alt="" url="1.html"/>
            <img src="img/2.jpg" alt="" url="2.html"/>
            <img src="img/3.jpg" alt="" url="3.html"/>
            <img src="img/4.jpg" alt="" url="4.html"/>
        </div>
$("#img img").click(function(){
   location.href = $(this).attr("url");
});

题主意思是如何用jQ创建元素吧，$("a")可以创建啊

方法有很多啊，给图片套个<span url="1.html"> 然后用jQuery给span加点击事件  获取span 的url属性在JS中跳转

 加链接后，DOM结构变了，js代码的DOM关系也要修改过才行，看下面加粗的js语句，改成那样就没问题了【注意css可能也要调整，由于你没发出来，所以具体不清楚要怎么改】。

 

解决了你的疑惑能点个采纳吗，谢谢

 

        //图片轮播
        function changImg(num) {
            if (num == 'auto') { //定时器自动调用
                num = index;
            } else { //鼠标放上的时候 清楚定时器
                clearInterval(timer);
            }
          

            //$('#img img').eq(num).css('display', 'block').siblings().css('display', 'none');
            //====>
            $('#img img').eq(num).css('display', 'block').parent().siblings().find('img').css('display', 'none');

            $('#num li').eq(num).addClass('active').siblings()
                .removeClass('active');
            index++;
            if (index == $('#img img').length) { //最后一张
                index = 0; //第一张
            }
        }

 

img可以直接加链接，需要调整js代码中DOM获取

   <div id="box">
            <div id="img">
                <a href="#"><img src="img/1.jpg" alt="" /></a>
                <a href="#"><img src="img/2.jpg" alt="" /></a>
                <a href="#"><img src="img/3.jpg" alt="" /></a>
                <a href="#"><img src="img/4.jpg" alt="" /></a>
            </div>
            <ul id="num">
            </ul>
        </div>


 

既然 图片外不能加标签，那就直接在图片上加上 url属性 

$("#img img").click(function(){  
   location.href=$(this).attr("url");
});