返回顶部

【jQuery】--图片轮播 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet"  href="style.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        //手动轮播效果
        $(function () {
            var size=$(".img li").size();

　　　　　　　//根据图片数量，动态添加,<li>标签个数，无需再下文手动添加   
            for (var i=1;i<=size;i++){
                var li="<li>"+i+"</li>"
                $(".num").append(li);   
            }

            $(".num li").eq(0).show();   //eq根据索引选择
            $(".num li").mouseover(function () {
                $(this).addClass("active").siblings().removeClass("active"); //当前标签加上active效果，其他兄弟标签取消active效果
                var index=$(this).index();
                i = index;
                $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });

            i=0;
            var t= setInterval(move,1500)
                function move() {
                    i++;
                    if(i==size){
                        i=0;
                    }
                    $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                    $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                };

                function moveL() {
                    i--;
                    if (i==-1){
                        i = size-1;
                    }
                    $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                    $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                }
                    $(".out").hover(function () {
                        clearInterval(t);
                    }),function () {
                        t=setInterval(move,1500);
                    };

                    $(".out .right").click(function () {
                        move()
                    });

                    $(".out .left").click(function () {
                        moveL()
                    });
        });
    </script>
</head>
<body>
    <div class="out">
         <ul class="img">
             <li><a href="#"><img src="images/001.jpg" alt=""></a></li>
             <li><a href="#"><img src="images/002.jpg" alt=""></a></li>
             <li><a href="#"><img src="images/003.jpg" alt=""></a></li>
             <li><a href="#"><img src="images/004.jpg" alt=""></a></li>
             <li><a href="#"><img src="images/005.jpg" alt=""></a></li>
         </ul>

         <ul class="num">
             <!--<li class="active">1</li>-->
             <!--<li>2</li>-->
             <!--<li>3</li>-->
             <!--<li>4</li>-->
             <!--<li>5</li>-->
         </ul>

         <div class="left btn"><</div>
         <div class="right btn">></div>

     </div>

</body>
</html>

 

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}

.out{
    width: 730px;
    height: 454px;
    /*border: 8px solid mediumvioletred;*/
    margin: 50px auto;
    position: relative;
}

.out .img li{
    position: absolute;
    left: 0;
    top: 0;
}

.out .num{
    position: absolute;
    left:0;
    bottom: 20px;
    text-align: center;
    font-size: 0;
    width: 50%;
}


.out .btn{
    position: absolute;
    top:50%;
    margin-top: -30px;
    width: 30px;
    height: 60px;
    background-color: aliceblue;
    color: black;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    display: none;





}

.out .num li{
    width: 20px;
    height: 20px;
    background-color: grey;
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    display: inline;
    font-size: 18px;
    margin: 0 10px;
    cursor: pointer;
}
.out .num li.active{
    background-color: red;
}


.out .left{
    left: 0;
}
.out .right{
    right: 0;
}

.out:hover .btn{
    display: block;
}
style

 

posted @ 2016-11-18 11:15  Will_D_Zhang  阅读(316)  评论(0)  编辑  收藏  举报