淡入淡出轮播(banner),自动按图片个数生成居中按钮——和派孔明_如何让轮播图中表示图片的数字居中-CSDN博客

本文链接：https://blog.csdn.net/xyphf/article/details/51691971

/*
1、JQuery带左右按钮淡入淡出轮播
2、轮播图根据图片数量自动生成按钮个数
3、在宽高不确定的情况下，居中元素
注：不管是菜鸟还是大神，若有bug，及时联系交流,QQ 2766588380;
闻道有先后，术业有专攻，所有的大神都是从菜鸟的道路上走出来的
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出轮播，banner</title>
<style>
*{margin:0;padding:0;}
.box{width:1290px;height:410px;overflow:hidden;position:relative;margin:30px auto;}
.box .banner{width:1290px;height:410px;margin:0 auto;overflow:hidden;position:relative;}
.box .banner img{width:1290px;height:410px;position:absolute;left:0;top:0;opacity:0;filter: alpha(opacity=0);}
.box .prev{width:35px;height:57px;position:absolute;left:0;top:50%;margin-top:-27px;background:#ccc;z-index:10;font-size:70px;line-height:57px;text-align: center;text-decoration:none;color:#fff;display:none;opacity:0.5;}
.box .next{width:35px;height:57px;position:absolute;right:0;top:50%;margin-top:-27px;background:#ccc;z-index:10;font-size:70px;line-height:57px;text-align: center;text-decoration:none;color:#fff;display:none;opacity:0.5;}
.box:hover .prev{display:block;}
.box:hover .next{display:block;}
.box .page{/*width:130px;*/position:relative;float:left;bottom:40px;left:50%;
}
.box .page a{position:relative; left:-50%;display:inline-block;width:22px;height:22px;background-color:#666;margin: 0px 10px;float:left;color:#fff;text-decoration:none;text-align: center;border-radius:50%;cursor: pointer;}
.box .page a.active{background-color:red;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function(){
    var aPage = $(".box .page a");
    var aImg = $(".box .banner img");
    var iSize = $(".box .banner img").size();
    var index = 0;

    // 按照图片的多少自动生成点击按钮个数
    (function(){
        for (var i = 1; i <=aImg.length; i++) {
            var allA = $("<a class='a'>"+i+"</a>");
            $("#page").append(allA);
            $("#page a").first().addClass('active');
        };
        //分页按钮点击
        $(".box").on("click",".a",function(){
            var _this = $(this).text() - 1;
            change(_this);
        });
    })();


    //左按钮
    $("#prev").click(function() {
        index--;
        if (index==-1) {
            index=iSize-1;
        }
        change(index);
    });

    //右按钮
    $("#next").click(function() {
        index++;
        if (index==iSize) {
            index=0;
        }
        change(index);
    });

    //封装切换函数
    function change(index){
        $(".a").eq(index).addClass('active').siblings().removeClass('active');
        aImg.stop().eq(index).animate({opacity:1}, 1000).siblings().animate({opacity:0}, 1000);
    };

    //自动
    function autoshow(){
        index++;
        if (index<iSize-1) {
            change(index);
        }else{
            index=0;
            change(index);
        }
    }

    //鼠标移入显示，移除隐藏左右按钮
    $(".box").mouseover(function() {
        clearInterval(timer);
    }).mouseout(function(event) {
        timer=setInterval(autoshow,3000);
    }).trigger('mouseout');

})
</script>
</head>
<body>
<div class="box">
    <a id="prev" class="prev" href="javascript:;">&lt;</a>
    <a id="next" class="next" href="javascript:;">&gt;</a>
    <div class="banner" id="banner">
        <img style="opacity:1;filter:alpha(opacity=100);" src="images/banner1.png" alt="">
        <img src="images/banner2.png" alt="">
        <img src="images/banner3.png" alt="">
        <img src="images/banner4.png" alt="">
        <img src="images/banner3.png" alt="">
    </div>
    <div class="page" id="page">
    <!--________________________________________________ -->
        <!-- <a class="active" href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a> -->
    <!--________________________________________________ -->
    </div>
</div>
</body>
</html>