html页面部分

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6.     <meta name="renderer" content="webkit"/>
  7.     <meta name="keywords" content=""/>
  8.     <meta name="description" content=""/>
  9.     <title>图片滚动</title>
  10.     <style>
  11.     *{margin:0;padding:0;}
  12.     ul{list-style:none;}
  13.     img{border:0;}
  14.     .scroll{width:358px;height:63px;}
  15.     .scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}
  16.     .scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}
  17.     .pic{width:312px;height:73px;float:left;}
  18.     .pic ul{display:block;}
  19.     .pic li{float:left;display:inline;width:104px;text-align:center;}
  20.     </style>
  21. </head>
  22. <body>
  23. <div style="margin:100px auto;width:358px;">
  24.     <div class="scroll">
  25.         <div class="scroll_left" id="LeftArr"></div>
  26.         <div class="pic" id="scrollPic">
  27.         <ul>
  28.             <li><a href="#" target="_blank" title=""><img src="data:images/pic01.png" width="100" height="63" alt="" /></a></li>
  29.             <li><a href="#" target="_blank" title=""><img src="data:images/pic02.jpg" width="100" height="63" alt="" /></a></li>
  30.             <li><a href="#" target="_blank" title=""><img src="data:images/pic03.jpg" width="100" height="63" alt="" /></a></li>
  31.             <li><a href="#" target="_blank" title=""><img src="data:images/pic04.jpg" width="100" height="63" alt="" /></a></li>
  32.             <li><a href="#" target="_blank" title=""><img src="data:images/pic05.jpg" width="100" height="63" alt="" /></a></li>
  33.             <li><a href="#" target="_blank" title=""><img src="data:images/pic06.jpg" width="100" height="63" alt="" /></a></li>
  34.         </ul>
  35.         </div>
  36.         <div class="scroll_right" id="RightArr"></div>
  37.     </div>
  38. </div>
  39. </body>
  40. </html>
  41. <script src="scrollPic.js"></script>
  42. <script>
  43. window.onload = function(){
  44.     scrollPic();
  45. }
  46. function scrollPic() {
  47.     var scrollPic = new ScrollPic();
  48.     scrollPic.scrollContId   = "scrollPic"; //内容容器ID
  49.     scrollPic.arrLeftId      = "LeftArr";//左箭头ID
  50.     scrollPic.arrRightId     = "RightArr"; //右箭头ID
  51.  
  52.     scrollPic.frameWidth     = 312;//显示框宽度
  53.     scrollPic.pageWidth      = 104; //翻页宽度
  54.  
  55.     scrollPic.speed          = 10; //移动速度(单位毫秒，越小越快)
  56.     scrollPic.space          = 10; //每次移动像素(单位px，越大越快)
  57.     scrollPic.autoPlay       = true; //自动播放
  58.     scrollPic.autoPlayTime   = 3; //自动播放间隔时间(秒)
  59.  
  60.     scrollPic.initialize(); //初始化
  61. }
  62. </script>

