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 ...
随机推荐
- (原)ubuntu上安装nvidia及torch的nccl
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5717234.html 参考网址: https://github.com/NVIDIA/nccl htt ...
- putty设置
1- 输入要链接的主机地址 2- 设置connection-->SSH-->Tunnels 点击Add 3- 设置connection 修改为30 4- 点击open,出现ssh登陆,输入 ...
- PHP自动生成前端的表单框架
<?php /** * 为当前所在菜单项样式 * @param string $controller_name * @param string $action_name * @param str ...
- python运维开发(二十一)----文件上传和验证码+session
内容目录: 文件上传 验证码+session 文件和图片的上传功能 HTML Form表单提交,实例展示 views 代码 HTML ajax提交 原生ajax提交,XMLHttpRequest方式上 ...
- STL中vector,Map,Set的实现原理
vector的数据安排以及操作方式,与array非常类似,两者唯一的区别是空间运用的灵活性,array是静态空间,一旦配置了就不能改变,如果你想要大一点的空间,就必须首先配置一块新空间,然后将原来的元 ...
- 新发现一个函数:GradientFill
位于Msimg32.dll之中 https://msdn.microsoft.com/en-us/library/windows/desktop/dd144957(v=vs.85).aspx
- PYCURL ERROR 6 - “Couldn't resolve host 'mirrorlist.centos.org'”
在虚拟机上安装的CentOS,估计是网络配置问题,导致yum update和yum install之类的功能的用不了.出现标题上面的错误. ifdown [network_adapter] ifup ...
- 《深入了解 Linq to SQL》之对象的标识 —— 麦叔叔呕心呖血之作
序言 很多朋友都向我提过,希望我写一下关于Linq to SQL 或者 VS 插件方面的文章.尽管市面上有很多 Linq to SQL 的书籍,但是都是介绍怎么用,缺乏深度.关于 VS 插件方面的书籍 ...
- 携程SQL面试题忘大牛解答解决思路
讨论地址:http://bbs.csdn.net/topics/380208742
- UVA10487(二分)
Given is a set of integers and then a sequence of queries. A query gives you a number and asks to fin ...