【Jquery】Jquery 实现轮播图

凉生阿新

已于 2024-05-23 17:55:10 修改

阅读量251

点赞数

分类专栏： 📌jQuery 📌JavaScript 文章标签： jquery javascript 前端

于 2022-10-30 21:35:22 首次发布

本文链接：https://blog.csdn.net/liuxin_hello/article/details/127605512

版权

📌JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

📌jQuery

1 篇文章 0 订阅

订阅专栏

1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由发布。

2.jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

3.它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

eg：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点轮播图</title>
    <link href="common.css" type="text/css" rel="stylesheet" />
</head>

<body>

    <div class="wrap-box">
        <ul class="main-box">
            <li>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14252964954%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669718027&t=a8534d34b1e45b63a026cca45238147a" alt="">
            </li>
            <li>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14252973431%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669718027&t=e076026d8bdd93ce91bd7b364e0e553a" alt="">
            </li>
            <li>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14123618464%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669718185&t=6bc670d68d5f5e64c2594063427ac23d" alt="">
            </li>
            <li>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F32f16ed4-d791-3640-a17d-98b048722ddf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669718184&t=eb0cfb1dee43fb887bf07ab5264e24e3" alt="">
            </li>
        </ul>

        <div id="pointsDiv">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
        </div>

        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    // dom 更新后获取的回调 
    $(function () {
        // 初始化样式 
        $(".main-box>li:first").siblings().css('display', 'none')
        $('span:first').css('background', 'red')

        // 标志位:设置显示图片的起始位置  
        let index = 0
        // 点击状态 
        let isToggleImagEnd = true;
        // 获取点击按钮事件回到 
        $('#next').click(function () {
            index === 3 ? index = 0 : index ++ 
            $(".main-box>li").eq(index).css("display", "block").siblings().css("display", "none")
            $('span').eq(index).css("background", 'red').siblings().css("background", "#ccc")
        });

        $('#prev').click(function () {
            index === 0 ? index = 4 :index -- 
            $(".main-box>li").eq(index).css("display", "block").siblings().css("display", "none")
        });

        // 圆点点击事件 
        $("span").click( function() {
            // this 指向调用者本省 
            index = $(this).index()
            $('.main-box>li').eq(index).css('display','block').siblings().css('display','none')
            $('span').eq(index).css('background',"red").siblings().css('background','pink')
        })
    })




</script>

</html>

common.css

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

html {
    width: 100%;
    height: 100%;
}
/* 外包裹 */
.wrap-box {
    position: relative;
    width: 350px;
    height: 400px;
    margin: 200px auto;
}

/* 切换箭头 */
.arrow {
    cursor: pointer;
    display: none;
    display: inline-block;
    line-height: 39px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    background-color: RGBA(0, 0, 0, 0.3);
    color: #fff;
}

/* 图片 */
img {
    width: 350px;
    height: 400px;
}

/* 图片包裹 */
.main-box>li {
    float: left;
}

/* 箭头位置 */
#prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); 
}

/* 小球样式 */
 /*包含所有圆点按钮的<div>*/
 #pointsDiv {
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

/*所有的圆点<span>*/
#pointsDiv span {
    cursor: pointer;
    float: left;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 8px;
}

/*鼠标移到切换图标上时*/
.arrow:hover {
    background-color: RGBA(0, 0, 0, 0.7);
}