全屏轮换

 

Demo下载    效果如图：

 

 

css：

    * {
        padding: 0;
        margin: 0;
    }

    html {
        overflow-x: hidden;
    }
    
    .box {
        overflow: hidden;
        height: 365px;
        width: 100%;
        position: relative;
    }

    .big_img {
        width: 99999px;
        height: 365px;
        top: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
    }
    .big_img li {
        height: 365px;
        position: relative;
        background: blue;
        overflow: hidden;
        float: left;
    }

    .big_img li img {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -800px;
    }

    .lit_img {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
    }

    .lit_img {
        text-align: center;
    }

    .lit_img li {
        display: inline-block;
        width: 150px;
        *display: inline;
        *zoom: 1;
        cursor: pointer;
        border: 3px solid #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

    .lit_img li.now {
        position: relative;
        top: -5px;
    }

    .lit_img li img {
        width: 100%;
        display: block;
    }

 

html：

    <div class="box">
        <ul class="big_img">
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
        </ul>
        <ul class="lit_img">
            <li class="now"><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
        </ul>
    </div>

 

javascript：

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script>
    $(function () {
        var w = $("html").width();
        var li_length = $(".big_img>li").length;
        var count = 0;

        $(".box,.big_img>li").css("width",w);

        var _autoRun = setInterval(autoRun,3000);

        $(".big_img,.lit_img").mouseenter(function () {
            clearInterval(_autoRun);
        }).mouseleave(function () {
            _autoRun = setInterval(autoRun,3000)
        });

        $(".lit_img>li").click(function () {
            count = $(this).index();
            anim(count);
        })

        function autoRun() {
            count ++;
            if (count > li_length - 1) {
                count = 0;
            }
            anim(count);
        }

        function anim(i) {
            $(".big_img").animate({
                "left": -w * i
            },400);
            $(".lit_img>li").eq(i).addClass("now").siblings().removeClass();
        }
    })
    </script>

 

转载于:https://www.cnblogs.com/k13web/p/4139885.html