基于jQuery的轮播图插件(新手练习)

最新推荐文章于 2022-02-16 21:48:29 发布

转载最新推荐文章于 2022-02-16 21:48:29 发布 · 994 阅读

文章标签：

#jquery #插件

本文介绍了一款自制的轮播图插件，支持渐隐渐现效果，并可添加标题和按钮。通过简单的HTML结构及CSS样式实现，利用jQuery封装为易于使用的组件。

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

到年末了，今天没事，自己写了一个轮播图的插件….(新手练习, 勿喷)

可以添加标题，可以添加按钮….
切换方式目前只写了一种渐隐渐现的方式…

HTML 结构

<div class="mySlide">
    <ul class="slide-list">
        <li><img src="img/news-img1.png" alt="" /></li>
        <li><img src="img/news-img2.png" alt="" /></li>
        <li><img src="img/news-img3.png" alt="" /></li>
    </ul>
</div>

Css 结构

.mySlide{
    position: relative;
    width: 547px;               /*图片宽度*/
    height: 371px;              /*图片高度*/
}
.slide-list{
    width: 547px;               /*图片宽度*/
    height: 371px;              /*图片高度*/
    overflow: hidden;
    position: relative;
}
.slide-list li {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.slide-count{
    position: absolute;
    width: 100%;
    height: 15px;
    bottom: 8%;
    left: 0;
    text-align: center;
}
.slide-count span{
    display: inline-block;
    *display: inline-block;
    *zoom: 1;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #3e3e3e;
    margin: 0 5px;
    cursor: pointer;
}
.slide-count span.active{
    background-color: #C81623;
}

JavaScript

;(function($){
    $.fn.Slide = function(options){

        var root = this;

        /*
         *  @ 配置参数
         *  oIndex              初始位置
         *  interval             轮播间隔
         *  hasTabBtn        是否包含切换按钮(默认不包含)
         *  hasCountBtn    是否包含计数按钮(默认不包含)
         *  hasTitle             轮播图下面是否具有标题
         *  autpPlay           是否自动播放(默认自动播放)
         */

        var defaults = {
            oIndex : 0,
            interval : 2000,                           // 时间间隔
            hasTabBtn : false,                      // 是否具有切换按钮
            prevBtnClass : "prev-btn",        //  上一页 className
            nextBtnClass : "next-btn",        // 下一页 className
            hasCountBtn : false,                  // 是否具有计数按钮
            countBtnClass : "slide-count",
            hasTitle : false,
            isAutoPlay : true                          // 是否自动播放 
        }

        // 合并参数
        var opts = $.extend({}, defaults, options);
        var slide = {
            play : function(){

                /*
                 * opts的参数 绑定到 slide
                 * slide 赋值 that
                 */

                var that = this;
                for(var p in opts){       
                    that[p] = opts[p];
                }

                that.oUl = root.find(".slide-list");                 // 图片列表
                that.oLi = that.oUl.find("li");                          // 每张图片
                that.imgNum = that.oLi.length;                    // 图片数量
                that.isPlay = null;

                // 添加切换按钮
                if(that.hasTabBtn){
                    that.setTabBtn();
                }

                // 添加计数按钮
                if(that.hasCountBtn){
                    that.setCountBtn(that.imgNum);
                }

                // 自动播放
                if(that.isAutoPlay){
                    that.autoPlay();
                }

               that.init();

            },

            // 初始化
            init : function(){
                var that = this;
                that.oLi.eq(0).css({
                    opacity : 1
                });
                if(that.hasCountBtn){
                    that.countBtn.find("span").eq(0).addClass("active");
                }
            },

            // 添加切换按钮
            setTabBtn : function(){
                var that = this;
                that.prevBtn = $('<div class=' + that.prevBtnClass + '></div>');        // 上一页按钮
                that.nextBtn = $('<div class=' + that.nextBtnClass + '></div>');        // 下一页按钮
                root.append(that.prevBtn);
                root.append(that.nextBtn);

                that.prevBtn.on("click", function(e){
                    e.stopPropagation();
                    that.prevFun();
                });
                that.nextBtn.on("click", function(e){
                    e.stopPropagation();
                    that.nextFun();
                })

                // 链式调用
                return that;
            },

            // 下一页
            prevFun : function(){
                var that = this;
                that.oIndex--;
                that.oIndex < 0 && (that.oIndex = that.imgNum - 1);
                that.toggle("fade");
            },

            // 上一页
            nextFun : function(){
                var that = this;
                that.oIndex++;
                that.oIndex >= that.imgNum && (that.oIndex = 0);
                that.toggle("fade");
            },

            // 创建计数按钮
            setCountBtn : function(oLen){
                var that = this;
                that.countBtn = $('<div class=' + that.countBtnClass + '></div>');       // 计数按钮
                root.append(that.countBtn);

                // 添加点
                for(var i = 0; i < oLen; i++){
                    var oNum = $("<span></span>");
                    that.countBtn.append(oNum);
                }
                var oSpan = that.countBtn.find("span");
                that.countEvent(oSpan);

                return that;
            },

            // 自动轮播
            autoPlay : function(){
                var that = this;
                var countBtn = that.countBtn;
                var interval = that.interval;
                var oLi = that.oLi;
                that.isPlay = setInterval(play, interval);    

                function play(){
                    that.oIndex ++;
                    that.oIndex >= that.imgNum && (that.oIndex = 0);

                    // 图片轮播
                    that.toggle("fade");
                }

                root.hover(function(){
                    clearInterval(that.isPlay);
                }, function(){
                    that.isPlay = setInterval(play, interval);   
                });

                return that;
            },

            // 按钮事件
            countEvent : function(count){
                var that = this;
                var oLi = that.oLi;
                count.each(function(){
                    $(this).on("click", function(e){
                        e.stopPropagation();
                        var i = count.index($(this));
                        that.oIndex = i;
                        $(this).addClass("active").siblings().removeClass("active");
                        oLi.eq(that.oIndex).stop().animate({
                            opacity : 1
                        }).siblings().stop().animate({
                            opacity : 0
                        });
                    });
                })
            },

            // 切换的方式
            toggle : function(pattern){
                var that = this;
                var oLi = that.oLi;
                var countBtn = that.countBtn;
                if(pattern == "fade"){
                    // 图片轮播
                    oLi.eq(that.oIndex).stop().animate({
                        opacity : 1
                    }).siblings("li").stop().animate({
                        opacity : 0
                    });

                    // 小圆点
                    if(countBtn){
                        countBtn.find("span").eq(that.oIndex).addClass("active").siblings().removeClass("active");
                    }
                }
            }
        }

        return this.each(function(){
            slide.play();
        });
    };

})(jQuery);

插件的引入

// 先引入jQuery
<script src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.js"></script>

// 引入插件
<script src="XX/Slide.js"></script>
<script>
    $(".mySlide").Slide({
        hasCountBtn : true
    });
</script>