jQuery淡入淡出的轮播图

Posted 2020-09-25 封寻丸子

html结构：

 <div class="banna">
            <ul class="img">
                <li><a href=""><img src="../images/pic1.jpg" ></a></li>
                <li><a href=""><img src="../images/pic2.jpg"></a></li>
                <li><a href=""><img src="../images/pic3.jpg"></a></li>
                <li><a href=""><img src="../images/pic4.jpg"></a></li>
                <li><a href=""><img src="../images/pic5.jpg"></a></li>
                <li><a href=""><img src="../images/pic6.jpg"></a></li>
            </ul>
            <ul class="num"></ul>
            <div class="btn prev"><i></i></div>
            <div class="btn next"><i></i></div>

</div>

css结构：

.banna{height:360px;width:990px;margin:0 auto;position:relative;margin-top:-40px;}
.banna .img li{position:absolute;left:0 ;top:0;display:none;}
.banna .num{position:absolute;right:10px;bottom:5px;}
.banna .num li{float:left;width:4px;height:4px;border:3px solid #999;margin:5px;border-radius: 50%;display:block;font-size:0;}
.banna .num li.active{border:3px solid #FE5761;}
.banna .btn{position:absolute;top:152px;width:40px;height:60px;font-size:40px;line-height:60px;overflow: hidden;color:#ccc;z-index: 3;}
.btn i{display:block;width:17px;height:30px;margin:15px 12px;background:url(../images/按钮.png)no-repeat scroll;background-position: 0 0;background-size: auto 30px;background-clip: border-box;background-origin: padding-box;}
.btn:hover{background:rgba(0,0,0,0.5);}
.banna .prev{left:222px;}
.banna .prev i{background-position: 0 0;}
.banna .next{right:0;}
.banna .next i{background-position:-17px 0;}

jquery结构：

$(function(){

　//初始化代码：
      var size=$(".img li").size();
        for (var i = 1; i <= size; i++) {
            var li="<li>"+i+"</li>";
            $(".num").append(li);
        };

        //手动控制轮播效果
        $(".img li").eq(0).show();
        $(".num li").eq(0).addClass("active");
        $(".num li").mouseover(function() {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            i=index;
            $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
        })

        //自动
        var i = 0;
        var t = setInterval(move, 1500);
        //核心向左的函数
        function Left() {
            i--;
            if (i == -1) {
                  i = size-1;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

        }
        //核心向右的函数
        function right() {
            i++;
            if (i == size) {
                i = 0;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

        }
        //定时器的开始与结束
        $(".banna").hover(function() {
            clearInterval(t);
        }, function() {
            t = setInterval(move, 1500)
        })
        //左边按钮的点击事件
        $(".banna .prev").click(function() {
            Left();
            
        })
        //右边按钮的点击事件
        $(".banna .next").click(function() {
            right();
        ）}

）}