scrollPic.js  插件 源代码

  1. var sina = {
  2.     $ : function (objName) {
  3.         if (document.getElementById) {
  4.             return eval('document.getElementById("' + objName + '")')
  5.         } else {
  6.             return eval('document.all.' + objName)
  7.         }
  8.     },
  9.     isIE : navigator.appVersion.indexOf("MSIE") != -1 ? true : false,
  10.     addEvent : function (l, i, I) {
  11.         if (l.attachEvent) {
  12.             l.attachEvent("on" + i, I)
  13.         } else {
  14.             l.addEventListener(i, I, false)
  15.         }
  16.     },
  17.     delEvent : function (l, i, I) {
  18.         if (l.detachEvent) {
  19.             l.detachEvent("on" + i, I)
  20.         } else {
  21.             l.removeEventListener(i, I, false)
  22.         }
  23.     },
  24.     readCookie : function (O) {
  25.         var o = "",
  26.         l = O + "=";
  27.         if (document.cookie.length > 0) {
  28.             var i = document.cookie.indexOf(l);
  29.             if (i != -1) {
  30.                 i += l.length;
  31.                 var I = document.cookie.indexOf(";", i);
  32.                 if (I == -1)
  33.                     I = document.cookie.length;
  34.                 o = unescape(document.cookie.substring(i, I))
  35.             }
  36.         };
  37.         return o
  38.     },
  39.     writeCookie : function (i, l, o, c) {
  40.         var O = "",
  41.         I = "";
  42.         if (o != null) {
  43.             O = new Date((new Date).getTime() + o * 3600000);
  44.             O = "; expires=" + O.toGMTString()
  45.         };
  46.         if (c != null) {
  47.             I = ";domain=" + c
  48.         };
  49.         document.cookie = i + "=" + escape(l) + O + I
  50.     },
  51.     readStyle : function (I, l) {
  52.         if (I.style[l]) {
  53.             return I.style[l]
  54.         } else if (I.currentStyle) {
  55.             return I.currentStyle[l]
  56.         } else if (document.defaultView && document.defaultView.getComputedStyle) {
  57.             var i = document.defaultView.getComputedStyle(I, null);
  58.             return i.getPropertyValue(l)
  59.         } else {
  60.             return null
  61.         }
  62.     }
  63. };
  64.  
  65. //滚动图片构造函数
  66. //UI&UE Dept. mengjia
  67. //
  68. function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
  69.     this.scrollContId = scrollContId;
  70.     this.arrLeftId = arrLeftId;
  71.     this.arrRightId = arrRightId;
  72.     this.dotListId = dotListId;
  73.     this.dotClassName = "dotItem";
  74.     this.dotOnClassName = "dotItemOn";
  75.     this.dotObjArr = [];
  76.     this.pageWidth = 0;
  77.     this.frameWidth = 0;
  78.     this.speed = 10;
  79.     this.space = 10;
  80.     this.pageIndex = 0;
  81.     this.autoPlay = true;
  82.     this.autoPlayTime = 5;
  83.     var _autoTimeObj,
  84.     _scrollTimeObj,
  85.     _state = "ready";
  86.     this.stripDiv = document.createElement("DIV");
  87.     this.listDiv01 = document.createElement("DIV");
  88.     this.listDiv02 = document.createElement("DIV");
  89.     if (!ScrollPic.childs) {
  90.         ScrollPic.childs = []
  91.     };
  92.     this.ID = ScrollPic.childs.length;
  93.     ScrollPic.childs.push(this);
  94.     this.initialize = function () {
  95.         if (!this.scrollContId) {
  96.             throw new Error("必须指定scrollContId.");
  97.             return
  98.         };
  99.         this.scrollContDiv = sina.$(this.scrollContId);
  100.         if (!this.scrollContDiv) {
  101.             throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
  102.             return
  103.         };
  104.         this.scrollContDiv.style.width = this.frameWidth + "px";
  105.         this.scrollContDiv.style.overflow = "hidden";
  106.         this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
  107.         this.scrollContDiv.innerHTML = "";
  108.         this.scrollContDiv.appendChild(this.stripDiv);
  109.         this.stripDiv.appendChild(this.listDiv01);
  110.         this.stripDiv.appendChild(this.listDiv02);
  111.         this.stripDiv.style.overflow = "hidden";
  112.         this.stripDiv.style.zoom = "1";
  113.         this.stripDiv.style.width = "32766px";
  114.         if(-[1,]){
  115.             this.listDiv01.style.cssFloat = "left";
  116.             this.listDiv02.style.cssFloat = "left";
  117.         }else{
  118.             this.listDiv01.style.styleFloat = "left";
  119.             this.listDiv02.style.styleFloat = "left";
  120.         }
  121.         sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
  122.         sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
  123.         if (this.arrLeftId) {
  124.             this.arrLeftObj = sina.$(this.arrLeftId);
  125.             if (this.arrLeftObj) {
  126.                 sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
  127.                 sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
  128.                 sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
  129.             }
  130.         };
  131.         if (this.arrRightId) {
  132.             this.arrRightObj = sina.$(this.arrRightId);
  133.             if (this.arrRightObj) {
  134.                 sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
  135.                 sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
  136.                 sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
  137.             }
  138.         };
  139.         if (this.dotListId) {
  140.             this.dotListObj = sina.$(this.dotListId);
  141.             if (this.dotListObj) {
  142.                 var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),
  143.                 i,
  144.                 tempObj;
  145.                 for (i = 0; i < pages; i++) {
  146.                     tempObj = document.createElement("span");
  147.                     this.dotListObj.appendChild(tempObj);
  148.                     this.dotObjArr.push(tempObj);
  149.                     if (i == this.pageIndex) {
  150.                         tempObj.className = this.dotClassName
  151.                     } else {
  152.                         tempObj.className = this.dotOnClassName
  153.                     };
  154.                     tempObj.title = "第" + (i + 1) + "页";
  155.                     sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
  156.                 }
  157.             }
  158.         };
  159.         if (this.autoPlay) {
  160.             this.play()
  161.         }
  162.     };
  163.     this.leftMouseDown = function () {
  164.         if (_state != "ready") {
  165.             return
  166.         };
  167.         _state = "floating";
  168.         _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
  169.     };
  170.     this.rightMouseDown = function () {
  171.         if (_state != "ready") {
  172.             return
  173.         };
  174.         _state = "floating";
  175.         _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
  176.     };
  177.     this.moveLeft = function () {
  178.         if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
  179.             this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
  180.         } else {
  181.             this.scrollContDiv.scrollLeft += this.space
  182.         };
  183.         this.accountPageIndex()
  184.     };
  185.     this.moveRight = function () {
  186.         if (this.scrollContDiv.scrollLeft - this.space <= 0) {
  187.             this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
  188.         } else {
  189.             this.scrollContDiv.scrollLeft -= this.space
  190.         };
  191.         this.accountPageIndex()
  192.     };
  193.     this.leftEnd = function () {
  194.         if (_state != "floating") {
  195.             return
  196.         };
  197.         _state = "stoping";
  198.         clearInterval(_scrollTimeObj);
  199.         var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
  200.         this.move(fill)
  201.     };
  202.     this.rightEnd = function () {
  203.         if (_state != "floating") {
  204.             return
  205.         };
  206.         _state = "stoping";
  207.         clearInterval(_scrollTimeObj);
  208.         var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
  209.         this.move(fill)
  210.     };
  211.     this.move = function (num, quick) {
  212.         var thisMove = num / 5;
  213.         if (!quick) {
  214.             if (thisMove > this.space) {
  215.                 thisMove = this.space
  216.             };
  217.             if (thisMove < -this.space) {
  218.                 thisMove = -this.space
  219.             }
  220.         };
  221.         if (Math.abs(thisMove) < 1 && thisMove != 0) {
  222.             thisMove = thisMove >= 0 ? 1 : -1
  223.         } else {
  224.             thisMove = Math.round(thisMove)
  225.         };
  226.         var temp = this.scrollContDiv.scrollLeft + thisMove;
  227.         if (thisMove > 0) {
  228.             if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
  229.                 this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
  230.             } else {
  231.                 this.scrollContDiv.scrollLeft += thisMove
  232.             }
  233.         } else {
  234.             if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
  235.                 this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
  236.             } else {
  237.                 this.scrollContDiv.scrollLeft += thisMove
  238.             }
  239.         };
  240.         num -= thisMove;
  241.         if (Math.abs(num) == 0) {
  242.             _state = "ready";
  243.             if (this.autoPlay) {
  244.                 this.play()
  245.             };
  246.             this.accountPageIndex();
  247.             return
  248.         } else {
  249.             this.accountPageIndex();
  250.             setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
  251.         }
  252.     };
  253.     this.next = function () {
  254.         if (_state != "ready") {
  255.             return
  256.         };
  257.         _state = "stoping";
  258.         this.move(this.pageWidth, true)
  259.     };
  260.     this.play = function () {
  261.         if (!this.autoPlay) {
  262.             return
  263.         };
  264.         clearInterval(_autoTimeObj);
  265.         _autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
  266.     };
  267.     this.stop = function () {
  268.         clearInterval(_autoTimeObj)
  269.     };
  270.     this.pageTo = function (num) {
  271.         if (_state != "ready") {
  272.             return
  273.         };
  274.         _state = "stoping";
  275.         var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
  276.         this.move(fill, true)
  277.     };
  278.     this.accountPageIndex = function () {
  279.         this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
  280.         if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
  281.             this.pageIndex = 0
  282.         };
  283.         var i;
  284.         for (i = 0; i < this.dotObjArr.length; i++) {
  285.             if (i == this.pageIndex) {
  286.                 this.dotObjArr[i].className = this.dotClassName
  287.             } else {
  288.                 this.dotObjArr[i].className = this.dotOnClassName
  289.             }
  290.         }
  291.     }
  292. };

运用scrollPic插件的实例的更多相关文章

  1. redis安装 phpredis Jedis 扩展的实现及注意事项,php,java,python相关插件安装实例代码和文档推荐

    redis安装 phpredis Jedis 扩展的实现及注意事项,php,java,python相关插件安装实例代码和文档推荐 1.Redis 官方网站下载: http://redis.io/dow ...

  2. 制作npm插件vue-toast-m实例练习

    制作npm插件vue-toast-m实例练习(消息弹窗) 一.使用npm插件 import VueToast from 'vue-toast-demo-cc' Vue.use(VueToast) th ...

  3. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  4. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  5. jQuery插件ImgAreaSelect 实例讲解二

    在上一篇随笔http://www.cnblogs.com/chenguanai/p/6883401.html中,已经了解了头像的上传预览和裁剪功能:那么这次就再看一下imgareaselect的裁剪功 ...

  6. eclipse3.4+对的处理插件（附SVN插件安装实例）

    Eclipse 3.4以前安装插件无非有两种方式, 直接copy插件到features/plugins目录或者在links目录下创建链接文件. Eclipse 3.4又推出另一种新的安装途径, 更加灵 ...

  7. java-通讯stocket插件mina实例

    mina是对nio的具体实现.是目前比较高效和流行的nio(非阻塞式I/O)框架 mina主要包括: 其中服务端为:NioSocketAcceptor 客户端为:NioSocketConnector ...

  8. 转 jQuery(图片、相册)插件代码实例

    jQuery想必大部分前端er都知道甚至很熟悉了,网上有数以万计的优秀的jQuery插件以及教程,今天收集了一些关于图片.相册的jQuery插件代码,希望会对你有所帮助. 1. 3D Gallery ...

  9. spring-mybatis代码生成插件,与实例展示

    前段时间看了张开涛写的代码生成插件,感觉思路很好,通过连接库然后获取数据库表信息,然后用户在界面中勾选要映射的策略,映射的字段,然后可以自动生成业务代码. 基于开涛的思路,自己写了一个简易插件,去掉了 ...

