图片浏览的Scrollpic改写

最新推荐文章于 2019-01-24 19:33:34 发布
最新推荐文章于 2019-01-24 19:33:34 发布
阅读量598 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： jquery插件 分页 源码 scrollpic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liukang588/article/details/44224755
本文详细介绍了如何基于Scrollpic滚动图片插件进行改进，包括按钮隐藏、滚动条限制、页码显示等功能，并提供了源码修改版本。适合对网页滚动图片展示效果有需求的技术人员参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

花了一天，研究一下类似百度经验的按步骤展示功能，上网搜索了一圈，最终敲定已图片展示的插件Scrollpic的JQUERY插件。按时实现不能满足用div取代图片展示的种种功能。

类似于这种，按钮隐藏，滚动条限制，页码显示的功能。所以不得不改写源码。为了便于以后大家解决与到和我一样的问题，并且便于自己技术回顾，本人上传修改源码，请大家指教批评一二。谢谢。

var sina={

       $:function(objName){

           if(document.getElementById){

              return eval('document.getElementById("'+objName+'")')

           }else{

              return eval('document.all.'+objName)

              }

           },

           isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,

           addEvent:function(l,i,I){

              if(l.attachEvent){

                  l.attachEvent("on"+i,I)

              }else{

                     l.addEventListener(i,I,false)

                     }

              },

           delEvent:function(l,i,I){

              if(l.detachEvent){

                  l.detachEvent("on"+i,I)

              }else{

                     l.removeEventListener(i,I,false)

                  }

           },

           readCookie:function(O){

              var o="",l=O+"=";

              if(document.cookie.length>0){

                  var i=document.cookie.indexOf(l);

                  if(i!=-1){

                     i+=l.length;

                     var I=document.cookie.indexOf(";",i);

                     if(I==-1)I=document.cookie.length;

                     o=unescape(document.cookie.substring(i,I))

                     }

                  };

                  return o

                  },

           writeCookie:function(i,l,o,c){

              var O="",I="";

              if(o!=null){

                  O=new Date((new Date).getTime()+o*3600000);

                  O=";expires="+O.toGMTString()

                  };

              if(c!=null){

                  I=";domain="+c};

                  document.cookie=i+"="+escape(l)+O+I

                  },

           readStyle:function(I,l){

              if(I.style[l]){

                  return I.style[l]

              }elseif(I.currentStyle){

                     return I.currentStyle[l]

              }elseif(document.defaultView&&document.defaultView.getComputedStyle){

                  var i=document.defaultView.getComputedStyle(I,null);

                  return i.getPropertyValue(l)

              }else{

                  returnnull

                  }

              }

           };

 

//滚动图片构造函数

//UI&UE Dept. mengjia

//080623

