首页
所有分类
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条件判断使用小技巧总结
Sep 08 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
AI小程序之语音听写来了，十分钟掌握百度大脑语音听写全攻略
Mar 13 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
PIL(1) 裁剪图片(1) Flask(2) 鲲鹏(1) 柱状图(1) Pytesseract(1) 验证码(1) Python(3) 进度条(1) GCN(1)
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
原生JS发送异步数据请求
2017/06/08 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Python之web模板应用
2017/12/26 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python手写均值滤波
2020/02/19 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
世界上最大的各式箱包网络零售店：eBag
2016/07/21 全球购物
世界上最好的帽子：Tilley
2016/11/27 全球购物
Nike法国官方网站：Nike.com FR
2018/07/22 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
小学作文评语大全
2014/04/21 职场文书
财会专业大学生求职信
2014/09/26 职场文书
办理收楼委托书范本
2014/10/09 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
法院个人总结
2015/03/03 职场文书
关于倡议书的范文
2015/04/29 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
签证扫盲贴，41个常见签证知识，需要的拿走
2019/08/09 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Python实现科学占卜 让视频自动打码
2022/04/09 Python
python turtle绘图
2022/05/04 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS