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的效果如下链接，可以点击进去看看。
依赖于HTML结构如下
前一个 下一个
如果没有上下页的话 上下页按钮可去掉HTML代码。
可配置的参数如下
| targetElem | 目标元素 默认为空 需要传入 |
| direction | 'left', // 默认方向为left 或者自定义 up |
| btnPrev | '.prev', // 上一页按钮 |
| btnNext | '.next', // 下一页按钮 |
| auto | true, // 默认为true 自动播放 |
| item | null, // 一次滚动多少个 |
| speed | "1000", // 设置每次滚动动画执行时间(单位毫秒，默认为1000)； |
| time | "3000", // 设置每次动画执行间隔时间(单位毫秒，默认为3000)； |
| callback | null // 点击上一页或者下一页回调 |
HTML代码如下：
文字自动滚动(向上)
尘世：
- 我来测试1；我来测试1；
- 我来测试2;我来测试2;
- 我来测试3;我来测试3;
- 我来测试4;我来测试4;
- 我来测试5;我来测试5;
- 我来测试6；我来测试6；
- 我来测试7;我来测试7;
- 我来测试8;我来测试8;
- 我来测试9;我来测试9;
- 我来测试10;我来测试10;
- 我来测试11；我来测试11；
- 我来测试12;我来测试12;
- 我来测试13;我来测试13;
- 我来测试14;我来测试14;
- 我来测试15;我来测试15;
图片自动滚动(向左)
图片滚动(向左,带按钮控制,每次滚动个数3)
前一个 下一个
CSS代码如下：
JS代码如下：
/** * JS图片自动滚动效果 * @time 2014-1-4 * @author tugenhua * @email 879083421@qq.com ********************************************************************** *完整的html代码结构： ***/ 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 });});