随机推荐

  1. The eventual following stack trace is caused by an error thrown for debugging purposes as well as to attempt to terminate the thread which caused the illegal access, and has no functional impact.

    好久没有冒泡了,最近在新环境上搭建应用时,启动报错: INFO: Illegal access: this web application instance has been stopped alre ...

  2. Groovy学习笔记-陷阱

    1.def和in是关键字 2.==映射到了equals() 中,如果有Comparable接口实现,则优先compareTo str1 = 'hello' str2 = str1 str3 = new ...

  3. js实现全选反选（开关门）

    话不多说直接看图吧

  4. 判断客户端是IOS还是Android

    PHP 判断客户端是IOS还是Android <?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['H ...

  5. Windows10 VS2017 C++多线程传参和等待线程结束

    #include "pch.h" #include <iostream> #include <windows.h> using namespace std; ...

  6. Struts2配置。

    ** Web.xml配置** <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns=&q ...

  7. golang context

    ex1 package main import ( "fmt" ) // 最佳context 实践 // Context 目标是实现各个goroutine能及时终止退出. func ...

  8. vue 配合vue-resource调用接口，获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...

  9. 手机连接fiddler之后，安装证书的方法

    1. 手机设置锁屏密码2. 手机连接fiddler测试网络3. 手机访问    电脑IP:fiddler设置的端口号4. 点击页面中的链接,下载并安装证书,随意命名即可 (还不清楚证书有啥用,先记录下 ...

  10. Java面试3

    反射的定义: 反射是java语言的一个特性,它允程序在运行时(注意不是编译的时候)来进行自我检查并且对内部的成员进行操作.例如它允许一个java的类获取它所有的成员变量和方法并且显示出来. 反射机制的 ...