jquery实现轮播图

最新推荐文章于 2024-05-28 19:26:08 发布

sunboot.com.cn

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量1.2k

点赞数 2

文章标签：轮播图 jquery

本文链接：https://blog.csdn.net/qq_29834241/article/details/80309960

版权

我们使用html + css + jquery实现轮播图

思路

大概思路是这样的
1. 显示第一张，隐藏其他几张，然后使用定时器，把将要显示的图片通过定位于图片并排，利用动画效果实现图片轮播
2. 我们利用一个class表示显示图片的当前位置
3. 轮播动画有两种，向右轮播和向左轮播。所以定位图片并排和动画效果都不一样

需要注意的地方，具体请看所有代码

向右轮播动画效果

向右轮播时，假设当前是第一张需要轮播到第二张，我们利用定位把第二种图片并排放在第一张图片的右边像这样
这里写图片描述

/*这个是溢出元素内容区的内容隐藏*/
overflow: hidden;

然后通过动画效果把第二张图片向左移动到o px，详情可以查看play函数

向左轮播动画效果

向左轮播时刚好相反，假设当前是第二种需要轮播到第一张，我们利用定位把第一张图片并排放在第二种图片的左边-.-效果我就不演示了
然后通过动画效果把第一张或者第二种向右移动到相应的位置就行了。

