jq插件第二款来袭 图片滚动
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认为1张,另外提供了连个外接方法, 停止自动滚动$.fn.roll.stop,继续自动滚动$.fn.roll.auto,不多说,上菜!
JQ插件代码
(function($){
$.fn.roll = function(options){
if($(this).length == 0) return false;
var opts = $.extend({},$.fn.roll.defaults,options); function Rolling(o){
this.oParent = o;
this.imgList = o.find(opts['imgList']);
this.rollEle = o.find(opts['rollEle']);
this.rollEleParent = o.find(opts['rollEleParent']);
this.bl = o.find(opts['btn-left']);
this.br = o.find(opts['btn-right']);
this.auto = opts['automatic'];
this.speed = opts['speed'];
this.num = opts['num'];
this.stop = opts['stop'];
this.onOff = true;
this.leftValue = 0;
this.len = 0;
this.index = 0;
this.timer = null;
this.singleW = 0;
this.preIndex = -1;
this.nowIndex = 0; } Rolling.prototype = {
init:function(){
var _this = this;
this.len = this.rollEle.length;
this.singleWidth();
this.rollEleParent.width(this.singleW*this.len);
this.bl.on('click',function(){
_this.stopRoll();
_this.fnRoll(0);
return false;
});
this.br.on('click',function(){
_this.stopRoll();
_this.fnRoll(1);
return false;
});
if(this.auto){
this.timer = setInterval(function(){
_this.automatic();
},this.speed[0]); this.oParent.hover(function(){
_this.stopRoll();
},function(){
_this.timer = setInterval(function(){
_this.automatic();
},_this.speed[0])
})
}
},
singleWidth:function(){
this.singleW = this.rollEle.eq(0).outerWidth(true);
}, fnRoll:function(dir){ //dir == 1,→→滚, dir==0,←←滚
var _this = this;
this.onOff = false;
this.preIndex = this.index;
var scrolling = dir ? {scrollLeft:_this.singleW*this.num + _this.singleW*_this.index}:{scrollLeft:_this.leftValue - _this.singleW*this.num} this.imgList.animate(scrolling,_this.speed[1],function(){
_this.onOff = true;
if(dir){
if(_this.index < _this.len){
_this.index += _this.num;
_this.nowIndex = _this.index;
}else{
_this.index = _this.len; } }else{
if(_this.index > 0){
_this.index -= _this.num;
_this.nowIndex = _this.index
}else{
_this.index = 0; }
_this.nowIndex = _this.index;
} _this.leftValue = $(this).scrollLeft();
if(this.nowIndex == 0){ //当前索引为0是,则应该向右滚动,重置preIndex值(当前为0)
this.preIndex = -1;
} }) }, stopRoll:function(){
clearInterval(this.timer)
},
automatic:function(){
if(this.leftValue >= this.rollEleParent.width() - this.imgList.width() + parseFloat(this.rollEleParent.css('margin-left'))){
//判断 滚动容器是否滚到头,若到头了,则往回滚
this.fnRoll(0)
} if(this.preIndex < this.nowIndex){ //判断上一次与当前索引的关系,若大于,则是向有滚动,若小于或等于则向左滚动
this.fnRoll(1)
return;
} if(this.preIndex >= this.nowIndex ){ this.fnRoll(0)
} if(this.nowIndex == 0){ //当前索引为0是,则应该向右滚动,重置preIndex值(当前为0)
this.preIndex = -1;
} } } return this.each(function(){
var $this = $(this);
var obj = new Rolling($this);
obj.init();
$.fn.roll.stop = function(){
obj.stopRoll();
} //曝露停止自动滚动方法,共外部条用
$.fn.roll.auto = function(){
obj.stopRoll();
obj.timer = setInterval(function(){
obj.automatic();
},obj.speed[0]);
} //曝露继续自动滚动方法,共外部条用 })
}; $.fn.roll.defaults = {
'imgList' : '.sildeImgList', //滚动容器
'rollEle' : 'li', //滚动元素
'rollEleParent' : 'ul', //滚动元素父级
'btn-left': '.btn-left', //button←←
'btn-right': '.btn-right', //button→→
'automatic': false, //是否自动滚动
'speed' : [3000,300], //间隔,速度
'num' : 1, //一次滚动的数量
}; })(jQuery);
html
<div class="sildeImgBox">
<span class="btn-left"></span>
<div class="sildeImgList">
<ul>
<li><img src="data:images/mm1.jpg" alt=""></li>
<li><img src="data:images/mm2.jpg" alt=""></li>
<li><img src="data:images/mm3.jpg" alt=""></li>
<li><img src="data:images/mm1.jpg" alt=""></li>
<li><img src="data:images/mm2.jpg" alt=""></li>
<li><img src="data:images/mm3.jpg" alt=""></li>
<li><img src="data:images/mm1.jpg" alt=""></li>
<li><img src="data:images/mm2.jpg" alt=""></li>
</ul>
</div>
<span class="btn-right"></span>
</div>
调用
<script> $(function(){
$('.sildeImgBox').eq(0).roll({'automatic' : true})
}) </script>
css
.sildeImgBox { width: 940px; margin: 0 auto; height: 344px; }
.sildeImgBox .btn-left { background-position: 0 0; left:; }
.sildeImgBox .btn-right { background-position: 100% 0; right:; }
.sildeImgBox .sildeImgList { width: 820px; height: 349px; overflow: hidden; }
.sildeImgBox .sildeImgList ul { left:; right:; margin-left: -15px; width: 5000px; }
.sildeImgBox .sildeImgList li { display: inline; float: left; width: 262px; height: 344px; margin-left: 15px; box-shadow: 2px 2px 5px rgba(4, 0, 0, 0.75); }
.sildeImgBox .btn-left, .sildeImgBox .btn-right .sildeImgBox .sildeImgList ul { position: absolute; }
.sildeImgBox .btn-left, .sildeImgBox .btn-right { display: block; }
.sildeImgBox, .sildeImgBox .sildeImgList { position: relative; }
jq插件第二款来袭 图片滚动的更多相关文章
- jQuery插件实例三:图片滚动[切换]效果一
图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- 介绍一款网站前台图片滚动插件之"switchable"
一.简单介绍:jQuery.Switchable是一款整合了Tabs.Slide.Scrollable等常见UI组件的jQuery插件,在这里,简答说说他的Slide.像Tabs,在Jquery-UI ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- 分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
随机推荐
- (转) c++ 迭代器
原地址:http://www.cnblogs.com/marchtea/archive/2012/02/27/2370068.html 前言: 以下的内容为我阅读c++沉思录18,19,20章的笔记以 ...
- No1_4.数组的基本操作_Java学习笔记
import java.util.Arrays; public class HelloArrayOp { public static void main(String[] args) { // TOD ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- Android 播放gif图片
Android的原生控件并不支持播放GIF格式的图片.我们都知道,在Android中如果想要显示一张图片,可以借助ImageView控件来完成,但是如果将一张GIF图片设置到ImageView里,它只 ...
- Html 编码 queryUrl = encodeURI(queryUrl);
Html 编码 queryUrl = encodeURI(queryUrl);
- NFC应用(一)卡应用
门禁卡.停车卡.公交卡工作于NFC的卡模式,是目前日常生活中接触得最多的NFC应用场合.一张小小的卡片,轻触读卡器使可开门禁锁.进出停车场.支付车资,即快捷方便,又安全,易于管理. 以门禁系统为例,通 ...
- SQLSERVER读懂语句运行的统计信息
SQLSERVER读懂语句运行的统计信息 对于语句的运行,除了执行计划本身,还有一些其他因素要考虑,例如语句的编译时间.执行时间.做了多少次磁盘读等. 如果DBA能够把问题语句单独测试运行,可以在运行 ...
- UESTC_邱老师看电影 2015 UESTC Training for Dynamic Programming<Problem F>
F - 邱老师看电影 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submi ...
- js获取浏览器的keydown事件(附keycode码)
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- IOS设计模式学习(8)适配器
1 前言 在面向对象软件设计中,有时候我们想把有用而经过精心测试的类,用于应用程序的其他新领域.但是,新功能需要新接口,而新接口与要复用的现有类不一致的情况非常普遍.我们不想为新的接口而重写可靠的类. ...