碼上快樂

相關內容    簡體    繁體

jQuery插件開發之boxScroll與marquee

本文轉載自   查看原文   2015-07-13 20:25   1781    jQuery/ boxScroll/ marquee

BoxScroll

　　常見圖片輪播效果的簡單實現。可以數字列表控制或者左右按鍵控制。邏輯很簡單，下面的Marquee形成環，這個到了盡頭得往回跑，看看注釋就知道了。

　　圖片輪播GitHub:https://github.com/codetker/myBoxScroll。具體演示:http://www.夢縈無雙.xyz/myBoxScroll/demo/Default.html。

　　

　　插件效果：　　

       實現常見的盒子圖片滾動效果（或稱圖片輪播）
　　可修改后附加緩動函數，實現多種效果，詳情見緩動函數表 http://easings.net/zh-cn#easeInOutQuad
　　Github https://github.com/codetker/TokenFamily

　　注：使用scroll-left或scroll-top的時候值只能是正數，內層必須寬度或者高度大於外層以實現scroll效果。使用margin時直接移動ul窗口來實現里面li的顯示，可以在兩端添加特殊效果(margin允許負值)。

　　html 結構(ZenCoding形式)

-div.divClass
  -div.toLeft
  -div.toRight
  -ul.ulClass
    -li.liClass*n
-ul.controlUl
  -li*n

   
　　其中div.toLeft，div.toRight,ul.controlUl可選

　　調用方法(詳情見demo)(按需設置參數)　

　

       A.divClass調用時style為1，采用scroll-left

    $(".divClass").boxScroll({   
        'liHover': 'liSelected',       //設置控制滾動的類名       
        'child': 'li',       //實際移動元素,默認為li元素
        'style': 1,          //默認為0,為margin-left，1則為scroll-left
        'stepTime': 1,       //每次運動經歷的時間，單位s,默認為1s
        'direction': 'right',          //運動的方向，默認為right
        'toLeft': '.arrowLeft',        //向左運動按鈕，默認為null
        'toRight': '.arrowRight',      //向右運動按鈕，默認為null
        'ControlUl': '.picControl ul', //控制運動按鈕，默認為null
        'circle': true,      //是否自動滾動，默認true
        'circleTime': 5      //自動滾動時間間隔，默認5s
    });

 


　　B.ulClass調用時style為0，采用margin-left

    $(".ulClass").boxScroll({
        'liHover': 'liSelected',       //設置控制滾動的類名            
        'child': 'li',       //實際移動元素,默認為li元素
        'style': 0,          //默認為0,為margin-left
        'stepTime': 1,       //每次運動經歷的時間，單位s,默認為1s
        'direction': 'right',          //運動的方向，默認為right
        'toLeft': '.arrowLeft',        //向左運動按鈕，默認為null
        'toRight': '.arrowRight',      //向右運動按鈕，默認為null
        'ControlUl': '.picControl ul', //控制運動按鈕，默認為null
        'circle': true,      //是否自動滾動，默認true
        'circleTime': 5      //自動滾動時間間隔，默認5s
    });

 

 

　　C.div.Class or Ul.Class調用時style為1，采用fadeIn and FadeOut

    $(".picInnerBox").boxScroll({
        'liHover': 'liSelected',       //設置控制滾動的類名
        'child': 'li',       //實際變化元素,默認為li元素
        'style': 2,          //2為fadeIn and fadeOut
        'direction': 'right',          //滾動方向
        'toLeft': '.arrowLeft',        //向左運動按鈕，默認為null,為了避免快速多次點擊，設置點擊間隔時間至少0.8s
        'toRight': '.arrowRight',      //向右運動按鈕，默認為null,為了避免快速多次點擊，設置點擊間隔時間至少0.8s
        'ControlUl': '.picControl ul', //控制運動按鈕，默認為null
        'circle': true,      //是否自動變化，默認true
        'circleTime': 5,     //自動變化時間間隔，默認5s
        'fadeInTime': 300,   //fadeIn時間設置
        'fadeOutTime': 400   //fadeOut時間設置
    });

 

　　運行demo


