关闭

插件封装(banner)

标签: bannerpluginjsjquery
451人阅读 评论(0) 收藏 举报
分类:

这个插件是在上一个的基础是进行封装的,这个插件支持水平切换和垂直切换.

这里是插件结构

;(function(){
    //定义插件名称。方便后面调用
    $.fn.pluginName = function(options){//options 经常用这个表示有许多个参数。
        var defaults = {};//设置一些默认值
        //这里就是把用户自定义的值覆盖了默认用户的值。如果用户没定义值,就用系统自定义的。 
        var settings = $.extend({}, defaults, options);
        this.each(function(index, el) {
          //往里面添加你想添加的代码
        });
        //返回this
        return this;
        
    }
})(jQuery);

我封装好的代码里都有注释,所以我就不用在这里一一的解答咯,有什么不明白的可以call我

htm+css代码:

<!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{ position: absolute;}
        .slider .slider_main li{ width: 1000px; height: 485px; float:left;}
        .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 .sliderPreNext .slider_pre,.slider .sliderPreNext .slider_next{width: 51px;top:46%; height: 51px; position: absolute; display:inline-block; *display:inline; zoom:1; z-index: 8;}
        .slider .sliderPreNext .slider_pre{left:10px;  background: url(../imgs/btn.png) no-repeat 0 0;}
        .slider .sliderPreNext .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" id="slider_main">
        <li class="111"><a href="#"><img src="../imgs/1.png" alt="" /></a></li>
        <li class="222"><a href="#"><img src="../imgs/2.png" alt="" /></a></li>
        <li class="333"><a href="#"><img src="../imgs/3.png" alt="" /></a></li>
        <li class="444"><a href="#"><img src="../imgs/4.png" alt="" /></a></li>
        <li class="555"><a href="#"><img src="../imgs/5.png" alt="" /></a></li>
    </ul>
    <!-- 点点索引 -->
    <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="sliderPreNext"> 
        <a class="slider_pre" id="slider_pre" href="javascript:;"></a>   
        <a class="slider_next" id="slider_next" href="javascript:;"></a>
    </div> 
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.BannerPlugin.js"></script>
<script type="text/javascript">
$(function(){
    $("#sliderBox").BannerPlugin({
        duration:1500,
        eventType:'hover',
        horize:false
    });
});
</script>
</html>


封装好的js:

/* 
* @Author: liufang
* @describe:   Support vertical and horizontal movement of plug-ins
* @Last Modified by name:   liufang
* @Last Modified time: 2017-01-03 16:53:42
*/
;(function(){
    $.fn.BannerPlugin = function(options){
        var defaults = {//设置一下默认值
            sliderMain :".slider_main",//获取li的长度
            sliderNav :'.slider_nav li',
            prev :'#slider_pre',
            next :'#slider_next',
            pagination : true,//是否显示分页
            easing : 'ease',//特效方式,ease-in,ease-out,linear
            speed :1000,//播放速度
            times :2000,//定时器时间
            current :'on',//为当前的数据添加背景颜色或者其他
            eventType :'click',//点点序列点击事件默认值为click事件,还有hover事件
            horize:true, //默认横向,false垂着方向
            playAuto:true//是否支持自动播放
        };
        var settings = $.extend({}, defaults, options);
        this.each(function(index, el) {
            var _this = $(this),
                len = $(settings.sliderMain).find("li").length,
                index = 0,
                Interval = null,//设置定时器
                _sliderWidth = _this.find('li img').width(),
                _sliderHeight = _this.find('li img').height(),
                _slilerprev = _this.find(settings.prev),
                _slilernext = _this.find(settings.next);
            console.log("len:"+len);

            //水平滚动
            function inithorizontal(index){
                //根据index值计算ul元素的left值
                var nowLeft = -index * _sliderWidth;
                $(settings.sliderMain).css({"width": len * _sliderWidth + 'px' });
                $(settings.sliderMain).stop(true, false).animate({'left': nowLeft}, settings.speed);//图片移动
                $(settings.sliderNav).removeClass(settings.current).eq(index).addClass(settings.current);//点点
            }


            //垂着滚动
            function initVertical(index){
                //根据index值计算ul元素的top值
                var nowTop = -index * _sliderHeight;
                $(settings.sliderMain).stop(true, false).animate({'top': nowTop}, settings.speed);//图片移动
                $(settings.sliderNav).removeClass(settings.current).eq(index).addClass(settings.current);//点点
                console.log("tallWidth:"+$(settings.sliderMain).width());
            }


            // hover
            $(this).hover(function() {
                clearInterval(Interval);
            }, function() {
                playAuto();
            });
            if(settings.eventType == 'click'){
                $(settings.sliderNav).on('click', function(event) {
                    event.preventDefault();
                    clearInterval(Interval);
                    var index = $(this).index();
                    settings.horize == true ? inithorizontal(index) : initVertical(index);
                });
            }
            if(settings.eventType == 'hover'){
                $(settings.sliderNav).hover(function() {
                    clearInterval(Interval);
                    var index = $(this).index();
                    settings.horize == true ? inithorizontal(index) : initVertical(index);
                }, function() {

                });
            }


            //上一页
            function sliderPrev(){
                index--;
                if(index < 0){
                    index = len -1;
                }
                settings.horize == true ? inithorizontal(index) : initVertical(index);
            }
            //下一页
            function sliderNext(){
                index++;
                if(index > len - 1){
                    index = 0;
                }
                settings.horize == true ? inithorizontal(index) : initVertical(index);
            }
            if(settings.prev || settings.next){
                _slilerprev.add(_slilernext).click(function(event) {
                    clearInterval(Interval);
                    $(this).is(_slilernext) ? sliderNext():sliderPrev();
                });
            }
            

            //设置定时器
            function playAuto(){
                Interval = setInterval(function(){
                    index++;
                    if(index > len - 1 ){
                        index = 0;
                    }
                    settings.horize == true ? inithorizontal(index) : initVertical(index);
                },settings.times);
            }
            if(settings.playAuto == true){
                playAuto();
            }
            
        });
        //返回
        return this;     
    }
})(jQuery);







0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17009次
    • 积分:350
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:9篇
    • 译文:0篇
    • 评论:10条
    文章分类
    最新评论