轮播图窗口缩小图片不变形，居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图定位</title>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <style>
    .out{width:100%;height:400px;overflow:hidden;}
    .out>ul li{width:100%;position:absolute;top:0;left:0;height:400px;overflow:hidden;display:none;}
    .out>ul li>a{width:1920px;position:absolute;top:0;left:50%;margin-left:-960px;height:400px;}
    .out>ul li>a>img{width:1920px;height:400px;display:block;}
    .fix{margin:0 auto;width:1200px;background:green;/*opacity:0.5;*/z-index:999;height:400px;}
    .in{width:100%;position:absolute;top:0;left:0;}
    </style>
</head>
<body>
    <div class="out">
        <div class="in"><div class="fix"></div></div>
        <ul>
            <li style="display:block;"><a href=""><img src="./src/1.jpg" alt=""></a></li>
            <li><a href=""><img src="./src/2.jpg" alt=""></a></li>
            <li><a href=""><img src="./src/3.jpg" alt=""></a></li>
        </ul>
    </div>
    <h1>1</h1>
</body>
<script>
    var lindex=0;
    imglen=$("ul li").length;
    //自动切换定时器处理
    var autoChange=setInterval(function(){
        if(lindex<imglen-1){
            lindex++;
        }else{
            lindex=0;
        }
        //调用变换处理函数
        changeTo(lindex);
    },1000);


    function changeTo(b){
        $("h1").html(b);
        $("ul li").each(function(){
            tt=$(this).index();
            if(tt==b){
                $(this).css("display","block");
                $("ul li").not($(this)).css("display","none");
            }
        })
    }
</script>
</html>
最后编辑于：2017.12.08 06:43:02
轮播图窗口缩小图片不变形，居中显示

推荐阅读更多精彩内容
