JQuery 可自定义自动播放图片 文字 也可以带按钮点击特效

     今天给大家分享下一个js特效 “JQuery 可自定义自动播放图片 文字 也可以带按钮点击特效”  以前一直看到‘阿里巴巴及淘宝有这种效果’，但是当时不知道用js怎么写 研究了下 并且网上搜集下资料，看了些文章  现在明白了 写了一个js特效效果 本人觉得这个特效扩展性很好！值得大家学习下！我把js代码贴到这里 有需要的可以看看！绝对可以帮助大家！

比如阿里巴巴 这两种都可以自定义

这两种效果  一行一行文字向上播放！或者下面的效果 默认情况下自动播放！也可以带点击按钮！当然你可以不设置自动播放！一切由自己决定！

/*
 * jQuery JavaScript Library Marquee Plus 1.0
 *
 *
 * author tugenhua
 * Dual licensed under the MIT and GPL licenses.
 *
 * Date: 2011-07-20 15:50:21
 **********************************************************************
 * @example
 * $("#example").XYMarquee({
 *        next : "next",
 *        prev : "prev"                         
 *  })
 **********************************************************************
 *jMarquee o参数可配置项：
 *    _direction : left || top,设置滚动方向，(向左或向上)默认向左滚动;
 *    _btnNext : 下翻页的ID名称;
 *    _btnPrev : 上翻页的ID名称;
 *    _auto : 布尔值(true为自动滚动，false为手动滚动， 默认true);
 *  _item : 设置每次滚动元素的个数(默认滚动所有可见部分);
 *  _speed : 设置每次滚动动画执行时间(单位毫秒，默认为1000)；
 *  _time : 设置每次动画执行间隔时间(单位毫秒，默认为3000)；
 **********************************************************************
 *完整的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($){
    $.fn.extend({
        XYMarquee : function(o){
            var defaults = {
                _direction : "left",
                _btnNext   : "prev",
                _btnPrev   : "next",
                _auto       : true,
                _item       : null,
                _speed       : "1000",
                _time      : "3000"    
            };
            var o = $.extend(defaults,o);
            return this.each(function(){
                var timer;
                var marquee = true,_self = $(this),$wrap = $("div",_self),$parent = $("li",$wrap).parent();    
                var count = o._direction =="left" ? Math.floor($wrap.width()/$("li", $wrap).outerWidth()):Math.floor($wrap.height() / $("li", $wrap).outerHeight());
                if(o._item){ count = o._item;}
                if(o._direction =="left"){
                    $parent.css("width",$wrap.width()*2 + "px");    
                }else{
                    $parent.css("height",$wrap.height()*2 + "px");    
                }
                $wrap.css("overflow","hidden");
                var $value = o._direction =="left" ? $("li",$wrap).outerWidth()*count : $("li",$wrap).outerHeight()*count;
                function scrollNext(){
                    if(marquee){
                        marquee = false;
                        if(o._direction == "left"){
                            $parent.animate({marginLeft : -$value},
                            o._speed,
                            function(){
                                var $tempwrap = $("li",$wrap).slice(0,count);
                                $parent.append($tempwrap);
                                $parent.css("marginLeft",0);
                                marquee = true;    
                            });    
                        }else{
                            $parent.animate({marginTop : -$value},o._speed,function(){
                                var $tempwrap = $("li",$wrap).slice(0,count);
                                $parent.append($tempwrap);
                                $parent.css("marginTop",0);
                                marquee = true;    
                            });
                        }    
                    }    
                };
                function scrollPrev(){
                    if(marquee){
                        var $tempwrap = $("li", $wrap).slice( - count);marquee = false;
                        $parent.append($tempwrap);
                        if(o._direction = "left"){
                            $parent.css("marginLeft",-$value);
                            $parent.animate({
                                marginLeft:0},
                                o._speed,
                                function(){
                                    marquee = true;    
                                });
                        }else{
                            $parent.css("marginTop",-$value);
                            $parent.animate({
                                marginTop : 0},
                                o._speed,
                                function(){
                                    marquee = true;    
                                });    
                        }
                    }    
                };
                function stopMarquee(){clearInterval(timer)};
                function autoPlay(){
                    timer = setInterval(scrollNext,o._time);    
                }
                if(o._auto){
                    $wrap.hover(function(){
                        stopMarquee();    
                    },function(){
                        autoPlay();    
                    });
                $("#" + o._btnPrev,_self).hover(function(){
                    stopMarquee();    
                },function(){
                    autoPlay();    
                });
                $("#" + o._btnNext,_self).hover(function(){
                    stopMarquee();    
                },function(){
                    autoPlay();    
                });
                autoPlay();    
                }
                $("#" + o._btnPrev,_self).click(scrollPrev);
                $("#" + o._btnNext,_self).click(scrollNext);
            });    
        }    
    });    
})(jQuery)

HTML代码调用

<script src="jquery-1.5.2.min.js"></script>
<script src="XYMarquee.js"></script>

jquery原压缩包引用进来 及 上面的js引用进来就ok了，

HTML代码结构一定要按照我那个js代码说的来做，就可以了 比如我的：

<div id="wrap">
        <!-- 纯文字公告 -->
        <div class="ws">
            <h3 class="font-top">文字自动滚动(向上)</h3>
            <div class="box" id="demo1">
                <span class="title">尘世：</span>
                <div class='fl scroll1'>
                    <ul>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                        <li>谁，执我之手，消我半世孤独；</li>
                    </ul>
                </div>
                <div class="cl"></div>
            </div>
        </div>
    </div>

然后我这边是做的文字一行一行向上滚动的js调用：

<script>
    $(function(){
        $("#demo1").XYMarquee({
            _direction : 'up',
            _item : 1    
        })    
    })
</script>

就ok了 当然图片 文字都可以自定义自动播放！或者加按钮都ok！