【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）

这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图示例</title>
<style>
    .carousel {
        position: relative;
        width: 300px;
        height: 200px;
        margin: auto;
    }
    .carousel-inner {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }
    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 40px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
    .carousel-control.left {
        left: 10px;
    }
    .carousel-control.right {
        right: 10px;
    }
    .carousel-indicators {
        list-style: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin: 1px;
        cursor: pointer;
    }
    .carousel-indicators .active {
        background-color: #007bff;
    }
</style>
</head>
<body>
 
<div class="carousel">
    <div class="carousel-inner">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <a class="carousel-control left" href="#">&lsaquo;</a>
    <a class="carousel-control right" href="#">&rsaquo;</a>
    <ul class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#"></li>
        <li data-slide-to="1" data-target="#"></li>
        <li data-slide-to="2" data-target="#"></li>
    </ul>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.carousel-control.left').click(function(){
            var activeIndex = $('img.active').index();
            var nextIndex = (activeIndex - 1 >= 0) ? activeIndex - 1 : $('img').length - 1;
            $('img').eq(nextIndex).trigger('click');
        });
        $('.carousel-control.right').click(function(){
            var activeIndex = $('img.active').index();
            var

【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）

评论已关闭

推荐阅读