首页
所有分类
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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
ECMAScript6函数剩余参数（Rest Parameters）
Jun 12 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue中render函数的使用方法
Jan 31 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
vue 动态表单开发方法案例详解
Dec 02 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
备份(2) python小游戏(5) SnakeGame(1) 德生2P3(1) update(2) 索尼ICF-36(1) 贪吃蛇(2) 全局锁(1) 索引(8) 计算机视觉(2)
You might like
php 文件上传实例代码
2012/04/19 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php链表用法实例分析
2015/07/09 PHP
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
Bootstrap标签页（Tab）插件切换echarts不显示问题的解决
2018/07/13 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
深入了解Python 变量作用域
2020/07/24 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Columbia美国官网：美国著名的户外服装品牌
2016/11/24 全球购物
学校安全教育制度
2014/01/31 职场文书
四风之害观后感
2015/06/09 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
高中化学教学反思
2016/02/22 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL