JS图片自动或者手动滚动效果(支持left或者up)

JS图片自动或者手动滚动效果

     在谈组件之前 来谈谈今天遇到搞笑的事情，今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 貌似说我用招商银行信用卡在今年的6月23日借了招商银行19800元人民币，今天是最后一天没有还款，说我其他银行钱都被冻结了。以后有可能法律投诉我！我靠 我无语啊 我长这么大从来都没有办理过信用卡，我根本就不需要办理信用卡，所以一直以来也没有办过，招商一卡通是有一张 但是从来没有借过钱啊，身份证一直都身上带着！基本上没有脱离过身，今天我打电话过去 他问我叫什么名字 我就报了名字 我问是什么情况 然后说了很多 大概意思就是刚刚上面的意思 然后他接着问我身份证号是多少？我就没有告诉他，我今天就半信半疑 我到银行取下钱 看看是不是真的我的卡被冻结了 结果我所有的银行卡都没有被冻结。我怀疑有可能是骗人的，如果有杭州的朋友 可以试试打上面的电话 然后随便报个假名字 让他们查下 看看他们怎么说？就知道了！快过年了 我也在这希望大家不要被一些人骗了，年底小心骗子(骗子很多的)。 不多说了，下面来看看我这个JS效果原理吧！

基本原理

    1. 开始获取每次滚动的个数，如果参数item(int整形数字)传进来，就取参数item个数 否则的话 个数count = 取外层容器宽度(或高度) / 每个li宽度(或高度)。然后判断方向 如果是left(向左) 那么父级容器宽度ul * 2，否则的话ul高度*2. 然后计算下一次滚动多少距离。如果方向是left 那么值的计算 = $("li", $wrap).outerWidth() * _cache.count(也就是当前一个li的宽度*滚动的个数)。如方向是top 那么值的计算 = $("li", $wrap).outerHeight() * _cache.count(一个li的高度*滚动的个数)。

   2. 下一页按钮事件的原理：

       默认是auto(自动播放)，不断向下一页滚动，_scrollNext函数的原理：如果方向是left 那么marginLeft:动画(animate)移动多少距离。接着回调函数把第一个li插入到最后上面来，且让margin-left:0;接着又执行相应的动作 就是一个循环了。同理 向上滚动也是这个道理。

   3. 上一页按钮事件的原理：

      从后面获取几项元素(根据count个数来获取多少个)。接着判断left或者up方向。接着marginLeft或者marginTop，就这样循环。

   4. 判断传进来的auto参数 如没有传 则默认显示true 自动滚动 否则的 手动滚动。如果是自动的话 调用 setInterval 执行 _scrollNext滚动下一页的方法。

示意图如下：

   

jsfiddle的效果如下链接，可以点击进去看看。

 http://jsfiddle.net/longen/3jXFN/embedded/result/

 依赖于HTML结构如下

<div id="example">
     <div class="scroll">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
     </div>
     <span class="prev">前一个</span>
     <span class="next">下一个</span>
 </div>

如果没有上下页的话 上下页按钮可去掉HTML代码。

可配置的参数如下

targetElem	目标元素 默认为空 需要传入
direction	'left',     // 默认方向为left 或者自定义 up
btnPrev	'.prev',    // 上一页按钮
btnNext	'.next',    // 下一页按钮
auto	true,       // 默认为true 自动播放
item	null,       // 一次滚动多少个
speed	"1000",     // 设置每次滚动动画执行时间(单位毫秒，默认为1000)；
time	"3000",     // 设置每次动画执行间隔时间(单位毫秒，默认为3000)；
callback	null        // 点击上一页或者下一页回调

 HTML代码如下：

<div id="wrap">
        
        <!-- 纯文字公告 -->
        <div class="demo1">
            <h3>文字自动滚动(向上)</h3>
            <div class="box" id='demo1'>
                <span class="title">尘世：</span>
                <div class='fl scroll1'>
                    <ul>
                       <li>我来测试1；我来测试1；</li>
                       <li>我来测试2;我来测试2;</li>
                       <li>我来测试3;我来测试3;</li>
                       <li>我来测试4;我来测试4;</li>
                       <li>我来测试5;我来测试5;</li>
                       <li>我来测试6；我来测试6；</li>
                       <li>我来测试7;我来测试7;</li>
                       <li>我来测试8;我来测试8;</li>
                       <li>我来测试9;我来测试9;</li>
                       <li>我来测试10;我来测试10;</li>
                       <li>我来测试11；我来测试11；</li>
                       <li>我来测试12;我来测试12;</li>
                       <li>我来测试13;我来测试13;</li>
                       <li>我来测试14;我来测试14;</li>
                       <li>我来测试15;我来测试15;</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="demo1">
            <h3>图片自动滚动(向左)</h3>
            <div class="box" id='demo2'>
                <div class='scroll2'>
                     <ul>
                       <li><img src="images/1-1.jpg" alt="" /></li>
                       <li><img src="images/1-2.jpg" alt="" /></li>
                       <li><img src="images/1-3.jpg" alt="" /></li>
                       <li><img src="images/1-4.jpg" alt="" /></li>
                       <li><img src="images/1-5.jpg" alt="" /></li>
                       <li><img src="images/1-6.jpg" alt="" /></li>
                     </ul>
                </div>
            </div>
        </div>

        <div class="demo1">
            <h3>图片滚动(向左,带按钮控制,每次滚动个数3)</h3>
            <div class="box" id='demo3'>
                <div class='scroll3'>
                     <ul>
                       <li><img src="images/1-1.jpg" alt="" /></li>
                       <li><img src="images/1-2.jpg" alt="" /></li>
                       <li><img src="images/1-3.jpg" alt="" /></li>
                       <li><img src="images/1-4.jpg" alt="" /></li>
                       <li><img src="images/1-5.jpg" alt="" /></li>
                       <li><img src="images/1-6.jpg" alt="" /></li>
                     </ul>
                </div>
                <span class="prev" style="margin-left:30px;">前一个</span>
                <span class="next">下一个</span>
            </div>
        </div>

        <div class="boxs absl" id='demo4'>
            <div class='scroll4'>
                 <ul>
                   <li><img src="images/1-1.jpg" alt="" /></li>
                   <li><img src="images/1-2.jpg" alt="" /></li>
                   <li><img src="images/1-3.jpg" alt="" /></li>
                   <li><img src="images/1-4.jpg" alt="" /></li>
                   <li><img src="images/1-5.jpg" alt="" /></li>
                   <li><img src="images/1-6.jpg" alt="" /></li>
                 </ul>
            </div>
        </div>

        <div class="boxs absr" id='demo5'>
            <div class='scroll5'>
                 <ul>
                   <li><img src="images/1-1.jpg" alt="" /></li>
                   <li><img src="images/1-2.jpg" alt="" /></li>
                   <li><img src="images/1-3.jpg" alt="" /></li>
                   <li><img src="images/1-4.jpg" alt="" /></li>
                   <li><img src="images/1-5.jpg" alt="" /></li>
                   <li><img src="images/1-6.jpg" alt="" /></li>
                 </ul>
            </div>
            <span class="prev">前一个</span>
            <span class="next">下一个</span>
        </div>

    </div>

CSS代码如下：