function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId){

this.scrollContId=scrollContId;

this.arrLeftId=arrLeftId;

this.arrRightId=arrRightId;

this.dotListId=dotListId;

this.dotClassName="dotItem";

this.dotOnClassName="dotItemOn";

this.dotObjArr=[];

this.pageWidth=0;

this.frameWidth=0;

this.speed=10;

this.space=10;

this.pageIndex=0;

this.autoPlay=true;

this.autoPlayTime=5;

var _autoTimeObj,_scrollTimeObj,_state="ready";

this.stripDiv=document.createElement("DIV");

this.listDiv01=document.createElement("DIV");

this.listDiv02=document.createElement("DIV");

if(!ScrollPic.childs){ScrollPic.childs=[]};

this.ID=ScrollPic.childs.length;ScrollPic.childs.push(this);

this.initialize=function(){

       if(!this.scrollContId){thrownew Error("必须指定scrollContId.");

       return};

    this.scrollContDiv=sina.$(this.scrollContId);

    if(!this.scrollContDiv){

       thrownew Error("scrollContId不是正确的对象.(scrollContId = \""+this.scrollContId+"\")");

       return};

    this.scrollContDiv.style.width=this.frameWidth+"px";

    this.scrollContDiv.style.overflow="hidden";

    this.listDiv01.innerHTML=this.listDiv02.innerHTML=this.scrollContDiv.innerHTML;

    this.scrollContDiv.innerHTML="";

    this.scrollContDiv.appendChild(this.stripDiv);

    this.stripDiv.appendChild(this.listDiv01);

    this.stripDiv.appendChild(this.listDiv02);

    this.stripDiv.style.overflow="hidden";

    this.stripDiv.style.zoom="1";

    this.stripDiv.style.width="32766px";

     if(navigator.appName== "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"")=="MSIE8.0") {

       this.listDiv01.style.styleFloat="left";

       this.listDiv02.style.styleFloat="left";

    }else{

        this.listDiv01.style.cssFloat="left";

        this.listDiv02.style.cssFloat="left";

     }

    sina.addEvent(

           this.scrollContDiv,"mouseover",Function("ScrollPic.childs["+this.ID+"].stop()"));

    sina.addEvent(

           this.scrollContDiv,"mouseout",Function("ScrollPic.childs["+this.ID+"].play()"));

    if(this.arrLeftId){

       this.arrLeftObj=sina.$(this.arrLeftId);

       if(this.arrLeftObj){

       sina.addEvent(this.arrLeftObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].rightMouseDown()"));

       sina.addEvent(this.arrLeftObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].rightEnd()"));

       sina.addEvent(this.arrLeftObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].rightEnd()"))

       }

    };

    if(this.arrRightId){

       this.arrRightObj=sina.$(this.arrRightId);

       if(this.arrRightObj){

           sina.addEvent(this.arrRightObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].leftMouseDown()"));

           sina.addEvent(this.arrRightObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].leftEnd()"));

           sina.addEvent(this.arrRightObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].leftEnd()"))

       }

    };

    if(this.dotListId){

       this.dotListObj=sina.$(this.dotListId);

       if(this.dotListObj){

              var pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;

              for(i=0;i<pages;i++){

                     tempObj=document.createElement("span");

                     this.dotListObj.appendChild(tempObj);

                     this.dotObjArr.push(tempObj);

                     if(i==this.pageIndex){

                            tempObj.className=this.dotClassName

                     }else{

                            tempObj.className=this.dotOnClassName};

                            tempObj.title="第"+(i+1)+"页";

                             sina.addEvent(tempObj,"click",Function("ScrollPic.childs["+this.ID+"].pageTo("+i+")"))

                            }

                     }

                  };

    if(this.autoPlay){

       this.play()

       };

       //左右按钮控制

    if(this.pageIndex==0)$("#"+this.arrLeftId.toString()).hide();

    var pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;

    if(pages <= 1)$("#"+this.arrRightId.toString()).hide();

    //分页滚动条设置

    if(parseInt($("#1").height())> parseInt($("#box").height())){

       $("#box").css("overflow-y","auto");

       }else{

           $("#box").css("overflow-y","hidden"); 

       };

       $("#box").scrollTop(0);

    };

this.leftMouseDown=function(){

       if(_state!="ready"){return};

       _state="floating";

       _scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveLeft()",this.speed)

       };

this.rightMouseDown=function(){

           if(_state!="ready"){return};

       _state="floating";_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveRight()",this.speed)

           };

this.moveLeft=function(){

       if(this.scrollContDiv.scrollLeft+this.space>=this.listDiv01.scrollWidth){

       this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+this.space-this.listDiv01.scrollWidth

           }else{

           this.scrollContDiv.scrollLeft+=this.space

           };

           this.accountPageIndex();

           //左移动按钮控制

           var pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;

           $("#"+this.arrLeftId.toString()).show();

           if(this.pageIndex==(pages-2))$("#"+this.arrRightId.toString()).hide();

           $("#num").text(this.pageIndex+2);

           //分页滚动条设置

           if(parseInt($("#"+parseInt(this.pageIndex+2)).height())> parseInt($("#box").height())){

              $("#box").css("overflow-y","auto");

              }else{

              $("#box").css("overflow-y","hidden");

              };

              $("#box").scrollTop(0);

       };

this.moveRight=function(){

       if(this.scrollContDiv.scrollLeft-this.space<=0){

           }else{

              this.scrollContDiv.scrollLeft-=this.space

              };

           this.accountPageIndex();

           var pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;

           $("#"+this.arrRightId.toString()).show();

          

           if(this.pageIndex == 1)  $("#"+this.arrLeftId.toString()).hide();

           $("#num").text(this.pageIndex);

           //分页滚动条设置

           if(parseInt($("#"+parseInt(this.pageIndex)).height())> parseInt($("#box").height())){

              $("#box").css("overflow-y","auto");

              }else{

              $("#box").css("overflow-y","hidden"); 

              }

           $("#box").scrollTop(0);

           };

this.leftEnd=function(){

       if(_state!="floating"){return};

       _state="stoping";

       clearInterval(_scrollTimeObj);

       var fill=this.pageWidth-this.scrollContDiv.scrollLeft%this.pageWidth;

       this.move(fill)

       };

this.rightEnd=function(){

       if(_state!="floating"){return};

       _state="stoping";

       clearInterval(_scrollTimeObj);

       var fill=-this.scrollContDiv.scrollLeft%this.pageWidth;this.move(fill)

       };

this.move=function(num,quick){

       var thisMove=num/5;

       if(!quick){if(thisMove>this.space){thisMove=this.space};

       if(thisMove<-this.space){thisMove=-this.space}};

       if(Math.abs(thisMove)<1&&thisMove!=0){

           thisMove=thisMove>=0?1:-1

                  }else{

              thisMove=Math.round(thisMove)

              };

       var temp=this.scrollContDiv.scrollLeft+thisMove;

       if(thisMove>0){

           if(this.scrollContDiv.scrollLeft+thisMove>=this.listDiv01.scrollWidth){

           this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+thisMove-this.listDiv01.scrollWidth

              }else{

                  this.scrollContDiv.scrollLeft+=thisMove

                  }

           }else{

              if(this.scrollContDiv.scrollLeft-thisMove<=0){

              this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-thisMove

                  }else{

                     this.scrollContDiv.scrollLeft+=thisMove

                     }

              };

              num-=thisMove;

              if(Math.abs(num)==0){

                  _state="ready";

                  if(this.autoPlay){

                     this.play()};

                     this.accountPageIndex();

                     return

                     }else{

                         this.accountPageIndex();

                         setTimeout("ScrollPic.childs["+this.ID+"].move("+num+","+quick+")",this.speed)

                         }

              };

this.next=function(){

       if(_state!="ready"){

           return

           };

           _state="stoping";

           this.move(this.pageWidth,true)

           };

this.play=function(){

       if(!this.autoPlay){

           return};

           clearInterval(_autoTimeObj);

           _autoTimeObj=setInterval("ScrollPic.childs["+this.ID+"].next()",this.autoPlayTime*1000)

           };

this.stop=function(){

       clearInterval(_autoTimeObj)

       };

this.pageTo=function(num){

       if(_state!="ready"){return};

       _state="stoping";

       var fill=num*this.frameWidth-this.scrollContDiv.scrollLeft;

       this.move(fill,true)

       };

this.accountPageIndex=function(){

       this.pageIndex=Math.round(this.scrollContDiv.scrollLeft/this.frameWidth);

    if(this.pageIndex>Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4)-1){this.pageIndex=0};

       var i;

       for(i=0;i<this.dotObjArr.length;i++){

           if(i==this.pageIndex){

              this.dotObjArr[i].className=this.dotClassName

              }else{

                  this.dotObjArr[i].className=this.dotOnClassName

                  }

           }

       }

                                                        };

