jQuery 实现焦点图（banner） 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JS/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #div1 {
            width: 100%;
            background: url(1.jpeg) center top no-repeat;
            height: 368px;
            position: relative;
            text-align: center;
        }

            #div1 div {
                width: 30px;
                height: 80px;
                background-color: #000;
                position: absolute;
                color: #fff;
                font-size: 40px;
                line-height: 80px;
                text-align: center;
            }

        #leftbtn {
            top: 144px;
        }

        #rightbtn {
            top: 144px;
            right: 0px;
        }

        #nav {
            position: absolute;
            width: 350px;
            top: 345px;
            left: 50%;
            margin-left: -130px;
        }

            #nav li {
                width: 40px;
                height: 4px;
                float: left;
                background-color: #fff;
                margin-left: 10px;
            }
    </style>
    <script>
        function style($) {
            $(".drop").css("backgroundColor", "#fff");
        }


        $(function () {
            var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
            $(".drop").eq(0).css("backgroundColor", "#000");
            $(".drop").each(function (i) {
                $(".drop").eq(i).mouseover(function () {
                    style($);
                    $(this).css("backgroundColor", "#000");
                    $("#div1").css("backgroundImage", "url(" + imgs[i] + ")");
                });
            });


            var index = 0;            
            $("#rightbtn").click(function () {                
                index++;         
                if (index > imgs.length-1) {
                    index = 0;
                }
                $("#div1").css("backgroundImage", "url(" + imgs[index] + ")");
                style($);
                $(".drop").eq(index).css("backgroundColor", "#000");
                clearInterval(timeout);
                timeout = setInterval(show2, 2000);             
            })


            var index = imgs.length - 1;
            $("#leftbtn").click(function () {
                index--;
                if (index < 0) {
                    index = imgs.length - 1;
                }
                $("#div1").css("backgroundImage", "url(" + imgs[index] + ")");
                style($);
                $(".drop").eq(index).css("backgroundColor", "#000");
                clearInterval(timeout);
                timeout = setInterval(show2, 2000);
            })


            var i = 0;
            function show1() {
                $("#div1").css("backgroundImage", "url(" + imgs[i] + ")");
                style($);
                $(".drop").eq(i).css("backgroundColor", "#000");
                i++;
                if (i > imgs.length - 1) {
                    i = 0;
                }             
            }
            var index=0;
            function show2() {               
                style($);
                $(".drop").eq(index).css("backgroundColor", "#000");
                $("#div1").css("backgroundImage", "url(" + imgs[index] + ")");
                index++;
                if (index> imgs.length - 1) {
                    index = 0;
                }
               
            }
            var timeout = setInterval(show1, 2000);//每隔2秒改变一次

            $(".drop").mouseover(function () {
                clearInterval(timeout);
                timeout = setInterval(show2, 2000);
                index= $(this).index(".drop");
            })         
        })
    </script>
</head>
<body>
    <div id="div1">
        <a href="#"> <div id="leftbtn"><</div></a>
        <a href="#"><div id="rightbtn">></div></a>
    </div>
    <ul id="nav">
        <li class="drop"></li>
        <li class="drop"></li>
        <li class="drop"></li>
        <li class="drop"></li>
        <li class="drop"></li>
    </ul>

</body>
</html>

 

posted @ 2018-01-26 11:26  你的斗志并没有失去  阅读(229)  评论(0)    收藏  举报