　　最簡單的方法為改Default.html中jquery對應script元素的src為本地的jquery(離線)或CDN中的jquery(在線),然后雙擊Default.html即可
或者配置myBoxScroll.jquery.json or package.json

 

    PS:
    為了使插件總大小較小、代碼復用，將A,B,C三種情況集中在一起，封裝為一個原型上的方法，內部依據style控制選擇。
    也可以改為多個方法在綁定到jquery原型上時用style判斷對應執行，以減少多余變量和不必要的判斷。

 

      Demo代碼如下:

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>簡易圖片輪播插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../src/jquery.codetker.boxScroll.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="scrollBox">
            <div class="picOuterBox boxStyle">
                <div class="arrow arrowLeft">ToLeft</div>
                <div class="arrow arrowRight">ToRight</div>
                <ul class="picInnerBox boxStyle">
                    <li>
                        <a href="" title="">
                            <img src="images/test.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <img src="images/test.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <img src="images/test.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <img src="images/test.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <img src="images/test.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="picControl">
                <ul>
                    <li  class="liSelected">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </div>
<script type="text/javascript">
    $(document).ready(function() {
        /*$(".picOuterBox").boxScroll({
            'liHover':'liSelected',
            'child': 'li',
            'style': 1,
            'stepTime': 1,
            'direction': 'right',
            'toLeft': '.arrowLeft',
            'toRight': '.arrowRight',
            'ControlUl': '.picControl ul',
            'cicle': true,
            'circleTime': 5
        });*/
        $(".picInnerBox").boxScroll({
            'liHover': 'liSelected',
            'child': 'li',
            'style': 0,
            'stepTime': 1,
            'direction': 'right',
            'toLeft': '.arrowLeft',
            'toRight': '.arrowRight',
            'ControlUl': '.picControl ul',
            'circle': true,
            'circleTime': 5
        });
        /*$(".picInnerBox").boxScroll({
            'liHover': 'liSelected',
            'child': 'li',
            'style': 2,
            'direction': 'right',
            'toLeft': '.arrowLeft',
            'toRight': '.arrowRight',
            'ControlUl': '.picControl ul',
            'circle': true,
            'circleTime': 5,
            'fadeInTime': 300,
            'fadeOutTime': 400
        });*/
    });
</script>
</body>
</html>
View Code HTML

 

CSS

@charset "utf-8";
/* CSS Document */
/* to make it better to see */
/* as whole */
 body{
    margin : 0 0;
    padding: 0 0;
    height : 100%;
    width  : 100%;
 }
 .wrap{
    font-family: "微軟雅黑","宋體", Times, "Times New Roman", serif;
    font-size  : 14px;
    margin     : 0 0;
    padding    : 0 0;
    height     : 100%;
    width      : 100%;
    overflow   : hidden;
 }
/* as whole end */

/* innerBox */
 .boxStyle{
    width : 500px;
    height: 256px;
 }
 .scrollBox{
    position: relative;
    width   : 500px;
    margin  : 0 auto;
 }
 .picInnerBox{
    width   : 10000px;
    overflow: hidden;
 }
 .picInnerBox li{
    cursor: pointer;
    float : left;
 }
 .picOuterBox{
    overflow: hidden;

 }
/* innerBox end */

/* arrow */
 .arrow{
    position: absolute;
    top     : 45%;
    height  : 40px;
    cursor  : pointer;
    z-index : 99;        
 }
 .arrow:hover{
    color   : #fff;
 }
 .arrowLeft{
    float   : left;
    left    : 5%;
 }
 .arrowRight{
    float: right;
    right: 5%;
 }
/* arrow end */

/* controlUl */
 .picControl{
    overflow: auto;
    width   : 156px;
    margin  : 10px auto 0 auto;
 }
 .picControl ul li{
    cursor     : pointer;
    float      : left;
    margin-left: 10px;
    width      : 20px;
    height     : 20px;
    text-align : center;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    border-radius        : 50%;
    /* if <IE7,use PIE.htc or IE-css3.htc here */ 
 }
 .picControl ul li:not(.liSelected){
    background-color: #ccc;
 }
 .picControl ul li:hover{
    background-color: #888;
 }
 .liSelected{
    background-color: #888;
 }
/* controlUl end */
View Code CSS

 

JavaScript

/*
 * boxScroll 0.1
 * 兼容FF,Chrome等常見瀏覽器
 */
