jquery图片滚动插件制作焦点图片滚动或列表图片滚动

这次我们来说说网页上的Banner，网页上的Banner因为其动态的效果和处于整个页面的中心，所以可以更好的体现网页的中心意旨，起到很好的表达宣传效果。使用户的体验得到更好的提升，当前流行的网页上几乎都有Banner。而Banner的形式有很多种，下面就是我实现的其中一种（如文章标题）：

css样式代码如下：

<style type="text/css">
    *{  margin: 0px;padding: 0px }

    #banner{width: 1000px;height: 400px;background-color: #94c2fa;margin: 100px auto 0;position: relative;  }

    #banner:hover .prev{display: block}

    #banner:hover .next{display: block}

    .banner_main{  width: 1000px;  height: 400px;   }

    .banner_ul li{  list-style: none;  width: 1000px;  height: 400px;  position: absolute;  }

    .banner_ul li img{  width:1000px;  height: 400px;  }

    .banner_span{  width: 1000px;  height: 35px; z-index: 1;bottom: 10px;position: absolute }

    .banner_span p{  width: 100px;  height: 35px;  margin: 0 auto;  }

    .banner_span p span{ width: 15px; height: 15px;background: url("dot.png") no-repeat left bottom;
        float: left;margin: 10px 4px;}

    .prev{width:60px;height:90px;background:url("ad_ctr.png") no-repeat
    5px  -180px;position: absolute; top:50%;margin-top: -45px;display: none;
        cursor: pointer;}

    .prev:hover{background: url("ad_ctr.png") no-repeat 5px top}

    .next{width:60px;height:90px;background:url("ad_ctr.png") no-repeat
    -5px  bottom;position: absolute;top: 50%;margin-top: -45px;right: 0;display: none;
        cursor: pointer;}

    .next:hover{background: url("ad_ctr.png") no-repeat -3px -88px}

    .banner_span .active{background: url("dot.png") no-repeat left top;}
</style>

web界面代码如下：

<!--banner start-->
<div id="banner">
    <!--banner_main start-->
    <div class="banner_main">
        <!--banner_ul start-->
        <ul class="banner_ul">
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="2.jpg"></a></li>
            <li><a href="#"><img src="3.jpg"></a></li>
            <li><a href="#"><img src="4.jpg"></a></li>
        </ul>
        <!--end banner_ul-->
    </div>
    <!--end banner_main-->
    <!--banner_span start-->
    <div class="banner_span">
        <p>
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
    <!--end banner_span-->
    <p class="prev"></p>
    <p class="next"></p>
</div>
<!--end banner-->
js代码如下：
<script  type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        var index=0;
        var interval=null;
        var num=$(".banner_span span").length;
        $(".banner_ul li:gt(0)").hide();
        $(".banner_span span").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index1=$(".banner_span span").index(this);

            $(".banner_ul li").eq(index1).fadeIn("slow").siblings().fadeOut("slow");
            index=index1;
        });
        $(".prev").click(function () {
            if(index==0){
                index=num;
            }
            $(".banner_ul li").eq(index-1).fadeIn().siblings().fadeOut();
            $(".banner_span span").eq(index-1).addClass("active").siblings().removeClass("active");
            index--;
        });
        $(".next").click(function () {
            if(index==num-1){
                index=-1;
            }
            $(".banner_ul li").eq(index+1).fadeIn().siblings().fadeOut();
            $(".banner_span span").eq(index+1).addClass("active").siblings().removeClass("active");
            index++;
        });
        function autoPlay() {
            interval=setInterval(function () {
                autoPlayNext();
            },2000)
        }

        function autoPlayNext() {
            if(index==num-1){
                index=-1;
            }
            $(".banner_ul li").eq(index+1).fadeIn().siblings().fadeOut();
            $(".banner_span span").eq(index+1).addClass("active").siblings().removeClass("active");
            index++;
        }
        $("#banner").mouseover(function () {
            clearInterval(interval);
        });
        $("#banner").mouseout(function () {
           autoPlay();
        });
        autoPlay();

    });
</script>