jquery轮播图代码实现示例

jquery轮播图代码实现大致思路如下:

将图片设为向左浮动,再通过jQuery中animate函数,左右滑动显示图片,使用setInterval()定时函数控制循环,间隔时长。废话不多说,直接给大家上代码吧!

 

jquery轮播图代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery轮播图代码示例 - 付杰博客</title>
    <!--[if gte IE 9]><!-->
    <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
    <![endif]-->
</head>
<body>
<!--CSS代码-->
<style>
    .showbox{
        position: relative;
        height: 300px;
        width: 570px;
        overflow: hidden;
        border: 10px solid #eee;
        background-color: #eee;
        border-radius: 10px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
    }

    .imagebox{
        position: relative;
        height: 270px;
        width: 570px;
        top: 0;
        left: 5px;
        overflow: hidden;
    }

    .imagebox img{
        display: block;
        width: 570px;
        height: 270px;
        float: left;

    }

    .icobox{
        position: absolute;
        border: none;
        width: 120px;
        height: 12px;
        left: 220px;
        bottom: 10px;
        text-align: center;
        line-height: 40px;
        overflow: hidden;
    }

    .icobox span{
        background: url("../image/ico.png") 0px 0px no-repeat;
        width: 12px;
        height: 12px;
        cursor: pointer;
        float: left;
        margin-left: 3px;
    }

    .icobox span.active{
        background: url("../image/ico.png") 0px -12px no-repeat;
        cursor: default;
    }

</style>

<!-- HTML 代码 -->
<!-- 注意:轮播图开始注意这里的图片路径,一定要使用自己的图片路径!-->
<div class="showbox">
    <div class="imagebox">
        <img src="1.jpg" alt="1.jpg">
        <img src="2.jpg" alt="2.jpg">
        <img src="3.jpg" alt="3.jpg">
        <img src="4.jpg" alt="4.jpg">
    </div>
    <div class="icobox">
        <span rel="0" class="active">0</span>
            <span rel="1">1</span>
            <span rel="2">2</span>
            <span rel="3">3</span>
    </div>
</div>

<!-- jquery 代码-->
<script>

    $(document).ready(function() {
        var imagebox=$(".showbox").children('.imagebox')[0],//获得图片容器
            icobox=$(".showbox").children('.icobox')[0],//获得图标容器
            ico=$(icobox).children('span'),//获得图标数组
            imagenum=$(imagebox).children().size(),//获得图片数量
            imageboxWidth=$(imagebox).width(),//获得图片容器的宽度
            imagewidth=imageboxWidth*imagenum,//获得图片的总宽度
            activeID = parseInt($($(icobox).children(".active")[0] ).attr("rel")),//获得激活的图标ID
            nextID=0,//下一个图标的ID
            intervalID,//setInterval()函数的ID
            delaytime=4000,//延迟的时间
            speed=700;//执行速度
        $(imagebox).css({'width' : imagewidth + "px"});

        var rotate=function(clickID) { //图片滑动函数
            if (clickID+1){
                nextID=clickID;
            }else{
                nextID=(activeID+1)%4;
            };
            $(ico[activeID]).removeClass('active');
            $(ico[nextID]).addClass('active');
            $(imagebox).animate({left:"-"+nextID*imageboxWidth+"px"}, speed);//jQuery中的animate函数
            activeID=nextID;
        }

        intervalID=setInterval(rotate,delaytime);//循环函数

        $.each(ico, function(index, val) {
            $(this).click(function(event) {
                clearInterval(intervalID);//清楚之前的定时任务
                var clickID = index;
                rotate(clickID);//运行一次带参数的rotate函数
                intervalID = setInterval(rotate,delaytime);
            });
        });
    });
</script>


</body>
</html>

 

最终效果图如下:

圆点以及0、1、2、3、4没有显示出来,是我的 ico.png 图片没有找好,项目先上线吧!让效果先出来,后期再修改。

jquery轮播图

 

注意:

  1. 给容器设置overflow:hidden十分重要。
  2. 点击小圆点时,一定要清除上一次的定时器,重新开始定时器时,要给intervalID重新赋值。
  3. imagebox的宽度要和image的宽度相等,否则循环显示时,就会出现box中有一大一小两张图片。

 

总结:

实现一个轮播图的功能基本如下:

  1. 图片数量及URL均在HTML中写好。
  2. 可以配置轮播的顺序(正序、逆序)、是否循环、间隔时长。
  3. 图片切换的动画流畅。
  4. 在轮播图下方自动生成对应图片的小点,点击小点,轮播图自动动画切换到对应的图片。
    A+
发布日期:2022年04月06日 11:15:08  所属分类:JQuery
最后更新时间:2022-04-06 11:15:08
付杰
  • ¥ 149.0元
  • 市场价:299.0元
  • ¥ 68.0元
  • 市场价:128.0元
  • ¥ 79.0元
  • 市场价:129.0元
  • ¥ 999.0元
  • 市场价:1599.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: