JQ全屏居中轮播图代码

Posted 2020-10-07 水好凉

<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();
        });
    })