所有代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>首页</title>
        <style type="text/css">
            .mp0{
                margin: 0;
                padding: 0;
            }
            .bl-item{
                width: 100%;
                height: 100%;
                position: relative;
                /*这个是溢出元素内容区的内容隐藏*/
                overflow: hidden;
            }
            .bl-item>* {
                display: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 250px;
                color: #fff;
            }
            .bl-content{
                position: relative;
                left: 0;
                top: 0;
            }
            .bl-this{
                display: block;
                /*background-color: #009688;*/
            }
            .bl-show{
                display: block;
            }
            .bl-item>*:nth-child(2n) {
                background-color: #009688;
            }
            .bl-item>*:nth-child(2n+1) {
                background-color: #5FB878;
            }
            .layui-carousel-left{
                left: 0;
            } 
            .layui-carousel-next{
                left: 100%;
            }

            .layui-carousel-pre{
                left: 0%;
            }

            .layui-carousel-left,.layui-carousel-next,.layui-carousel-pre{
                opacity:1;
            }

            .bl-ind {
                position: relative;
                top: -35px;
                width: 100%;
                line-height: 0!important;
                text-align: center;
                font-size: 0;
            }

            .bl-ind ul {
                display: inline-block;
                padding: 5px;
                background-color: rgba(0,0,0,.2);
                border-radius: 10px;
                -webkit-transition-duration: .3s;
                transition-duration: .3s;
            }
            .bl-ind li {
                display: inline-block;
                width: 10px;
                height: 10px;
                margin: 0 3px;
                font-size: 14px;
                background-color: #e2e2e2;
                background-color: rgba(255,255,255,.5);
                border-radius: 50%;
                cursor: pointer;
                -webkit-transition-duration: .3s;
                transition-duration: .3s;
            }
            .bl-ind li.ind-this {
                background-color: #fff;
            }


            .layui-icon {
                font-family: layui-icon!important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .layui-carousel-arrow {
                opacity: 0;
                position: absolute;
                left: 10px;
                top: 50%;
                margin-top: -18px;
                width: 36px;
                height: 36px;
                text-align: center;
                font-size: 20px;
                border: 0;
                border-radius: 50%;
                background-color: rgba(0,0,0,.2);
                color: #fff;
                -webkit-transition-duration: .3s;
                transition-duration: .3s;
                cursor: pointer;
            }
            .add{
                left: auto!important;
                right: 10px;
            }

            .layui-carousel-arrow:hover, .bl-ind ul:hover {
                background-color: rgba(0,0,0,.35);
            }


        </style>
    </head>
    <body class="mp0">
        <div class="bl-content" style="height: 500px;width: 100%;">
            <div class="bl-item">
                <!-- bl-this=开始位置 -->
                <div id="bla" class="bl-this">
                    <img src="img/1.jpg" style="width: 100%;">
                </div>
                <div id="blb" class="">
                    <img src="img/2.jpg" style="width: 100%;">
                </div>
                <div id="blc" class="">
                    <img src="img/1.jpg" style="width: 100%;">
                </div>
                <div id="bld" class="">
                    <img src="img/2.jpg" style="width: 100%;">
                </div>
                <div id="ble" class="">
                    <img src="img/1.jpg" style="width: 100%;">
                </div>
            </div>
            <div class="bl-ind">
                <ul>
                    <li class="ind-this"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <button class="layui-icon layui-carousel-arrow sub" ><</button>
            <button class="layui-icon layui-carousel-arrow add" >></button>
        </div>

    </body>

    <script type="text/javascript" src="js/jquery.js"></script>


    <script type="text/javascript">
        //开始下标
        var length,
            startIndex,
            currentIndex = 0,
            interval,
            hasStarted = false, //是否已经开始轮播
            t = 2000;
        length = $(".bl-item").children().length;
        setStartIndex();

        //点击下一个
        $(".add").click(function(){
            next();
        });
        //点击上一个
        $(".sub").click(function(){
            pre();
        });
        //点击ind
        $(".bl-ind").children().children().click(function(){
            //点击原来的不执行
            console.log("currentIndex="+currentIndex+"/this="+$(this).index());
            var index = $(this).index();
            if(currentIndex != index){
                var startIndex = currentIndex;
                currentIndex = index;
                play(startIndex,currentIndex);
            }

        });

        function play(startIndex, currentIndex) {
            if(startIndex < currentIndex){
                //
                //轮播动画
                $(".bl-item").children().eq(startIndex).addClass("layui-carousel-left");
                $(".bl-item").children().eq(currentIndex).addClass("bl-this layui-carousel-left layui-carousel-next");
                $(".bl-item").children().eq(currentIndex).animate({left:0},300,
                function(){
                    $(".bl-item").children().eq(startIndex).removeClass("bl-this layui-carousel-left");
                    $(".bl-item").children().eq(currentIndex).removeClass("layui-carousel-left layui-carousel-next");
                    $(".bl-item").children().eq(currentIndex).removeAttr("style");
                });
            }else{
                //轮播动画
                $(".bl-item").children().eq(startIndex).addClass("layui-carousel-left");
                $(".bl-item").children().eq(currentIndex).addClass("bl-this layui-carousel-pre");
                $(".bl-item").children().eq(startIndex).animate({left:"100%"},300,
                function(){
                    $(".bl-item").children().eq(startIndex).removeClass("bl-this layui-carousel-left");
                    $(".bl-item").children().eq(currentIndex).removeClass("layui-carousel-pre");
                    $(".bl-item").children().eq(startIndex).removeAttr("style");
                });
            }

            //bl-ind动画
            $(".bl-ind").children().children().eq(startIndex).removeClass("ind-this");
            $(".bl-ind").children().children().eq(currentIndex).addClass("ind-this");
        }

        start();

        /**
         * 向前翻页
         */
        function pre() {
            var startIndex = currentIndex;
            currentIndex = (--currentIndex + length) % length;
            play(startIndex, currentIndex);
        }
        /**
         * 向后翻页
         */
        function next() {
            var startIndex = currentIndex;
            currentIndex = ++currentIndex % length;
            play(startIndex, currentIndex);
        }

        //轮播
        function start(){
            if(!hasStarted) {
                hasStarted = true;
                interval = setInterval(next, t);
            }
        }
        /**
         * 停止轮播
         */
        function stop() {
            clearInterval(interval);
            hasStarted = false;
        }


        //赋值当前下标
        function setStartIndex(){
            var cld = $(".bl-item").children();
            cld.each(function(index){
                var t = $(this).hasClass("bl-this");
                if(t === true){
                    startIndex = index;
                }
            });
        }

        //监听hover
        $(".bl-content").hover(function(){
            //停止轮播
            stop();

            $(".sub").animate({left:"30px",opacity: 1},100);
            $(".add").animate({right:"30px",opacity: 1},100);
        },function(){
            $(".sub").animate({left:"0px",opacity: 0},100);
            $(".add").animate({right:"0px",opacity: 0},100);
            //开始轮播
            start();
        });
    </script>

</html>

运行效果，图片自己去下载了

这里写图片描述

sunboot.com.cn

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现轮播图

我们使用html + css + jquery实现轮播图思路需要注意的地方，具体请看所有代码向右轮播动画效果向左轮播动画效果所有代码运行效果，图片自己去下载了思路大概思路是这样的 1. 显示第一张，隐藏其他几张，然后使用定时器，把将要显示的图片通过定位于图片并排，利用动画效果实现图片轮播 2. 我们利用一个class表示显示图片的当前位置 ...
复制链接

扫一扫