jq实现轮播淡入淡出

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        * {
                padding: 0;
                margin: 0;
            }
            
            .banner {
                position: relative;
                width: 810px;
                height: 320px;
                margin: 50px auto;
                background: grey;
                overflow: hidden;
            }
            
            .img-list {
                list-style: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 810px;
                height: 320px;
            }
            
            .img-list li {
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
            
            .banner-nav-list {
                list-style: none;
                position: absolute;
                right: 100px;
                bottom: 50px;
            }
            
            .banner-nav-list li {
                background: red;
                float: left;
                width: 20px;
                height: 20px;
                margin-right: 10px;
                cursor: pointer;
                text-align: center;
            }
            
            .banner-nav-list li.active {
                background: yellow;
            }
            
            .banner .toLeft {
                width: 60px;
                height: 60px;
                background: url(images/btn.gif);
                position: absolute;
                left: 30px;
                top: 120px;
                /*opacity: 0;*/
            }
            
            .banner .toRight {
                width: 60px;
                height: 60px;
                background: url(images/btn.gif) 0px 60px;
                position: absolute;
                right: 30px;
                top: 120px;
                /*opacity: 0;*/
            }
            
            #arr {
                opacity: 0;
            }
        </style>
</head>

<body>
    <div class="banner" id="banner">
        <ul class="img-list" id="img_list">
            <li index="0" style="display:block"><img src="images/001.jpg"></li>
            <li index="1"><img src="images/002.jpg"></li>
            <li index="2"><img src="images/003.jpg"></li>
            <li index="3"><img src="images/004.jpg"></li>
            <li index="0"><img src="images/002.jpg"></li>
        </ul>

        <ul class="banner-nav-list" id="banner_nav_list">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="arr">
            <div class="toLeft" id="toLeft"></div>
            <div class="toRight" id="toRight"></div>
        </div>
    </div>
</body>

</html>
<script src="jquery.min.js"></script>
<script type="text/javascript">
    var banner = $("#banner");
    var img_list = $("#img_list");
    var img_list_li = $("#img_list li");
    var banner_nav_list = $("#banner_nav_list");
    var banner_nav_list_li = $("#banner_nav_list li");
    var arr = $("#arr");
    var toLeft = $("#toLeft");
    var toRight = $("#toRight");

    var index = 0;

    // 无缝轮播-------------------------------------------------------------
    // autoPlay();
    var timer = setInterval(autoPlay, 1000);

    function autoPlay() {
        $(img_list_li[index]).fadeOut().next().fadeIn();
        index++
        if (index == 4) {
            index = 0;
            $(img_list_li[4]).css({
                "display": "none"
            });
            $(img_list_li[0]).css({
                "display": "block"
            })
        }
        banner_nav_list_li.removeClass();
        $(banner_nav_list_li[index]).addClass("active");
    }


    // 鼠标移入移出大容器 ，定时器停止和启动定时器 ，完成 箭头的显示和隐藏---------------
    banner.mouseover(function () {
        toLeft.unbind("click");
        toRight.unbind("click");
        clearInterval(timer);
        arr.css("opacity", "1");

        // 点击左右按钮  完成图片移动 和  数字背景的改变-------------------------------
        toLeft.click(function () {
            if (index == 0) {
                index = 0;
            } else {
                $(img_list_li[index]).fadeOut().prev().fadeIn();
                index--;
            }
            banner_nav_list_li.removeClass();
            $(banner_nav_list_li[index]).addClass("active");
        })
        toRight.click(function () {
            if (index == 3) {
                index = 3;
            } else {
                $(img_list_li[index]).fadeOut().next().fadeIn();
                index++;
            }
            banner_nav_list_li.removeClass();
            $(banner_nav_list_li[index]).addClass("active")
        })

        // 鼠标操作数字  找到对应的图片-----------------------------------
        banner_nav_list_li.mouseover(function () {
            if (index != $(this).html() - 1) {
                $(img_list_li[index]).fadeOut();
                index = $(this).html() - 1;
                banner_nav_list_li.removeClass();
                $(banner_nav_list_li[index]).addClass("active");
                $(img_list_li[index]).fadeIn();
            }
        })

    })
    banner.mouseout(function () {
        timer = setInterval(autoPlay, 1000);
        arr.css("opacity", "0");
    })
</script>
jq实现轮播淡入淡出

猜你喜欢
