JQuery实现轮播图教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37012770/article/details/79736283

本文记录了一位前端小白使用JQuery制作某宝风格轮播图的过程，功能包括自动播放、暂停、无限循环、小圆点指示及翻页效果。提供了HTML、CSS和JQuery代码示例，并分享了参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JQuery写轮播

小白学习记录，望大神勿喷
这个轮播，是模拟的某宝款式做的，功能有：

每隔一秒自动播放，无限循环
指针放到图片上，会使轮播暂停
轮播过程中，下方记录顺序的小圆点相继变红
指针悬停在小红点上，对应跳转到相应图，鼠标离开后，轮播从当前页继续执行。
左右翻页的按钮，点击之后会有翻页的效果

代码块

这是HTML部分的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="lunbo.css"/>
    <script src="jquery/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="lunbo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="igs">
    <a class="ig" href="#"><img src="image/img1.jpg"/></a>
    <a class="ig" href="#"><img src="image/img2.jpg"/></a>
    <a class="ig" href="#"><img src="image/img3.jpg"/></a>
    <a class="ig" href="#"><img src="image/img4.jpg"/></a>
    <a class="ig" href="#"><img src="image/img5.jpg"/></a>

    <div class="btn btn1"><</div>
    <div class="btn btn2">></div>

    <ul id="tabs">
        <li class="tab">1</li>
        <li class="tab">2</li>
        <li class="tab">3</li>
        <li class="tab">4</li>
        <li class="tab">5</li>
    </ul>
</div>
</body>
</html>

这是CSS部分

* {
    margin: 0;
    padding: 0;
}

#igs {
    margin: 10px auto;
    width: 700px;
    height: 320px;
    position: relative;
}

.ig {
    position: absolute;
}

#tabs {
    position: absolute;
    list-style: none;
    background-color: rgba(255,255,255,.5);
    left: 45%;
    top: 125%;
    border-radius: 10px;
    padding: 5px 0 5px 5px;
}

.tab{
    float: left;
    text-align: center;
    line-height: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    overflow: hidden;
    margin-right: 4px;
    border-radius: 100%;
    background-color: rgb(200,100,150);
}

.btn{
    position: absolute;
    color: #fff;
    top: 50%;
    width: 40px;
    height: 100px;
    background-color: rgba(255,255,255,0.3);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    margin: 0 5px;
}

.btn2{
    position: absolute;
    right: -25px;
    /*float: right;*/
    margin-right: 0;
}

.btn:hover{
    background-color: rgba(0,0,0,.7);
}

/*css中添加的代码：*/
.bg{ background-color: #f00; }

这是jq部分

//定义全局变量和定时器
var i = 0 ;
var timer;

$(document).ready(function(){
    //用jquery方法设置第一张图片显示，其余隐藏
    $('.ig').eq(0).show().siblings('.ig').hide();

    //调用showTime()函数（轮播函数）
    showTime();

    //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
    $('.tab').hover(function(){
        //获取当前i的值，并显示，同时还要清除定时器
        i = $(this).index();
        Show();
        clearInterval(timer);
    },function(){
        //
        showTime();
    });

    //鼠标点击左侧的箭头
    $('.btn1').click(function(){
        clearInterval(timer);
        if(i == 0){
            i = 5;//注意此时i的值
        }
        i--;
        Show();
        showTime();
    });

    //鼠标点击右侧的箭头
    $('.btn2').click(function(){
        clearInterval(timer);
        if(i == 4){
            i = -1;//注意此时i的值
        }
        i++;
        Show();
        showTime();
    });


});


//创建一个showTime函数
function showTime(){
    //定时器
     timer = setInterval(function(){
        //调用一个Show()函数
        Show();
        i++;
        //当图片是最后一张的后面时，设置图片为第一张
        if(i==5){ i=0;}
    },1000);
}


//创建一个Show函数
function Show(){
    //在这里可以用其他jquery的动画
    $('.ig').eq(i).fadeIn(500).siblings('.ig').fadeOut(500);
    //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
    $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

}