;(function($, window, document, undefined) {
    //定義構造函數
    var BoxObj = function(ele, opt) {
        this.$element = ele;
        this.defaults = {
            'child': 'li',
            'style': 0,
            'stepTime': 1,
            'direction': 'right',
            'toLeft': null,
            'toRight': null,
            'ControlUl': null,
            'circle': true,
            'circleTime': 5,
            'fadeInTime': 300,
            'fadeOutTime': 400,
            'liHover': null
        };

        this.options = $.extend({}, this.defaults, opt);
    };

    //在原型上添加方法
    BoxObj.prototype = {

        boxScroll: function() {

            var boxWindow = this.$element,
                child = $(boxWindow).find(this.options.child),
                style = this.options.style,
                circle = this.options.circle,
                circleTime = this.options.circleTime,
                direction = (this.options.direction == 'right') ? 1 : -1,
                toLeft = this.options.toLeft,
                toRight = this.options.toRight,
                Control = this.options.ControlUl,
                liHover = this.options.liHover,
                lists = $(Control).children('li'),
                boxWidth = $(child).width(),
                imgIndexMax = $(child).length,
                imgIndex,
                timer,

                //margin and scroll stepTime
                stepTime = this.options.stepTime,

                //fadeIn and Out control time
                fadeInTime = this.options.fadeInTime,
                fadeOutTime = this.options.fadeOutTime,
                startTime,
                endTime;

            //判斷當前圖片的位置
            function getImgIndex() {

                switch (style) {
                    case 0: //margin
                        imgIndex = Math.round(parseInt($(boxWindow).css('margin-left')) * (-1) / boxWidth);
                        break;

                    case 1: //scroll
                        imgIndex = Math.round($(boxWindow).scrollLeft() / boxWidth);
                        break;

                    case 2: //fade
                        imgIndex = getIndexShow();
                        break;

                    default:
                }
            }

            //fade 中判斷圖片index
            function getIndexShow() {
                var temp;
                $(lists).each(function() {
                    if ($(this).hasClass(liHover)) {
                        temp = $(this).index();
                    }
                });
                return temp;
            }

            //設置循環
            function set() {
                if (circle) {
                    timer = setInterval(function() {
                        boxScroll(imgIndex, direction);
                    }, 1000 * circleTime);
                }
            }

            //取消循環
            function rest() {
                clearInterval(timer);
                set();
            }

            //初始化
            if (style == 2) {
                $(child).eq(0).click();
            }
            set();
            startTime = Date.parse(new Date());
            endTime = Date.parse(new Date());

            //綁定點擊按鈕
            $(Control).delegate('li', 'click', function() {
                boxScroll($(this).index(), 0);
                rest();
            });

            //綁定左右按鈕
            $(toLeft).click(function() {
                //主要用於防止show and hide 左右點擊過快
                startTime = Date.parse(new Date());
                if ((startTime - endTime) > 800) {
                    boxScroll(0, -1);
                    rest();
                    endTime = Date.parse(new Date());
                }
            });
            $(toRight).click(function() {
                startTime = Date.parse(new Date());
                if ((startTime - endTime) > 800) {
                    boxScroll(0, 1);
                    rest();
                    endTime = Date.parse(new Date());
                }
            });

            function boxScroll(index, dir) {
                if (!$(boxWindow).is(':animated')) {
                    //響應ul li control操作
                    if (!dir) {
                        imgIndex = index;

                        //響應toLeft和toRight
                    } else {
                        if (dir == 1) { //向右
                            getImgIndex();
                            if (imgIndex === (imgIndexMax - 1)) {
                                imgIndex = 0;
                            } else {
                                imgIndex += 1;
                            }
                        } else { //向左
                            getImgIndex();
                            if (imgIndex === 0) {
                                imgIndex = (imgIndexMax - 1);
                            } else {
                                imgIndex -= 1;
                            }
                        }
                    }

                    lists.eq(imgIndex).addClass(liHover);
                    lists.eq(imgIndex).siblings().removeClass(liHover);

                    //具體執行
                    switch (style) {
                        case 0:
                            $(boxWindow).animate({
                                'margin-left': imgIndex * boxWidth * (-1) + 'px'
                            }, 1000 * stepTime);
                            break;

                        case 1:
                            $(boxWindow).animate({
                                'scrollLeft': imgIndex * boxWidth + 'px'
                            }, 1000 * stepTime);
                            break;

                        case 2:
                            $(child).fadeOut(fadeOutTime);
                            $(child).eq(imgIndex).fadeIn(fadeInTime);
                            break;

                        default:
                    }

                }
            }
        }
    };

    //將方法添加到jquery對象的原型上
    $.fn.boxScroll = function(options) {
        //創建實例
        var boxObj = new BoxObj(this, options);
        return boxObj.boxScroll();
    };
})(jQuery, window, document);
View Code JS

