jquery实现轮播图

程序员文章站 2022-04-24 15:14:10

...

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

思路

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

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

向右轮播动画效果

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

/*这个是溢出元素内容区的内容隐藏*/
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>

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

jquery实现轮播图

jquery实现轮播图

思路

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

向右轮播动画效果

向左轮播动画效果

所有代码

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

实例分享jQuery动态添加.active 实现导航效果代码

用PHP实现把图象上传到数据库

利用php绘制饼状图的实现代码_PHP教程

jquery实现动态操作select选中_jquery

jQuery实现列表的增加和删除

jquery单行文字向上滚动效果的实现代码

Jquery实现自定义弹窗示例_jquery

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

手机端分类页面的效果图实现_html/css_WEB-ITnose

EasyUI实现第二层弹出框的方法_jquery