首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

Posted in Javascript onSeptember 19, 2016

本文实例讲述了javascript实现图片左右滚动效果。分享给大家供大家参考，具体如下：

html代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit"/>
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
  <title>图片滚动</title>
  <style>
  *{margin:0;padding:0;}
  ul{list-style:none;}
  img{border:0;}
  .scroll{width:358px;height:63px;}
  .scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}
  .scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}
  .pic{width:312px;height:73px;float:left;}
  .pic ul{display:block;}
  .pic li{float:left;display:inline;width:104px;text-align:center;}
  </style>
</head>
<body>
<div style="margin:100px auto;width:358px;">
  <div class="scroll">
    <div class="scroll_left" id="LeftArr"></div>
    <div class="pic" id="scrollPic">
    <ul>
      <li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li>
      <li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li>
      <li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li>
      <li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li>
      <li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li>
      <li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li>
    </ul>
    </div>
    <div class="scroll_right" id="RightArr"></div>
  </div>
</div>
</body>
</html>
<script src="scrollPic.js"></script>
<script>
window.onload = function(){
  scrollPic();
}
function scrollPic() {
  var scrollPic = new ScrollPic();
  scrollPic.scrollContId  = "scrollPic"; //内容容器ID
  scrollPic.arrLeftId   = "LeftArr";//左箭头ID
  scrollPic.arrRightId   = "RightArr"; //右箭头ID
  scrollPic.frameWidth   = 312;//显示框宽度
  scrollPic.pageWidth   = 104; //翻页宽度
  scrollPic.speed     = 10; //移动速度(单位毫秒，越小越快)
  scrollPic.space     = 10; //每次移动像素(单位px，越大越快)
  scrollPic.autoPlay    = true; //自动播放
  scrollPic.autoPlayTime  = 3; //自动播放间隔时间(秒)
  scrollPic.initialize(); //初始化
}
</script>

scrollPic.js 代码：

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]
    } else if (I.currentStyle) {
      return I.currentStyle[l]
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
      var i = document.defaultView.getComputedStyle(I, null);
      return i.getPropertyValue(l)
    } else {
      return null
    }
  }
};
//滚动图片构造函数
//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) {
      throw new Error("必须指定scrollContId.");
      return
    };
    this.scrollContDiv = sina.$(this.scrollContId);
    if (!this.scrollContDiv) {
      throw new 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(-[1,]){
      this.listDiv01.style.cssFloat = "left";
      this.listDiv02.style.cssFloat = "left";
    }else{
      this.listDiv01.style.styleFloat = "left";
      this.listDiv02.style.styleFloat = "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()
    }
  };
  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()
  };
  this.moveRight = function () {
    if (this.scrollContDiv.scrollLeft - this.space <= 0) {
      this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
    } else {
      this.scrollContDiv.scrollLeft -= this.space
    };
    this.accountPageIndex()
  };
  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
      }
    }
  }
};

参数说明：

var scrollPic = new ScrollPic();  //定义变量，并初始化方法
scrollContId  //滚动容器的ID
arrLeftId  //左按钮ID
arrRightId  //右按钮ID
frameWidth  //显示框宽度
pageWidth  //翻页宽度
speed  //移动速度(单位毫秒，越小越快)
space  //每次移动像素(单位px，越大越快)
autoPlay  //自动播放
autoPlayTime  //自动播放间隔时间(秒)
initialize()  //初始化

完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

- Author -

朱羽佳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue-router路由懒加载的实现（解决vue项目首次加载慢）
Aug 28 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 #Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
javascript this详细介绍
Sep 19 #Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 #Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 #Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 #Javascript
详解Node.Js如何处理post数据
Sep 19 #Javascript
进程假死(1) 字符串(2) Seaborn(1) Xception(1) tensorflow(2) yolo3(1) Inception(2) jenkins(1) UV(1) 逆序(1)
You might like
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JQuery 入门实例1
2009/06/25 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
JS实现移动端可折叠导航菜单（现代都市风）
2020/07/07 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
python类参数self使用示例
2014/02/17 Python
python3学生名片管理v2.0版
2018/11/29 Python
python同义词替换的实现（jieba分词）
2020/01/21 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
奥地利购买珠宝和手表网站：ELLA JUWELEN
2019/09/03 全球购物
合同专员岗位职责
2013/12/18 职场文书
教学实验楼管理制度
2014/02/01 职场文书
党员违纪检讨书
2014/02/18 职场文书
婚纱店策划方案
2014/05/22 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
综合测评自我评价
2015/03/06 职场文书
小学副班长竞选稿
2015/11/21 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL