利用jQuery实现轮播图

2024-02-20 19:40:04

页面展示图

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <link rel="icon" href="//www.jd.com/favicon.ico">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="c1.css">
</head>
<body>

<div class="c1">
    <div class="c3">
        <ul class="lbt">
            <li class="i1"><img
                    src="//img12.360buyimg.com/babel/s590x470_jfs/t1/141047/21/22177/187743/6184d79aE26884a79/c87eef19caa91023.jpg.webp"
                    alt="" class=""></li>
            <li class="i2"><img
                    src="//img14.360buyimg.com/pop/s590x470_jfs/t1/214532/12/2060/70920/6178b2fcE10944bdc/a9c90434eda2a97e.jpg.webp"
                    alt="" class="hide"></li>
            <li class="i3"><img
                    src="//img30.360buyimg.com/pop/s590x470_jfs/t1/220092/16/2545/44461/617e33d7E31901352/e3bd37d3ffbe90f7.jpg.webp"
                    alt="" class="hide"></li>
            <li class="i4"><img
                    src="//imgcps.jd.com/ling4/100014654958/54iG5qy-5aW954mp/5YWo5Zy65L2O6IezN-aKmA/p-5bd8253082acdd181d02fa28/d0bc4a5f/cr/s/q.jpg"
                    alt="" class="hide"></li>
            <li class="i5"><img
                    src="//img13.360buyimg.com/pop/s590x470_jfs/t1/223168/33/355/76562/617a70f5E3fb49ea0/025df96c80360d02.jpg.webp"
                    alt="" class="hide"></li>
            <li class="i6"><img
                    src="//img14.360buyimg.com/pop/s590x470_jfs/t1/219284/15/3105/58373/6183cbbeE44e46e89/d781541f3578cbf3.jpg.webp"
                    alt="" class="hide"></li>
        </ul>
        <ul class="button">
            <li class="left_btn"><span> < </span></li>
            <li class="right_btn"><span> > </span></li>
        </ul>
        <ul class="index">
            <li><input type="radio" class="l1" name="nbsp" value="0" checked></li>
            <li><input type="radio" class="l2" name="nbsp" value="1"></li>
            <li><input type="radio" class="l3" name="nbsp" value="2"></li>
            <li><input type="radio" class="l4" name="nbsp" value="3"></li>
            <li><input type="radio" class="l5" name="nbsp" value="4"></li>
            <li><input type="radio" class="l6" name="nbsp" value="5"></li>
        </ul>
    </div>
</div>

<script src="j1.js"></script>

</body>
</html>

css代码

* {
    margin: 0;
    padding: 0;
}

.img {
    width: 590px;
    height: 470px;
}

.c1 {
    width: 590px;
    height: 470px;
    background-color: rgba(0, 0, 0, .15);
    margin: 100px auto;
}

li {
    list-style: none;
}

img {
    cursor: pointer;
}

.c3 {
    position: relative;
}

.c3 .lbt li {
    position: absolute;
    top: 0;
    left: 0;
}

.c3 .button li {
    position: absolute;
    top: 217px;
    width: 25px;
    height: 35px;
    background-color: rgba(0, 0, 0, .15);
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    font-size: 20px;
}

.left_btn {
    left: 0;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.left_btn span {
    margin-right: 4px;
}

.right_btn {
    right: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.right_btn span {
    margin-left: 4px;
}

.c3 .index li input {
    position: absolute;
    top: 430px;
}

.l1 {
    left: 10px;
}

.l2 {
    left: 25px;
}

.l3 {
    left: 40px;
}

.l4 {
    left: 55px;
}

.l5 {
    left: 70px;
}

.l6 {
    left: 85px;
}

.hide {
    display: none;
}

js代码

// 自动轮播
function zdlb() {
    $(".lbt li").each(function () {
        if ($(this).children("img").attr("class") !== "hide") {
            res = $(this).index();
            // console.log(res);
        }
    });
    if (res !== 5) {
        // ***********************使用了fadeIn后，标签display属性为inline，所以要设置回none***********************
        $(".lbt li").eq(res + 1).siblings().children("img").addClass("hide").css("display", "none");
        $(".lbt li").eq(res + 1).children("img").fadeIn(1000).removeClass("hide");
        $(".index li").eq(res + 1).children("input").prop("checked", true);
        $(".index li").eq(res + 1).siblings().children().prop("checked", false);
    } else {
        $(".lbt li").eq(0).siblings().children("img").addClass("hide").css("display", "none");
        $(".lbt li").eq(0).children("img").fadeIn(1000).removeClass("hide");
        $(".index li").eq(0).children("input").prop("checked", true);
        $(".index li").eq(0).siblings().children().prop("checked", false);
    }
}

var ID;

function begin() {
    if (ID === undefined) {
        ID = setInterval(zdlb, 3000);
    }
}

function end() {
    clearInterval(ID);
    ID = undefined;
}

begin();

// 鼠标悬浮事件
$(".c3").hover(mouseover, mouseout);

function mouseover() {
    end();
    $(".index li input").each(function () {
        $(this).click(function () {
            let index = $(this).val();
            $(".lbt li").eq(index).siblings().children("img").addClass("hide").css("display", "none");
            $(".lbt li").eq(index).children("img").fadeIn(1000).removeClass("hide");
        })
    })
}

function mouseout() {
    begin();
}

// 右侧按钮
$(".right_btn").click(function () {
    zdlb();
})

// 左侧按钮
$(".left_btn").click(function () {
    $(".lbt li").each(function () {
        if ($(this).children("img").attr("class") !== "hide") {
            res = $(this).index();
        }
    });
    if (res !== 0) {
        // ***********************使用了fadeIn后，标签display属性为inline，所以要设置回none***********************
        $(".lbt li").eq(res - 1).siblings().children("img").addClass("hide").css("display", "none");
        $(".lbt li").eq(res - 1).children("img").fadeIn(1000).removeClass("hide");
        $(".index li").eq(res - 1).children("input").prop("checked", true);
        $(".index li").eq(res - 1).siblings().children().prop("checked", false);
    } else {
        $(".lbt li").eq(5).siblings().children("img").addClass("hide").css("display", "none");
        $(".lbt li").eq(5).children("img").fadeIn(1000).removeClass("hide");
        $(".index li").eq(5).children("input").prop("checked", true);
        $(".index li").eq(5).siblings().children().prop("checked", false);
    }
})

Readme

自动轮播：
        标签初始化，img标签除了第一个没有hide属性外，其余五个都有hide属性；
        先定义一个zdlb函数，找到没有hide属性的img标签的index值；
        然后让其下一个img标签的其余五个img标签加上hide属性，再把这个img标签加上fadeIn属性，并移除hide属性；
        做一个索引判断，当到了最后一个标签时，索引初始化为为0；
        左下侧小圆点是用input标签实现，根据图片索引的不同，input标签索引也随之变动，且变动后设置默认选中；
        即：checked，这样就能实现图片的自动轮播且小圆点也跟着变化；
        定义一个定时器，3秒执行一次zdlb函数；
        当鼠标放置于轮播图内时，取消定时器；
        当鼠标放置于轮播图外时，继续执行定时器；

右侧按钮：
        其执行思路与zdlb函数一致

左侧按钮：
        与zdlb函数相似，只不过把判断的索引及初始化值等修改一下即可；

左下侧小圆点点击：
        因为点击次按钮也属于鼠标悬浮事件，即悬浮到轮播图内，所以点击事件直接在取消自动轮播函数内实现即可；
        拿到input框点击后的value，然后根据value，根据轮播图index将对应图片显示，其它图片隐藏；

码农公寓

页面展示图

html代码

css代码

js代码

Readme

相关文章