jquery--轮播图01 | 易学教程

效果图
在这里插入图片描述

<div class="banner">
    <ul class="img">
        <li>
            <a href="#"><img width="600" height="300" src="http://www.jq22.com/img/cs/500x300-1.png" alt="第1张图片"></a>
        </li>
        <li>
            <a href="#"><img width="600" height="300" src="http://www.jq22.com/img/cs/500x300-2.png" alt="第2张图片"></a>
        </li>
        <li>
            <a href="#"><img width="600" height="300" src="http://www.jq22.com/img/cs/500x300-3.png" alt="第3张图片"></a>
        </li>
        <li>
            <a href="#"><img width="600" height="300" src="http://www.jq22.com/img/cs/500x300-4.png" alt="第4张图片"></a>
        </li>
        <li>
            <a href="#"><img width="600" height="300" src="http://www.jq22.com/img/cs/500x300-5.png" alt="第5张图片"></a>
        </li>
    </ul>
    <ul class="num"></ul>
    <ul class="des">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第一个</li>
    </ul>
    <div class="btn">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

</div>

css

* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
.banner {
	width:600px;
	height:300px;
	border:2px solid #ccc;
	margin:100px auto;
	position:relative;
	overflow:hidden;
	z-index:1;
}
.img {
	position:absolute;
	top:0;
	left:0;
}
.des {
	position:absolute;
	bottom:0;
	left:0;
	z-index:-2;
	background:rgba(0,0,0,.4)
}
.des li {
	float:left;
	width:600px;
}
.img li {
	float:left;
}
.num {
	position:absolute;
	bottom:10px;
	width:100%;
	text-align:center;
	font-size:0;
}
.num li {
	width:10px;
	height:10px;
	background:rgba(0,0,0,0.5);
	border-radius:100%;
	display:inline-block;
	margin:0 5px;
	cursor:pointer;
}
.btn {
	display:none;
}
.btn span {
	display:block;
	width:50px;
	height:100px;
	background:rgba(0,0,0,0.6);
	color:#fff;
	font-size:40px;
	line-height:100px;
	text-align:center;
	cursor:pointer;
}
.btn .prev {
	position:absolute;
	left:0;
	top:50%;
	margin-top:-50px;
}
.btn .next {
	position:absolute;
	right:0;
	top:50%;
	margin-top:-50px;
}
.num .active {
	background-color:#fff;
}
.hide {
	display:none;
}

jquery

$(function() {
    var i = 0;
    var timer = null;
    for (var j = 0; j < $('.img li').length; j++) { //创建圆点
        $('.num').append('<li></li>')
    }
    $('.num li').first().addClass('active'); //给第一个圆点添加样式

    var firstimg = $('.img li').first().clone(); //复制第一张图片
    $('.img').append(firstimg).width($('.img li').length * ($('.img img').width()));
    //第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

    $('.des').width($('.img li').length * ($('.img img').width()));
    //对点点位置的文字描述的宽度和图片一样


    // 下一个按钮
    $('.next').click(function() {
        i++;
        if (i == $('.img li').length) {
            i = 1; //这里不是i=0
            $('.img').css({
                left: 0
            }); //保证无缝轮播，设置left值
        };

        $('.img').stop().animate({
            left: -i * 600
        }, 300); //图片宽度为600

        if (i == $('.img li').length - 1) { //设置小圆点指示
            $('.num li').eq(0).addClass('active').siblings().removeClass('active');
            $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
        } else {
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
        }

    })

    // 上一个按钮
    $('.prev').click(function() {
        i--;
        if (i == -1) {
            i = $('.img li').length - 2;
            $('.img').css({
                left: -($('.img li').length - 1) * 600
            });
        }
        $('.img').stop().animate({
            left: -i * 600
        }, 300);
        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
    })

    //设置按钮的显示和隐藏
    $('.banner').hover(function() {
        $('.btn').show();
    }, function() {
        $('.btn').hide();
    })

    //鼠标划入圆点
    $('.num li').mouseover(function() {
        var _index = $(this).index();
        $('.img').stop().animate({
            left: -_index * 600
        }, 150);
        $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
        $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
    })

    //定时器自动播放
    timer = setInterval(function() {
        i++;
        if (i == $('.img li').length) {
            i = 1;
            $('.img').css({
                left: 0
            });
        };

        $('.img').stop().animate({
            left: -i * 600
        }, 300);
        if (i == $('.img li').length - 1) {
            $('.num li').eq(0).addClass('active').siblings().removeClass('active');
            $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
        } else {
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
        }
    }, 3000)

    //鼠标移入，暂停自动播放，移出，开始自动播放
    $('.banner').hover(function() {
        clearInterval(timer);
    }, function() {
        timer = setInterval(function() {
            i++;
            if (i == $('.img li').length) {
                i = 1;
                $('.img').css({
                    left: 0
                });
            };

            $('.img').stop().animate({
                left: -i * 600
            }, 300);
            if (i == $('.img li').length - 1) {
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
            } else {
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
            }
        }, 3000)
    })

})

来源：CSDN

作者：Dr_W

链接：https://blog.csdn.net/qq_42363032/article/details/103933336

标签

轮播

jquery