ScrollPic.js—简单易用的图片左右滚动插件
qq_37916164的博客
08-13 711
一、ScrollPic.js是一个很好理解运用的图片左右滚动插件，兼容性较好，可以放心大胆的使用： 效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片左右滚动</title> <style ...
ScrollPic.js
crisis111的专栏
04-21 1538
插件的下载地址：ScrollPic.js 使用方法： // 先加载ScrollPic.js插件后再执行以下语句window.onload = function(){ scrollPic_01 = new ScrollPic(); scrollPic_01.scrollContId = "pic"; //图片容器ID scrollPic_01.arrLeftId
ScrollPic.js——图片左右滚动插件
weixin_33778544的博客
05-04 173
自己在做项目的时候刚好遇到了图片做左右滚动的项目，发现ScrollPic.js这个插件还是很好用的，一般的浏览器都支持，也可以做成bootstrap样式； 首先需要下载ScrollPic.js这个插件； 使用方法： <SCRIPT language=javascript type=text/javascript> <!--//--><![CDATA[//>...
Oracle查询优化改写技巧与案例2.zip
06-22
《Oracle查询优化改写技巧与案例》不讲具体语法，只是以案例的形式介绍各种查询语句的用法。第1~4章是基础部分，讲述了常用的各种基础语句，以及常见的错误和正确语句的写法。这部分的内容应熟练掌握，因为日常查询...
jiaozhu.zip 教主 Oracle SQL改写优化 2.0版
06-15
教主Oracle SQL高级查询优化改写完美培训视频 2.0版，这个我参与培训的，包含视频、SQL文件、教学文档内容完整，分享给大家学习，共同努力进阶转型开发DBA，人称教主，做sql改写十多年了，sql改写功底很强！
50_50_用aiohttp改写图片下载代码.mp4
最新发布
10-19
java
JS图片翻页 可动态改写数据库
08-11
综上所述，"JS图片翻页 可动态改写数据库"是一个将JavaScript的动态效果和数据库交互能力相结合的应用案例，它能够提供用户友好的图片浏览体验，并通过与ASP或ASP.NET的集成，实现数据的实时更新。这种技术在电商...
落落 Oracle SQL优化与改写培训教程
06-15
字典式写作手法：不讲具体语法，没有简单知识堆砌，直接以案例形式讲...50余改写调优案例：覆盖大多数DBA日常工作场景，具有相当大的实用价值 技巧+案例：可以作为DBA的参考手册，也可以作为开发人员编写SQL的速查字典
JS动态可控制左右滚动的图片
10-15
JS动态可控制左右滚动的图片 <SCRIPT language=javascript type=text/javascript> <!--//--><![CDATA[//><!-- var scrollPic_02 = new ScrollPic(); scrollPic_02.scrollContId = "ISL_Cont_1"; //内容容器ID scrollPic_02.arrLeftId = "LeftArr";//左箭头ID scrollPic_02.arrRightId = "RightArr"; //右箭头ID scrollPic_02.frameWidth = 908;//显示框宽度 scrollPic_02.pageWidth = 152; //翻页宽度 scrollPic_02.speed = 10; //移动速度(单位毫秒，越小越快) scrollPic_02.space = 10; //每次移动像素(单位px，越大越快) scrollPic_02.autoPlay = false; //自动播放 scrollPic_02.autoPlayTime = 3; //自动播放间隔时间(秒) scrollPic_02.initialize(); //初始化 //--><!]]> </SCRIPT>
scrollpic 多图片滚动 修复IE8
11-01
多图片循环滚动，修复了不支持IE8循环滚动
jquery scrollpic插件旅游网站按钮控制图片和文字描
11-02
jquery scrollpic插件旅游网站按钮控制图片和文字描 jquery scrollpic插件旅游网站按钮控制图片和文字描
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
10-21
主要介绍了javascript实现图片左右滚动效果,可实现自动滚动,带有左右按钮功能,基于插件scrollPic.js实现,附带了相应的demo源码供读者下载参考,需要的朋友可以参考下
移动端左右滑动插件
12-08
插件描述：移动端左右滑动插件. 参考示例：http://www.jq22.com/jquery-info5051
ScrollPic js——图片左右滚动插件（单一功能）
jgftyfc的博客
01-24 1127
ScrollPic js——图片左右滚动插件（单一功能）
ScrollPic.js——图片左右滚动插件（单一功能）
cc蒲公英的博客
08-18 5685
客观的讲，scrollpic.js的确是一个很好用的图文滚动插件，它不但可以左右控制无缝连续滚动，还可以兼容如此多的浏览器，真的是难能可贵。对于没有太多JS专业功底的网页生产者，这个插件用起来也不是很难，所以当你需要时就不妨大胆的用吧。 插件的下载地址：ScrollPic.js 使用方法： // 先加载ScrollPic.js插件后再执行以下语句window.
ScrollPic在ie8下不循环滚动的完美解决方案
weixin_33756418的博客
02-04 204
2019独角兽企业重金招聘Python工程师标准>>> ...
C++图片浏览器开发：本地图片搜索与双缓冲技术应用
在详细解释给定文件的知识点之前，我们首先要明确，文件标题为“图片浏览（C++功能强大有说明）”，这意味着我们即将探讨的是一个使用C++语言开发的图片浏览器程序。文件描述中提到该程序可以搜索本地D:\picture目录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值