列表文字与图片相对应，自动循环显示高亮

要实现li与img相对应，并且图片是多个不同的会自动轮播显示，可以使用JavaScript来实现。首先，给每个li添加一个唯一的标识，例如给li添加一个data-index属性，值为对应的img的索引。然后，使用JavaScript来监听img的切换事件，当img切换时，根据当前显示的img的索引，找到对应的li，并给该li添加一个active类名，同时移除其他li的active类名。

1.在HTML中，给每个li添加data-index属性，值为对应的img的索引。

 <h3 style="text-align: center;">新闻</h3>
    <div class="con">
        <div class="img">
            <img class="img-responsive" src="./img/lb/1.png" alt="">
        </div>
        <div class="list">

            <ul>
                <li data-index="0">
                    1111111111111111111111111
                </li>
                <li data-index="1">
                    22222222222222222222222222
                </li>
                <li data-index="2">
                    3333333333333333333333333
                </li>
                <li>
                    4444444444444444444444444
                </li>
                <li>
                    5555555555555555555555555
                </li>
                <li>
                    666666666666666666666666666
                </li>
                <!-- 其他li省略 -->
            </ul>
        </div>
    </div>

2.使用JavaScript来监听img的切换事件。可以使用定时器来实现图片的自动轮播，每隔一段时间切换到下一张图片

var currentIndex = 0; // 当前显示的img的索引
var images = ['./img/lb/1.png', './img/lb/2.png', './img/lb/3.png']; // 图片地址数组

function switchImage() {
    // 切换到下一张图片
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    
    // 切换图片
    var img = document.querySelector('.img img');
    img.src = images[currentIndex];
    
    // 切换li的高亮
    var lis = document.querySelectorAll('.list li');
    for (var i = 0; i < lis.length; i++) {
        if (i === currentIndex) {
            lis[i].classList.add('active');
        } else {
            lis[i].classList.remove('active');
        }
    }
}

// 定时器，每隔一段时间切换图片
setInterval(switchImage, 3000);

3.当用户点击li时，固定到当前li。可以给每个li添加一个点击事件监听器，在点击事件中获取到当前点击的li的data-index属性值，并根据该值切换到对应的img，并给该li添加active类名。

var lis = document.querySelectorAll('.list li');
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function() {
        // 获取当前点击的li的data-index属性值
        var index = this.getAttribute('data-index');
        
        // 切换到对应的img
        var img = document.querySelector('.img img');
        img.src = images[index];
        
        // 给当前点击的li添加active类名
        this.classList.add('active');
        
        // 移除其他li的active类名
        for (var j = 0; j < lis.length; j++) {
            if (j !== index) {
                lis[j].classList.remove('active');
            }
        }
    });
}

通过以上步骤，就可以实现li与img的相对应，并且在图片切换时，li也会切换高亮。当用户点击li时，会固定到当前li，移除时再次自动轮播。在项目中，可以将以上代码添加到页面的JavaScript文件中，并在页面加载时执行，以实现图片轮播和li的切换效果。同时，将图片地址数组images替换为项目中实际的图片地址，以实现多个不同的图片自动轮播显示。

效果图：