WEB大屏广告滚动如何点击按钮立刻切换图片 鼠标离开后继续当前页面自动切换

如何设置点击A时会立即切换，鼠标离开时会继续当前海报向后切换
已经可以实现自动切换海报 点击右下角B圆圈可以快速切换海报 鼠标离开后继续当前页自动切换

已解决

<div id="carousel">
    <div id="poster_img">
        <ul>
            <li>
                <a href="">
                    <img src="images/poster/1.jpg" alt="">
                </a>
            </li>
                <li>
                <a href="">
                    <img src="images/poster/2.jpg" alt="">
                </a>
            </li><li>
                <a href="">
                    <img src="images/poster/3.jpg" alt="">
                </a>
            </li><li>
                <a href="">
                    <img src="images/poster/4.jpg" alt="">
                </a>
            </li><li>
                <a href="">
                    <img src="images/poster/5.jpg" alt="">
                </a>
            </li>
            </ul>
        </div>
        <div id="poster_spot">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div id="poster_cusp">
            <a href="javascript:void(0)" class="cusp_left"><img src="images/left-right.png" alt=""></a>
            <a href="javascript:void(0)" class="cusp_right"><img src="images/left-right.png" alt=""></a>
        </div>
    </div>

$(function(){
    var $poster_spot = $("#poster_spot ul li");
    var ien = $poster_spot.length;
    var index = 0;
    var adTimer = null;
    var newborder = "2px solid rgba(0,0,0,0.4)";
    var newbackground = "rgba(214,214,214,0.4)";
    var oldborder = "2px solid rgba(214,214,212,0.4)";
    var oldbackground = "rgba(0,0,0,0.4)";
    $poster_spot.click(function(){
        $(this).css({border:newborder,
                        background:newbackground})
        .siblings().css({border:oldborder,
                        background:oldbackground})
        index = $poster_spot.index(this);
        showImg(index);
    }).eq(0).click();

    $(".cusp_left").click(function(){
        index -= 1;
        if (index == -1) {index=4}
        showImg(index);
    })

    $(".cusp_right").click(function(){
        index += 1;
        if (index == 5) {index=0}
        showImg(index);
    })

    $("#carousel").hover(function(){  //mouseover时运行的函数
        if (adTimer) {
            clearInterval(adTimer);
        }
    },function(){  //mouseout时运行的函数
        adTimer = setInterval(function(){
            if (index == 0) {showImg(1)};
            if (index == 1) {showImg(2)};
            if (index == 2) {showImg(3)};
            if (index == 3) {showImg(4)};
            if (index == 4) {showImg(0)};
            // showImg(index);
            index++;
            if (index==ien) {index=0;}

        },4000);
    }).trigger("mouseleave");  //页面开始立即触发一次mouseout



    function showImg(index){
    $("#poster_img ul li")
    .eq(index).stop(true,true).fadeIn().siblings().fadeOut();
    $poster_spot.eq(index)
    .css({border:newborder,
        background:newbackground})
    .siblings().css({border:oldborder,
                    background:oldbackground});
}

})

#carousel{
    width: 1226px;
    height: 460px;
    margin: auto;
    position: relative;
    z-index: -1;
}

#poster_img{
    position: absolute;
    z-index: -3;
}

#poster_img ul li a img{
    width: 1226px;
    height: 460px;
    position: absolute;
    left: 0px
    top: 0px;
}

#poster_spot{
    border: 1 solid red;
    position: absolute;
    right: 40px;
    bottom: 30px;
}

.poster_spot{
    border:2px solid rgba(0,0,0,0.4)  !important;  
    background: rgba(214,214,214,0.4)  !important;
}

#poster_spot ul li{
    display: inline-block;
    margin-left: 8px;
}


#poster_spot ul li{
    background: rgba(0,0,0,0.4);
    display: inline-block;
    width: 6px;
    height: 6px;
    border:2px solid rgba(214,214,212,0.4);
    border-radius: 10px;
    text-align: left;
    text-indent: -9999px;
    overflow: hidden;
    transition: all .2s;
    z-index: -2;
    padding: 0px;
    cursor: pointer;
}

#poster_spot ul li:hover{
    border:2px solid rgba(0,0,0,0.4);
    background: rgba(214,214,214,0.4);
}

#poster_cusp{
    height: 0px;
    width: 991px;
    position: absolute;
    right: 0px;
}

#poster_cusp a{
    position: absolute;
    width: 41px;
    height: 69px;
    top: 184px;
    overflow: hidden;
}

.cusp_left{
    left: -1px;
}

.cusp_right{
    right: 0px;
}

.cusp_left img{
    margin-left: -84px;
}

.cusp_left img:hover{
    margin-left: 0px;
}

.cusp_right img{
    margin-left: -126px;
}

.cusp_right img:hover{
    margin-left: -42px;
}

思路大体上这样，开始声明个全局变量，保证鼠标离开时能使动作重新连接，鼠标经过时清除计时器，鼠标离开重启计时器就好了

<script>
    var index = 0;//这个作为全局变量，保证自动轮播时候能连续
    function autoPlay(){
    var timer = setInterval(function(){
        index++;
        //这不细写了，就是根据index切换图片的功能
    },5000)
    };
    autoPlay();
    $(".banner").hover(function(){
    clearInterval(timer);
    };
    autoPlay();
    )

</script>

至于点击小圆点，就是得点击小圆点的时候顺带改变index的值。

大体上我认为你问题都出在鼠标经过事件上了，所以切换图片什么的这功能就不添了

滚动的距离的话就是JS监控浏览器宽度，并乘以index值，大体的思路就是这样，细节肯定需要调整的