Web前端 淡入浅出效果轮播图

前端搭建开发环境搭建 游戏开发的前端后端 前端开发游戏制作

html 代码

<style>
    ul,
    li {
        padding: 0;
        margin: 0;
    }
    li {
        list-style: none;
    }
    .container {
        width: 800px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
    }
    .banner {
        position: relative;
        overflow: hidden;
    }
    .banner li {
        position: absolute;
        top: 0;
        left: 0;
    }
    .banner li img {
        width: 800px;
        height: 400px;
    }
    .btn {
        height: 50px;
        position: absolute;
        left: 0;
        display: none;
    }
    .btn>.prev,
    .btn>.next {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        background: rgba(188, 185, 185, 0.50);
        cursor: pointer;
        font-weight: bold;
    }
    .btn .prev:hover,
    .btn .next:hover {
        background: rgba(188, 185, 185, 0.80);
    }
    .btn>.prev {
        float: left;
    }
    .btn>.next {
        float: right;
    }
    .box {
        height: 10px;
        position: absolute;
        bottom: 30px;
        overflow: hidden;
    }
    .box li {
        width: 50px;
        height: 10px;
        background: rgba(188, 185, 185, 0.50);
        float: left;
        cursor: pointer;
    }
    .box li:hover {
        background: #00FA9A !important;
    }
</style>
<div class=”container”>
    <ul class=”banner”>
        <li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499241259&di=2ff02fbccfaf02ec79dc4b304444e6ad&imgtype=jpg&er=1&src=http%3A%2F%2Fdl.bizhi.sogou.com%2Fimages%2F2013%2F09%2F29%2F391672.jpg”></li>
        <li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498646608817&di=5555cbf15efd661a65578440897827b3&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100615%2F0006019058815826_b.jpg”></li>
        <li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498646647211&di=3514a6cc7bad445901c50b1056498b9f&imgtype=0&src=http%3A%2F%2Fp3.image.hiapk.com%2Fuploads%2Fallimg%2F140814%2F7730-140Q41I921.jpg”></li>
        <li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498646677725&di=2757bfb1e0b6a7e30086942808bc01db&imgtype=0&src=http%3A%2F%2Fwww.pp3.cn%2Fuploads%2F201409%2F2014091305.jpg”></li>
    </ul>
    <div class=”btn”>
        <div class=”prev”>&lt;</div>
        <div class=”next”>&gt;</div>
    </div>
    <ul class=”box”></ul>
</div>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js” integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=”
crossorigin=”anonymous”></script>
<script>
    //准备工作
    var i = 0,
        w = $(‘.container’).width(),
        h = $(‘.container’).height(),
        n = $(‘.banner li’).length,
        tbtn = (h / 2),
        wbox = (w / 2),
        wboxleft = (w / 4),
        blmright = [wbox – (50 * n)] / n;
    $(document).ready(function () {
        $(‘.banner’).css({ width: w, height: h });
        $(‘.banner li’).css({ width: w, height: h });
        $(‘.btn’).css({ width: w * 0.9, top: tbtn, marginLeft: w * 0.05 });
        $(‘.box’).css({ width: wbox, left: wboxleft });
        for (var j = 0; j < n; j++) {
            $(‘.box’).append(‘<li></li>’);
        };
        $(‘.box li’).css({ marginRight: blmright });
    });
    //初始化
    $(document).ready(function () {
        $(‘.banner li’).eq(i).stop(true).fadeIn();
        $(‘.banner li’).eq(i).siblings().stop(true).fadeOut();
        $(‘.box li’).eq(i).css({ background: ‘#00FA9A’ });
        $(‘.box li’).eq(i).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
    });
    var time = setInterval(‘next()’, 2500);
    //btn next
    function next() {
        i++;
        if (i > n – 1) { i = 0 }
        $(‘.banner li’).eq(i).stop(true).fadeIn();
        $(‘.banner li’).eq(i).siblings().stop(true).fadeOut();
        $(‘.box li’).eq(i).css({ background: ‘#00FA9A’ });
        $(‘.box li’).eq(i).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
    };
    //btn prev
    function prev() {
        i–;
        if (i < 0) { i = n – 1 }
        $(‘.banner li’).eq(i).stop(true).fadeIn();
        $(‘.banner li’).eq(i).siblings().stop(true).fadeOut();
        $(‘.box li’).eq(i).css({ background: ‘#00FA9A’ });
        $(‘.box li’).eq(i).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
    };
    //btn
    $(document).ready(function () {
        $(‘.prev’).click(function () {
            prev();
            clearInterval(time);
            time = setInterval(‘next()’, 2500);
        });
        $(‘.next’).click(function () {
            next();
            clearInterval(time);
            time = setInterval(‘next()’, 2500);
        });
    });
    //box li
    $(document).ready(function (e) {
        $(‘.box li’).click(function () {
            var m = $(this).index();
            i = m;
            $(‘.box li’).eq(m).css({ background: ‘#00FA9A’ });
            $(‘.box li’).eq(m).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
            $(‘.banner li’).eq(m).stop(true).fadeIn();
            $(‘.banner li’).eq(m).siblings().stop(true).fadeOut();
            clearInterval(time);
            time = setInterval(‘next()’, 2500);
        });
    });
    //hover停止
    $(document).ready(function () {
        $(‘.banner’).hover(function () {
            clearInterval(time);
        }, function () {
            time = setInterval(‘next()’, 2500);
        });
    });
    $(document).ready(function () {
        $(‘.banner’).hover(function () {
            $(‘.btn’).stop(true).fadeIn();
        }, function () {
            $(‘.btn’).stop(true).fadeOut();
        });
        $(‘.btn’).hover(function () {
            $(‘.btn’).stop(true).fadeIn();
        }, function () {
            $(‘.btn’).stop(true).fadeOut();
        });
    });
</script>

cocos2dx前端开发环境搭建 前端格斗游戏开发 sts前端开发环境

» 本文来自:前端开发者 » 《Web前端 淡入浅出效果轮播图》
» 本文链接地址:https://www.rokub.com/5363.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!