<style>
    * {
        margin:0;
        padding:0;
    }
    body {
        background:#e3e3e3;
        height:100%;
        font:normal normal 12px/24px "Microsoft yahei", Arial;
        padding-bottom:30px;
    }
    li{list-style:none;}
    h3{color:#333;font-size:14px;width:330px;margin:30px auto 0;}
    img{display:block;}
    #title{margin:20px 0; text-align:center;}

    #wrap {position:relative;width:800px;height:550px;margin:0 auto;background:#f8f8f8;border:1px solid #a3a3a3;border-radius:5px;-moz-border-radius:5px;}

    .box{width:400px;margin:0 auto;margin-top:10px;}
    .boxs{width:110px;margin:0;margin-top:30px;}
    .box span.title{float:left;height:30px;line-height:28px;border:1px solid #5AABCF;border-right:none;text-indent:5px;margin-left:29px;background:#73C5E5;color:#fff;}

    /*文字*/
    .scroll1{width:297px;height:30px;margin:0 auto;border:1px solid #5AABCF;overflow:hidden;}
    .scroll1 li{width:230px;height:30px;line-height:30px;text-indent:5px;}

    .scroll2 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll2 li{float:left;width:100px;height:100px;padding:5px;}

    .scroll3 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll3 li{float:left;width:100px;height:100px;padding:5px;}

    .scroll4 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll4 li{width:100px;height:100px;float:left;padding:5px;}
    .absl{position:absolute;left:30px; top:0;}

    .scroll5 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
    .scroll5 li{width:100px;height:100px;float:left;padding:5px;}
    .absr{position:absolute;right:40px; top:0;}

    .prev,
    .next{float:left;margin-top:5px;margin-left:5px;padding:2px 5px;background:#73C5E5;color:#fff;cursor: pointer;}

    .download{width:300px;margin:0 auto;text-align:center;}

    .fl{float:left;}
    .fr{float:right;}
    .hide{display:none;}
  </style>

JS代码如下：

/**
 * JS图片自动滚动效果
 * @time 2014-1-4
 * @author tugenhua
 * @email 879083421@qq.com
  **********************************************************************
 *完整的html代码结构：
 *<div id="example">
 *    <div class="scroll">
 *         <ul>
 *           <li></li>
 *           <li></li>
 *           <li></li>
 *           <li></li>
 *         </ul>
 *    </div>
 *    <span class="prev">前一个</span>
 *    <span class="next">下一个</span>
 *</div>
 */

 function XYMarquee(options) {
    this.config = {
        targetElem         : '',         // 目标元素 默认为空 需要传入
        direction          : 'left',     // 默认方向为left 或者自定义 up
        btnPrev            : '.prev',    // 上一页按钮
        btnNext            : '.next',    // 下一页按钮
        auto               : true,       // 默认为true 自动播放
        item               : null,       // 一次滚动多少个
        speed              : "1000",     // 设置每次滚动动画执行时间(单位毫秒，默认为1000)；
        time               : "3000",     // 设置每次动画执行间隔时间(单位毫秒，默认为3000)；
        callback           : null        // 点击上一页或者下一页回调
    };

    this.cache = {
        timer     : null,
        count     : 1,
        marquee   :  true
    };

    this.init(options);
 }

 XYMarquee.prototype = {
    
    constructor: XYMarquee,

    init: function(options){

        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        // 初始化 判断方向是left还是up
        if(_config.targetElem !== '') {
            
            var $wrap = $('div',$(_config.targetElem)),
                $parent = $("li", $wrap).parent();

            _cache.count = _config.direction == 'left' ? Math.floor($wrap.width() / $("li", $wrap).outerWidth()) : 
                                                      Math.floor($wrap.height() / $('li',$wrap).outerHeight());
            if(_config.item) {
                _cache.count = _config.item;
            }
            
            if(_config.direction == 'left') {
                $parent.css('width',$wrap.width() * 2 + 'px');
            }else {
                $parent.css('height',$wrap.height() * 2 + 'px');
            }
            $wrap.css("overflow", "hidden");
            var $value = _config.direction =="left" ? $("li", $wrap).outerWidth() * _cache.count : $("li", $wrap).outerHeight() * _cache.count;

            self._bindEnv($parent,$wrap,$value);
        }
    },
    /*
     * 所有的事件
     */
    _bindEnv: function($parent,$wrap,$value) {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        if(_config.auto) {

            $wrap.hover(function(){
                self._stopMarquee();
            },function(){
                self._autoPlay($parent,$wrap,$value);
            });
            // 自动播放
            self._autoPlay($parent,$wrap,$value);
        }

        // 点击上一页事件 或者下一页事件 
        $(_config.btnPrev,$(_config.targetElem)).click(function(){
            self._scrollPrev($parent,$wrap,$value);
            _config.callback && $.isFunction(_config.callback) && _config.callback();
        });
        
        $(_config.btnNext,$(_config.targetElem)).click(function(){
            self._scrollNext($parent,$wrap,$value);
            _config.callback && $.isFunction(_config.callback) && _config.callback();
        });
    },
    /*
     * 自动播放
     */
    _autoPlay: function($parent,$wrap,$value){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        _cache.timer = setInterval(function(){
            self._scrollNext($parent,$wrap,$value);
        }, _config.time);
    },
    /*
     * 向下页滚动
     */
    _scrollNext: function($parent,$wrap,$value){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(_cache.marquee) {
            _cache.marquee = false;
            if(_config.direction == 'left') {
                $parent.animate({
                    "marginLeft": -$value
                },_config.speed,function(){

                    var $tempwrap = $("li", $wrap).slice(0, _cache.count);
                    $parent.append($tempwrap);
                    $parent.css("marginLeft", 0);
                    _cache.marquee = true;
                });
            }else {
                $parent.animate({
                    "marginTop": -$value
                },_config.speed,function(){
                    
                    var $tempwrap = $("li", $wrap).slice(0, _cache.count);
                    $parent.append($tempwrap);
                    $parent.css("marginTop", 0);
                    _cache.marquee = true;
                });
            }
        }
    },
    /*
     * 向上一页滚动 从尾部开始 然后插入到最前面来
     */
    _scrollPrev: function($parent,$wrap,$value){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(_cache.marquee) {
            var $tempwrap = $("li", $wrap).slice( -_cache.count);
            _cache.marquee = false;
            $parent.prepend($tempwrap);
            if(_config.direction == 'left') {
                
                $parent.css("marginLeft", -$value);
                $parent.animate({
                    "marginLeft": 0
                },_config.speed,function(){
                    _cache.marquee = true;    
                });
            }else {
                $parent.css("marginTop", -$value);
                $parent.animate({
                    "marginTop": 0
                },_config.speed,function(){
                    _cache.marquee = true;    
                });
            }
        }
    },
    /*
     * 停止滚动
     */
    _stopMarquee: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        _cache.timer && clearInterval(_cache.timer);
    }
 };

代码初始化方式分别如下：

$(function(){
    new XYMarquee({
        targetElem: '#demo1',
        direction: 'up'
    });

    new XYMarquee({
        targetElem: '#demo2',
        direction: 'left',
        item:1
    });

    new XYMarquee({
        targetElem: '#demo3',
        direction: 'left',
        btnPrev: '.prev',
        btnNext: '.next',
        auto: false,
        item:3
    });

    new XYMarquee({
        targetElem: '#demo4',
        direction: 'up',
        item:1
    });

    new XYMarquee({
        targetElem: '#demo5',
        direction: 'up',
        btnPrev: '.prev',
        btnNext: '.next',
        auto: false,
        item:3
    });
});

Demo下载