响应式轮播插件（无焦点&可链式操作）

最新推荐文章于 2025-07-31 12:05:09 发布

豆i浆

最新推荐文章于 2025-07-31 12:05:09 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery less 文章标签：响应式插件 jQuery html css

本文链接：https://blog.youkuaiyun.com/sinat_19327991/article/details/54836644

jQuery 同时被 2 个专栏收录

30 篇文章

订阅专栏

less

1 篇文章

订阅专栏

本文介绍了一个从零开始编写的全屏轮播插件，包括HTML、CSS和JavaScript代码实现。该插件支持自定义效果，并可根据不同屏幕尺寸调整布局。

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

**暂时还没加焦点以后再慢慢加上更多的可定制效果
第一次写全屏轮播遇到一些固定轮播没遇到过的事情
每一次成功写出自己想要的效果都会很满足，虽然网上很多完善的插件，但别人的毕竟是别人的再好用也不是自己的成果我以后会慢慢的把这个插件完善起来**

效果图预览
这里写图片描述

html

<!DOCTYPE html>
<!--声明 本页面语言为中文-->
<html lang="en">
<head>
    <!--使用编码为 utf-8 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">    
    <title>固定尺寸 轮播图</title>
    <!--全局初始化样式-->
    <link rel="stylesheet" href="css/css.css">
    <!--轮播图样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--轮播容器-->
<div class="lunbo">
    <!--轮播图片容器-->
    <ul class="carouselDom">
        <li>
            <a href="javascript:void(0);" style="background: url(img/2.jpg);"></a>
        </li>
        <li>
            <a href="javascript:void(0);" style="background: url(img/3.jpg);"></a>
        </li>
        <li>
            <a href="javascript:void(0);" style="background: url(img/4.jpg);"></a>
        </li>
        <li>
            <a href="javascript:void(0);" style="background: url(img/5.jpg);"></a>
        </li>
    </ul>
    <!--左箭头-->
    <a class="arrow left_arrow" href="javascript:void(0);" style="background: url(img/index-banner-left.png) no-repeat;"></a>
    <!--右箭头-->
    <a class="arrow right_arrow" href="javascript:void(0);" style="background: url(img/index-banner-right.png) no-repeat;"></a>
</div>
<!--<img src="img/5.jpg" alt="轮播图5" />-->
    <!--JQ库文件-->
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <!--轮播图JS文件-->
    <script type="text/javascript" src="js/style.js"></script>
    <!--页面调用部分-->
    <script type="text/javascript">
    $(function(){
        $(".lunbo").Carousel({
            arrows:true,//箭头是否显示
            focus:true,//焦点是否显示
            speed:2500,//轮播切换速度
            left_Arrows:".left_arrow",//左箭头
            right_Arrows:".right_arrow",//右箭头
            carouselDomBox:".carouselDom",//轮播容器
            carouselDom:".carouselDom li",//轮播元素            
        });
    });
    </script>
</body>
</html>

less

body{
    overflow: hidden;
}
.lunbo{
    position: relative;
    overflow: hidden;
    .carouselDom{
        overflow: hidden;
        height: 0;
        padding-bottom: 26%;
        transition: padding-bottom 1s;
        -moz-transition: padding-bottom 1s;  /* Firefox 4 */
        -webkit-transition: padding-bottom 1s;   /* Safari 和 Chrome */
        -o-transition: padding-bottom 1s;    /* Opera */       
        li{
            float: left;
            line-height: 0px;
            position: relative;
            top: 0;  
            a{      
                display: block;
                background-size: cover!important;
                background-position: 50% 50%!important;  
                height: 100%;
                width: 100%;                 
            }
        }
    }
    .arrow{
        position: absolute;
        display: block;
        width: 50px;
        height: 98px;
        top: 50%;
        filter: Alpha(opacity=30); /* IE */   
        -moz-opacity:0.3;    /* FF 主要是为了兼容老版本的FF */
        opacity:0.3;    /* FF */
        background-repeat: no-repeat!important;
        background-position: 50% 50%!important;
        transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        -o-transform: translate(0%, -50%);
        -moz-transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
        -moz-transition: opacity 1s;  /* Firefox 4 */
        -webkit-transition: opacity 1s;   /* Safari 和 Chrome */
        -o-transition: opacity 1s;    /* Opera */    
    }
    .left_arrow{
        left: 10px;    
        &:hover{
            filter: Alpha(opacity=100); /* IE */   
            -moz-opacity:1;    /* FF 主要是为了兼容老版本的FF */
            opacity:1;    /* FF */            
        } 
    }
    .right_arrow{
        right: 15px;
        &:hover{
            filter: Alpha(opacity=100); /* IE */   
            -moz-opacity:1;    /* FF 主要是为了兼容老版本的FF */
            opacity:1;    /* FF */            
        }         
    }
}

