如何运用jQuery实现定时轮播、点击按钮跳转到指定图片、按左右键切换图片？

前言
实现三个功能：定时轮播、点击按钮跳转到指定图片、按左右键切换图片
过程
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding:0;
        }
        .adver {
            border:1px red solid;
            width: 730px;
            height: 454px;
            margin: 10px auto;
            background:url("adver01.jpg");
            position: relative;
        }
        ul {
            position: absolute;
            bottom: 10px;
            /*width: 100%;*/
            left: 250px;
            /*text-align: center;*/
            z-index: 100;
            cursor: pointer;
        }
        ul li {
            list-style: none;
            display: inline-block;
           /*float: left;*/
            background: black;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            color: white;

        }
        ul li:nth-of-type(1) {
            background: orange;
        }
        .arrowLeft,.arrowRight {
            border:red 1px solid;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 200px;
            z-index: 150;
            background: yellow;
           display:none;

        }
        .arrowLeft {
           // top: 250px;
            left: 10px;
        }
        .arrowRight {
            //bottom: 250px;
            right: 10px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){

            //触碰父容器 显示方向键；若是直接绑定方向键，因为其是display:none,所以无法绑定事件
            $(".adver").hover(function(){//不能绑定.arrowLeft,.arrowRight ，因为原本是隐藏的绑定不了
                $(".arrowLeft,.arrowRight").toggle();
            });
            //左方向键
            var index=0;
            $(".arrowLeft").click(function(){
                index--;
                if(index<0){
                    index=5;
                }
                $(".adver").css("background","url(adver0"+(index+1)+".jpg)");
                $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black")
            });
            //右方向键
            $(".arrowRight").click(function(){
                index++;
                if(index>5){
                    index=0;
                }
                $(".adver").css("background","url(adver0"+(index+1)+".jpg)");
                $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black")
            });
            //点击 数字 直接跳入 图片路径
            $("ul li").click(function(){
               index= $(this).index();
                $(".adver").css("background","url(adver0"+(index+1)+".jpg)");
                $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black")
            })

            //定时轮播
            var runId=setInterval(function(){
                index++;
                if(index>5){
                    index=0;
                }
                $(".adver").css("background","url(adver0"+(index+1)+".jpg)");
                $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().
                        css("background","black");

            },1000);

//            $(".adver").hover(function(){
//                clearInterval(runId);
//            },function(){
//                //恢复定时
//
//            })


        });

    </script>
</head>
<body>
    <div class="adver">
        <ul class="list">
            <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>


</body>
</html>
如何运用jQuery实现定时轮播、点击按钮跳转到指定图片、按左右键切换图片？

猜你喜欢