　　BoxScroll1.0版本終於面世咯，希望大家嘗試使用，多提issues，謝謝!

 

Marquee

      模仿IE下面的marquee效果，鼠標移上去暫停。形成環的主要原理在於每張圖片一旦判斷出了外面的顯示窗口就添加到尾部，用append和prepend模擬數組的push()和shift()。

      代碼如下:

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>模擬marquee標簽效果的簡單實現</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.marquee.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="marquee">
            <ul>
                <li>
                    <a href="" title="">1
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">2
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">3
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">4
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">5
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">6
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">7
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">8
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".marquee").marquee();
    });
</script>
</body>
</html>

 

CSS

@charset "utf-8";
/* CSS Document */
body{
    margin:0 0;
    padding:0 0;
    height:100%;
    width:100%;
}
.wrap{
    font-family:"微軟雅黑","宋體", Times, "Times New Roman", serif;
    font-size:14px;
    margin:0 0;
    padding:0 0;
    height:100%;
    width:100%;
    overflow:hidden;
}
.marquee{
    margin: 0 auto;
    width: 960px;
    height: 300px;
    overflow: hidden;
}
.marquee ul{
    width: 10000px;
}
.marquee ul li{
    float: left;
    width: 500px;
    text-align: center;
}
.marquee ul li a{

}
.marquee ul li a:hover{
    color: red;
}

 

JavaScript

/*
 * boxScroll 0.1
 * 兼容IE8,FF,Chrome等常見瀏覽器
 */
 ;(function($,window,document,undefined){
     //定義構造函數
     var BoxObj=function(ele,opt){
         this.$element=ele; //最外層對象
         this.defaults={
             'style': 0 ,//滾動樣式選擇,默認為普通效果
             'speed': 1 ,//默認為1s
             'direction': 'left'//默認為向左邊滾動
         },
     
         this.options=$.extend({},this.defaults,opt );
         //這里可以添加一些通用方法    
     }

     //給構造函數添加方法
     BoxObj.prototype={

         commonScroll:function(){
             //接收對象屬性
             var obj=this.$element;
             var boxWindow=$(this.$element).children('ul');
             var speed=this.defaults.speed;
             var style=this.defaults.style;
             var direction=(this.defaults.direction=='left')? 1 : -1;
             var lists=$(boxWindow).children('li');
             var len=$(lists).length;
             var boxWidth=$(lists[0]).width();
             var timer;
             var step=(this.defaults.direction=='left')? 0 : boxWidth;

             function move(style,speed,direction){
                 if (style==0) {
                     if (direction==1) {
                         step+=1;
                         if(step>boxWidth){
                             step-=boxWidth;
                             $(boxWindow).append($(boxWindow).children().eq(0));//將第一項放在最后，相當於push(0),shift()
                         }else{
                             $(obj).scrollLeft(step);
                         }
                     }else if (direction== -1) {
                         step-=1;
                         if(step<0){
                             step+=boxWidth;
                             $(boxWindow).prepend($(boxWindow).children().eq(len-1));//將最后一項放在最前，相當於pop(last),unshift()
                         }else{
                             $(obj).scrollLeft(step);
                         }
                     }else{//不執行之外的數值

                     }
                 }else{//留待擴展,多了改switch

                 }
             }

             timer=setInterval(function(){
                 move(style,speed,direction);
             },10*speed); //由於時間取得小，肉眼就看不出來

            $(lists).each(function() {//鼠標移上暫停
                $(this).hover(function() {
                    clearInterval(timer);
                }, function() {
                    clearInterval(timer);
                    timer=setInterval(function(){
                         move(style,speed,direction);
                     },10*speed);
                });
            });
         }
             
     }

     $.fn.marquee=function(options){
         //創建實體
         var boxObj=new BoxObj(this,options);
         //用尾調的形式調用對象方法
         return boxObj.commonScroll();
     }
 })(jQuery,window,document);

 

      詳細下載見https://github.com/codetker/myMarquee


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery插件開發之datalist jQuery插件開發之windowScroll jQuery插件開發總結 掌握jQuery插件開發 JQuery插件開發入門 JQuery插件開發，遠程驗證插件 如果你只會JQuery的插件式開發, 那么你可以進來看看？ 深入理解JQuery插件開發 jQuery插件開發（引自juqery官網） 跟我一起學JQuery插件開發
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM