课后练习：图片轮播和按钮点击切换图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <style>
        ul,li{padding: 0;margin: 0; list-style: none;}
        .adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px;
            position: relative;}
        ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
        ul li{display: inline-block; font-size: 10px; line-height: 20px; 
            font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; 
            border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
        .arrowLeft,.arrowRight{
            position: absolute;
            width: 30px;
            background:rgba(0,0,0,0.2);
            height: 50px;
            line-height: 50px;
            text-align: center;
            top:200px;
            z-index: 150;
            font-family: "微软雅黑";
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            display: none;
        }
        .arrowLeft{left: 10px;}
        .arrowRight{right: 10px;}
        li:nth-of-type(1){
            background: orange;
        }
    </style>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript">
    $ (function () {
        var i = 0;
        function tun() {
            if (i==6) {
                i=0;
            }
            i++;
            $(".adver").css("background", "url('images/adver0"+i+".jpg')");
            li(i)

        }
        function li(i){  //li图标
            $("li").each(function (j) {
                if (i==j+1){
                    $(this).css({"background":"orange"});
                }else{
                    $(this).css({"background":"#333333"});
                }
            })
        }
        var tem = setInterval(tun, 1000)
        $(".adver").mouseover(function () {
            clearInterval(tem);
            $(".arrowLeft,.arrowRight").css("display","block")
        }).mouseout(function () {
            $(".arrowLeft,.arrowRight").hide();
            tem=setInterval(tun,1000)
        })
               $(".arrowLeft").click(function () { //左边箭头点击事件
                   if (i<=0) {
                       i=6;
                   }
                   i--;
                   $(".adver").css("background", "url('images/adver0"+i+".jpg')");
                   li(i)
        })
        $(".arrowRight").click(function () { //右边箭头点击事件
            tun();
        })
    })
</script>
</body>
</html>
课后练习：图片轮播和按钮点击切换图片

猜你喜欢
