欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery轮播图的实现代码以及实现的原理

程序员文章站 2022-04-30 18:10:00
...
本篇文章给大家带来的内容是关于jquery轮播图的实现代码以及实现的原理,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

源码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>JQuery轮播图</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .container{
            width:600px;
            height:400px;
            overflow: hidden;
            position:relative;
            margin:0 auto;
        }
        .list{
            width:3000px;
            height:400px;
            position:absolute;

        }
        .list>img{
            float:left;
            width:600px;
            height:400px;
        }
        .pointer{
            position:absolute;
            width:100px;
            bottom:20px;
            left:250px;
        }
        .pointer>span{
            cursor:pointer;
            display:inline-block;
            width:10px;
            height:10px;
            background: #7b7d80;
            border-radius:50%;
            border:1px solid #fff;
        }
        .pointer .on{
            background: #28a4c9;
        }
        .arrow{
            position:absolute;
            text-decoration:none;
            width:40px;
            height:40px;
            background: #727d8f;
            color:#fff;
            font-weight: bold;
            line-height:40px;
            text-align:center;
            top:180px;
            display:none;
        }
        .arrow:hover{
            background: #0f0f0f;
        }
        .left{
          left:0;
        }
        .right{
            right:0;
        }
        .container:hover .arrow{
            display:block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="list" style="left:0px;">
            <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
            <img src="../static/image/banner.jpg" alt="1"/>
            <img src="../static/image/slide1.jpg" alt="2"/>
            <img src="../static/image/slide1.jpg" alt="3"/>
            <img src="../static/image/slide1.jpg" alt="4"/>
            <img src="../static/image/photo1.jpg" alt="5"/>
            <!--<img src="../static/image/banner.jpg" alt="1"/>-->
        </div>
        <div class="pointer">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="#" class="arrow left">&gt;</a>
        <a href="#" class="arrow right">&lt;</a>
    </div>

    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script>
        var imgCount = 5;
        var index = 1;
        var intervalId;
        var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
        //自动轮播功能 使用定时器
        autoNextPage();
        function autoNextPage(){
            intervalId = setInterval(function(){
                nextPage(true);
            },3000);
        }
        //当鼠标移入 停止轮播
        $('.container').mouseover(function(){
            console.log('hah');
            clearInterval(intervalId);
        });
        // 当鼠标移出,开始轮播
        $('.container').mouseout(function(){
            autoNextPage();
        });
        //点击下一页 上一页的功能
        $('.left').click(function(){
            nextPage(true);
        });
        $('.right').click(function(){
            nextPage(false);
        });
        //小圆点的相应功能  事件委托
        clickButtons();
        function clickButtons(){
            var length = buttonSpan.length;
            for(var i=0;i<length;i++){
                buttonSpan[i].onclick = function(){
                    $(buttonSpan[index-1]).removeClass('on');
                    if($(this).attr('index')==1){
                        index = 5;
                    }else{
                        index = $(this).attr('index')-1;
                    }
                    nextPage(true);

                };
            }
        }
        function nextPage(next){
            var targetLeft = 0;
            //当前的圆点去掉on样式
            $(buttonSpan[index-1]).removeClass('on');
            if(next){//往后走
                if(index == 5){//到最后一张,直接跳到第一张
                    targetLeft = 0;
                    index = 1;
                }else{
                    index++;
                    targetLeft = -600*(index-1);
                }

            }else{//往前走
                if(index == 1){//在第一张,直接跳到第五张
                    index = 5;
                    targetLeft = -600*(imgCount-1);
                }else{
                    index--;
                    targetLeft = -600*(index-1);
                }

            }
            $('.list').animate({left:targetLeft+'px'});
            //更新后的圆点加上样式
            $(buttonSpan[index-1]).addClass('on');


        }


    </script>
</body>

</html>

效果图:

jquery轮播图的实现代码以及实现的原理

原理:

页面结构方面:

  • 将轮播图容器设置成相对定位,宽度设置成图片的宽度;容器中分为四部分:轮播的图片;点击的小按钮;前一张;后一张

样式方面:

  • 轮播图容器为相对定位,宽度/高度设置成图片的宽度/高度,设置overflow为hidden;

  • 容器中的每一部分都设置成绝对定位,放到相应的位置;

  • 轮播图片的容器宽度设置成所有图片的宽度和,left开始先设置为0;

  • 每张图片宽度一样,都设成左浮动,左右图片都在一行排列,所以轮播图的实质是装有图片的容器的移动,每次移动的距离为一张图片的宽度,这样每次就只显示一张图片;

  • 前一张/后一张设置成display为none,当鼠标移入总容器时,再设置成display为block

功能方面:

  • 自动轮播为一个定时循环机制setInteval,鼠标移入,循环停止,移除循环继续;

相关推荐:

jquery图片轮播特效代码分享_jquery

jQuery手动点击实现图片轮播特效_jquery

基于JQuery实现图片轮播效果(焦点图)_jquery

以上就是jquery轮播图的实现代码以及实现的原理的详细内容,更多请关注其它相关文章!

相关标签: jquery轮播图