封装轮播插件

最新推荐文章于 2024-08-15 18:01:46 发布

晨夕_love

最新推荐文章于 2024-08-15 18:01:46 发布

阅读量3.2k

点赞数 1

分类专栏： html+css+js 插件封装 javascript jquery 文章标签：插件 javascript jquery slider banner

本文链接：https://blog.csdn.net/chenxi1025/article/details/53888759

版权

html+css+js 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

以前写网页遇到轮播的时候，要么是引用别人已经封装好的插件（但是别人分装好的存在在很多大量的代码冗余），要么就是慢吞吞的自己写js,有时候写的布局不一样又要从新写一个js，自从我学习咯写封装的juqery方法之后，我就在自己尝试着封装js，这样以后写的时候我直接把他拉过来，然后修改初始默认值就行。

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。

;(function($){

$.fn.Myplugin = function(opitons){
//设置各种默认的初始值
var defaults = {
};
//合并初始设置
var settings = $.extend({}, defaults , opitons);
this.each(function(){

//写入自己的代码

});
return this;
}
})(jQuery);

这里就是封装插件的框架，现在你就可以往里面添加代码咯。具体的请往我分享的另外一篇文章查看http://blog.csdn.net/chenxi1025/article/details/52222327

下面是我分装的一个简单的轮播图，

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>banner图学习中</title>
    <style type="text/css">
        *{margin:0; padding: 0;font-family: 'Microsoft Yahei';}
        a{text-decoration: none;} 
        li{list-style: none;}
        img{border:0;}
        ul{list-style: outside none none;} 
        .slider{ width: 1000px; height: 485px;border:1px solid #000; margin:0 auto; overflow: hidden; position: relative;text-align: center;}
        .slider .slider_main li{ width: 1000px; height: 485px;position: absolute;}
        .slider .slider_main img{ width: 1000px; height: 485px;}
        .slider .slider_nav{ width:160px; height:15px;bottom:15px; left: 40%; position: absolute;border:1px solid #ff0000;text-align: center;}
        .slider .slider_nav li{ float: left; width: 15px; height: 15px; cursor: pointer; background: #ccc; text-align: center; margin-left:10px;border-radius: 50%;}
        .slider-nav .on{background: #f73f07; }
        .slider .slider_nav li.on{ background: #f73f07; }
        .slider .slider_page .slider_pre,.slider .slider_page .slider_next{width: 51px;top:46%; height: 51px; position: absolute; display:inline-block; *display:inline; zoom:1; z-index: 8;}
        .slider .slider_page .slider_pre{left:10px;  background: url(../imgs/btn.png) no-repeat 0 0;}
        .slider .slider_page .slider_next{right:10px; background: url(../imgs/btn.png) no-repeat -58px 0;}
        .slider .slider_pre:hover{background: url(../imgs/btn.png) no-repeat 0 -70px;}
        .slider .slider_next:hover{background: url(../imgs/btn.png) no-repeat -58px -70px;}
    </style>
</head>
<body>
<!-- 第一步先放一个大盒子，装图片和相关按钮 -->
<div class="slider" id="sliderBox">
    <!-- 第二步放图片布局 -->
    <ul class="slider_main">
        <li class=""><a href="#"><img src="imgs/1.png" alt="" /></a></li>
        <li><a href="#"><img src="imgs/2.png" alt="" /></a></li>
        <li><a href="#"><img src="imgs/3.png" alt="" /></a></li>
        <li><a href="#"><img src="imgs/4.png" alt="" /></a></li>
        <li><a href="#"><img src="imgs/5.png" alt="" /></a></li>
    </ul>
    <!-- <div class="slider_extro"> -->
    <!-- 点点索引 -->
    <ul class="slider_nav">
        <li class="slider_item on"></li>
        <li class="slider_item"></li>
        <li class="slider_item"></li>
        <li class="slider_item"></li>
        <li class="slider_item"></li>
    </ul>
    <!-- 左右箭头 -->
    <div class="slider_page"> 
        <a class="slider_pre" href="javascript:;"></a>   
        <a class="slider_next" href="javascript:;"></a>
    </div> 
    <!-- </div> -->
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.IndexBanner.js"></script>
<script type="text/javascript">
$("#sliderBox").jquerySlider ({
    auto:false,
    duration:1000
});
</script>
</html>

封装好的js文件：

/* 
* @Author: Lydia
* @Date:   2016-07-25 17:30:07
* @Last Modified by name:   Lydia
* @Last Modified time: 2017-12-20 15:03:39
*/
;(function($){
    //定义插件名称 jquerySlider
    $.fn.jquerySlider = function(options){
        //定义默认设置
        var defaults = {
            auto: true, //是否自动播放
            sliderli:'.slider_main li',
            pagenvali:'.slider_nav li', //分页按钮集合
            active:"active",
            prev: '.slider_pre', //上一页
            next: '.slider_next', //下一页
            actions:"click",
            curren:0,
            times: 3000, //定时器时间
            flag: true //默认从左往右播放
        };


        //可以被拓展的默认设置(通过使用$.extend)
        var options = $.extend({}, defaults, options); //{}这个代表是把defaults 和后面的optinso整合一起返回给你options


        this.each(function(){
            var _this = $(this),
                sliderli = $(options.sliderli,_this),
                pagenvali = $(options.pagenvali,_this),
                interval = null;//定时器


            //分页
            pagenvali.on(options.actions, function(event) {
                event.preventDefault();
                var index = $(this).index();
                $(this).addClass(options.active).siblings(pagenvali).removeClass(options.active);
                sliderli.eq(index).fadeIn().siblings(sliderli).fadeOut();
            });


            //上一页，下一页，注意这里因为是上一页和下一页，记得要打逗号  + “ ，”+
            $(options.prev+','+options.next).on('click',  function(event) {
                event.preventDefault();
                clearInterval(interval);//清除定时器
                $(this).is(options.prev) ? sliderchage(false) : sliderchage(true);
            });


            //hover
            _this.hover(function() {
                clearInterval(interval);
            }, function() {
                autoplay();
            });


            //切换js
            function sliderchage(flag){
                console.log("循环播放")
                if(flag){
                     if(options.curren >= sliderli.length-1){
                        options.curren = 0 ;
                    }else{
                        options.curren++;
                    }
                }else{
                    if(options.curren <= 0){
                        options.curren = sliderli.length-1;
                    }else{
                        options.curren--;
                    }
                }
                pagenvali.eq(options.curren).addClass(options.active).siblings().removeClass(options.active);
                sliderli.eq(options.curren).fadeIn().siblings(sliderli).fadeOut();
            }


            //自动播放
            function autoplay(){
                interval = setInterval(function(){
                        sliderchage(options.flag);
                    }, options.times);
            }


            //是否自动播放
            options.auto ? autoplay():''
        });


        //返回
        return this;    
    }
})(jQuery);

里面可能还有一些精简的方法，还望各位大神指点指点，谢谢！

后期如果有时间的话我会把一些特效添加上，如果以上代码有不足的地方，请到大家及时指出，希望你有所收获