首页
所有分类
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 相关文章推荐
学习javascript，实现插入排序实现代码
Jul 31 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
如何学JavaScript？前辈的经验之谈
Dec 28 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
Flask Web(1) 面向接口(1) exec(1) OpenGL(1) BeautifulSoup4(2) MyBatis(5) OpenAI baselines(1) cv2(1) Android Studio(4) tfx(1)
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
numpy.random模块用法总结
2019/05/27 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python lambda表达式（匿名函数）写法解析
2019/09/16 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
The North Face北面法国官网：美国著名户外品牌
2019/11/01 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
SQL Server数据库笔试题和答案
2016/02/04 面试题
ajax是什么及其工作原理
2012/02/08 面试题
机电一体化求职信
2014/03/10 职场文书
活动策划求职信模板
2014/04/21 职场文书
买房协议书范本
2014/10/23 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
欢迎新生标语2015
2015/07/16 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
python实现会员信息管理系统(List)
2022/03/18 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers