JQ全屏居中轮播图代码

<style>
   .clearfloat:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfloat{
    zoom: 1;
}

    /*轮播图*/
.banners { position: relative; width: 100%;height:542px}
    .banner-img { position: relative; float: left; width: 1920px; margin: 0 auto;  left: 50%; margin-left: -960px; }
.banner-img a { display: block;  position: absolute; left: 0; top: 0; }
/*.banner-img:hover .banner-right { display:block;}
        .banner-img:hover .banner-left { display:block;}*/
.banner-right { width: 60px; height: 90px; cursor: pointer; background: #000 url(../../Images/index/ad_ctr.png) no-repeat -5px bottom; filter: alpha(opacity:50); opacity: 0.5; position: absolute; right: 1px; top: 180px; }
.banner-right:hover { background: #000 url(../../Images/index/ad_ctr.png) no-repeat -3px -90px; }
.banner-left { width: 60px; height: 90px; cursor: pointer; background: #000 url(../../Images/index/ad_ctr.png) no-repeat 5px -180px; filter: alpha(opacity:50); opacity: 0.5; position: absolute; left: 0; top: 180px; }
.banner-left:hover { background: #000 url(../../Images/index/ad_ctr.png) no-repeat 3px top; }
.banner-pbox { width: 100%; height: 35px; position: absolute; left: 0; bottom: 0; zoom: 1; margin: 0 auto; }
.banner-p { width: 110px; margin: 0 auto; text-align: center; }
.banner-p span { width: 15px; height: 15px; display: block; float: left; margin-left: 10px; background: url(../../Images/index/dot.png) no-repeat left bottom; }
.banner-p .banner-span { background: url(../../Images/index/dot.png) no-repeat left -1px; }
</style>
<div class="banners fl clearfloat" id="slide">
    <div class="banner-img clearfloat">
        <a href="javascript:;" >
            <img src="~/Images/index/newbanner1.jpg" title="商品图片" alt="商品图片" /></a>
        <a href="javascript:;" >
            <img src="~/Images/index/newbanner2.jpg" title="商品图片" alt="商品图片" /></a>
        <a href="javascript:;">
            <img src="~/Images/index/newbanner3.jpg" title="商品图片" alt="商品图片" /></a>
    </div>
    <span class="banner-left"></span>
    <span class="banner-right"></span>
    <div class="banner-pbox clearfloat">
        <p class="banner-p clearfloat">
        </p>
    </div>
</div>
<script src="~/Scripts/Untitled-3.js"></script>
<script>
    $(document).ready(function () {
        //轮播图///
        $('.banner-img a:gt(0)').hide();//页面加载隐藏所有的li 除了第一个
        var num = $(".banner-img a").length;
        var i_mun = 0;
        var timer_banner = null;
        //动态添加span
        for (var i = 0; i < num; i++) {
            $(".banner-p").append("<span></span>")
        }
        $('.banner-p span').eq(0).addClass('banner-span')
        //底下小图标点击切换
        $('.banner-p span').click(function () {
            $(this).addClass('banner-span')
                   .siblings('span').removeClass('banner-span');
            var i_mun1 = $('.banner-p span').index(this);
            $('.banner-img a').eq(i_mun1).fadeIn('slow')
                                   .siblings('a').fadeOut('slow');
            i_mun = i_mun1;
        });
        //点击左侧
        $(".banner-left").click(function () {
            if (i_mun == 0) {
                i_mun = num
            }
            $('.banner-img a').eq(i_mun - 1).fadeIn(800)
                              .siblings('a').fadeOut(800);
            $('.banner-p span').eq(i_mun - 1).addClass('banner-span')
                               .siblings('span').removeClass('banner-span');
            i_mun--
        })
        //点击右侧
        $('.banner-right').click(function () {
            move_banner()
        });
        function move_banner() {
            if (i_mun == num - 1) {
                i_mun = -1
            }
            //大图切换
            $('.banner-img a').eq(i_mun + 1).fadeIn('slow')
                                       .siblings('a').fadeOut('slow');
            //小图切换
            $('.banner-p span').eq(i_mun + 1).addClass('banner-span')
                       .siblings('span').removeClass('banner-span');
            i_mun++
        }
        //自动播放函数
        function bannerMoveks() {
            timer_banner = setInterval(function () {
                move_banner()
            }, 4000)
        };
        bannerMoveks();//开始自动播放

        //鼠标移动到banner上时停止播放
        $('.banners').mouseover(function () {
            clearInterval(timer_banner);
        });
        //鼠标离开 banner 开启定时播放
        $('.banners').mouseout(function () {
            bannerMoveks();
        });
    })

 

转载于:https://www.cnblogs.com/C-dashazi/p/7554866.html