jQuery实现banner换背景图片（非图片轮播图）

html:

<div id="My_supersilde">
    <!-- banner -->
    <ul id="list-img">
        <li data-image="images/nth1.jpg"><a href=""></a></li>
        <li data-image="images/nth1.jpg"><a href="one_paper.html"></a></li>
        <li data-image="images/nth1.jpg"><a href=""></a></li>
        <li data-image="images/nth1.jpg"><a href=""></a></li>
        <li data-image="images/nth1.jpg"><a href="page_nth5.html"></a></li>
        <li data-image="images/nth1.jpg"><a href="page_nth6.html"></a></li>
    </ul>
    <div id="hover-list">
        <ul>
            <li class="on"><a href="" title="网站改版">网站改版</a></li>
            <li><a href="one_paper.html" title="移动版本">移动版本</a></li>
            <li><a href="" title="预约理财">预约出借</a></li>
            <li><a href="" title="合同存证">合同存证</a></li>
            <li><a href="page_nth5.html" title="票据理财">票据出借</a></li>
            <li><a href="page_nth6.html" title="邀请奖励">邀请奖励</a></li>
        </ul>
    </div>
    <div class="btn-arrow">
        <a href="javascript:void (0);" id="prev" class="arrow arrow-prev"></a>
        <a href="javascript:void (0);" id="next" class="arrow arrow-next"></a>
    </div>
</div>

css:

#My_supersilde {position: relative;width: 100%;height: 400px}
#list-img {position: absolute;width: 100%;height: 400px;}
#list-img li {width: 100%;height: 100%;display: none;background:center 0 no-repeat;position: absolute;left: 0;top: 0}
#list-img li a{display: block;width: 100%;height: 100%}
#list-img li.on{display: block;}
#hover-list {position: absolute;bottom: 0;left: 0px;right: 0;z-index: 2;text-align: center;width: 1180px;margin: auto}
#hover-list ul {margin-left: 350px;}
#hover-list li {line-height: 30px;padding: 5px 15px;background-color: rgba(0,0,0,0.5);font-size: 14px;margin-right: 20px;border-radius: 4px 4px 0px 0px;}
#hover-list li a{color: #ffffff;}
#hover-list li+li{margin-left: 5px}
#hover-list li.on {background-color: rgba(0,0,0,0.8);}
#hover-list li.on a{color: #fc4d4d;}
.btn-arrow{width: 1200px;margin:auto;position: absolute;top: 60%;left: 0;right: 0}
@media (max-width: 1400px){
    .btn-arrow{display: none}
}
.arrow {position: absolute;top: 50%;margin-top: -25px;z-index: 2;display: none;width: 50px;height: 50px;cursor: pointer;transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s}
.arrow.arrow-prev{background: url(../images/jiantou-L.png) -70px 0 no-repeat;left: -100px}
.arrow.arrow-next{background: url(../images/jiantou.png) no-repeat;right: -100px}
.arrow.arrow-prev:hover{background-position: 0 0}
.arrow.arrow-next:hover{background-position: -70px 0}
#My_supersilde:hover .arrow {display: block;}

jQuery:

(function () {
    var i = 0;
    var My_supersilde = $("#My_supersilde");
    var Size = $("#list-img li").size();
    var list_img = $("#list-img li");
    var $Num_li = $("#hover-list ul li");
    var data_image = list_img.eq(0).attr("data-image");
    var $prev = $("#prev");
    var $next = $("#next");
    list_img.eq(0).css("background-image", "url(" + data_image + ")").addClass("on");
    $Num_li.each(function (j) {
        $(this).mouseenter(function () {
            var data_image2 = list_img.eq(j).attr("data-image");
            list_img.eq(j).css("background-image", "url(" + data_image2 + ")").addClass("on").siblings().removeClass("on");
            $(this).addClass("on").siblings().removeClass("on");
            i = j
        })
    });
    var time = setInterval(toggle, 4000);

    function toggle() {
        i++;
        if (i === Size) {
            i = 0
        }
        var data_image2 = list_img.eq(i).attr("data-image");
        $Num_li.eq(i).addClass("on").siblings().removeClass("on");
        list_img.eq(i).addClass("on").css("background-image", "url(" + data_image2 + ")").siblings().removeClass("on")
    }

    function toggle_change() {
        i--;
        if (i === -1) {
            i = Size - 1
        }
        var data_image2 = list_img.eq(i).attr("data-image");
        $Num_li.eq(i).addClass("on").siblings().removeClass("on");
        list_img.eq(i).addClass("on").css("background-image", "url(" + data_image2 + ")").siblings().removeClass("on")
    }

    My_supersilde.mouseover(function () {
        clearInterval(time)
    });
    My_supersilde.mouseout(function () {
        time = setInterval(toggle, 4000)
    });
    $prev.click(function () {
        toggle_change()
    });
    $next.click(function () {
        toggle()
    })
})();