@media only screen and (max-width: 992px) {
    .lunbo{
        .carouselDom{
            padding-bottom: 36%;
        }
    }    
}

@media only screen and (max-width: 768px) {
    .lunbo{
        .carouselDom{
            padding-bottom: 40%;
        }
    }    
}

@media only screen and (max-width: 480px) {
    .lunbo{
        .carouselDom{
            padding-bottom: 46%;
        }
    }    
}

;(function($){
    $.fn.Carousel = function(options){//定义插件的名称，这里为Carousel
        var defaults  = {
            arrows:true,//箭头是否显示
            focus:true,//焦点是否显示
            speed:2500,//轮播切换速度
            left_Arrows:".left_arrow",//左箭头
            right_Arrows:".right_arrow",//右箭头
            carouselDomBox:".carouselDom",//轮播容器
            carouselDom:".carouselDom li",//轮播元素
        };      

        var ops = $.extend(defaults,options);//将默认值和传入的参数进行合并
        return this.each(function(){        
            function realTime_w(){
                var win_w = $(window).width(); //实时获取窗口宽度
                var dom_box_h = $(ops.carouselDomBox).css("padding-bottom");  
                var dom_len = $(ops.carouselDom).length;//获取轮播数量
                var dom_box = $(ops.carouselDomBox).width(win_w*dom_len);//设置轮播容器宽度
                var dom_w = $(ops.carouselDom).width(win_w);//设置轮播元素宽度
                var dom_h = $(ops.carouselDom).height(dom_box_h);//设置轮播元素高度
                return win_w
            }           

            var carouseData = setInterval(realTime_w,100);//实时更新数据
            var w = realTime_w();
            var i = 0;
            var c_dom = $(ops.carouselDom);

            $(window).resize(function(){
                window.location.reload();           
            });         

            /*鼠标移入轮播暂停*/
            c_dom.bind("mouseover",function(){
                clearInterval(time);
            });

            /*鼠标移出轮播开始*/
            c_dom.bind("mouseout",function(){
                time = setInterval(automatic,ops.speed);//每隔1.5秒触发计时事件
            });

            /*左箭头*/
            $(ops.left_Arrows).bind("click",function(){
                arrows_a(-1);
            });

            /*右箭头*/
            $(ops.right_Arrows).bind("click",function(){
                arrows_a(1);
            });

            /*轮播自动运行函数*/
            function automatic(){
                arrows_a(1);
            }   

            /*轮播主体代码*/
            function arrows_a(s){
                i += s;
                clearInterval(time);
                /*当轮播图到第一张时 再点击 返回到最后一张*/
                if(i<0){
                    i=c_dom.length -1;
                }
                /*当轮播到最后一张时 再点击 返回到第一张*/
                if(i>=c_dom.length){
                    i=0;
                }
                c_dom.stop().animate({right:w*i});                  
                time = setInterval(automatic,ops.speed);
            }           
            time = setInterval(automatic,ops.speed);//每隔1.5秒触发计时事件
        });         
    }
})(jQuery);