社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > js实现图片点击左右轮播_javascript技巧

js实现图片点击左右轮播_javascript技巧

WBOY
发布： 2016-05-16 15:50:47
原创
1362 人浏览过

这个 相当于一个小框架，拿来就可以用：

1. 功能：

 如上图显示： 点击左右两个button，可以实现图片向左右滚动，也可以设置在多少秒自己滚动。

2. 首先建立一个js文件，文件名为play.js（只要和HTML中的引入相同就可以了）：

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.rentStyle) {
      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
    }
  }
};

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";
    this.listDiv01.style.cssFloat = "left";
    this.listDiv02.style.cssFloat = "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 &#63; 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
      }
    }
  }
};
登录后复制

3. 建立一个HTML文件：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>实现滚动轮播的效果</title>
    <style type="text/css">
      .nav {
        width: 1100px;
        height: 160px;
        /*border: 1px solid red;*/
        margin-left: 140px;
        position: relative;
        cursor: pointer;
        margin-top: 15px;
        overflow: hidden;
        border: 1px solid red
      }
      .nav #nav-all {
        width: auto;
        height: 160px;
        position: absolute;
        left: -30px;
      }
      .nav .nav-i {
        width: 194px;
        height: 158px;
        background: #fff;
        border: 1px solid #d8d8d8;
        float: left;
        margin-left: 30px;
      }
      .nav .nav-img {
        text-align: center;
        padding-top: 50px;
      }
      .nav .nav-name {
        width: 192px;
        height: 30px;
        background: #f2f2f2;
        margin-top: 33px;
        line-height: 30px;
      }
      .nav .nav-name a {
        font-size: 16px;
        font-family: '微软雅黑';
        padding-left: 10px;
        cursor: pointer;
      }
      .nav .nav-name a:hover {
        color: #4a7abe;
      }
      #last {
        position: absolute;
        left: 0;
        top: 50px;
      }
      #next {
        position: absolute;
        right: 0;
        top: 50px;
      }
      .last-next {
        /*display: none;*/
        
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="nav" id="nav">
      <div id="nav-all">
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统1</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统2</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统3</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统4</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统5</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统6</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img  src="img/icon1.png" / alt="js实现图片点击左右轮播_javascript技巧" >
          </div>
          <div class="nav-name"><a>BI系统7</a>
          </div>
        </div>
      </div>
      <a class="last-next" id="last">
        <img  src="img/last.png" / alt="js实现图片点击左右轮播_javascript技巧" >
      </a>
      <a class="last-next" id="next">
        <img  src="img/next.png" / alt="js实现图片点击左右轮播_javascript技巧" >
      </a>
    </div>
    <script src="play.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
      var scrollPic_02 = new ScrollPic();
      scrollPic_02.scrollContId = "nav-all";//存放所有轮播元素的div
      scrollPic_02.arrLeftId = "last"; //左箭头ID
      scrollPic_02.arrRightId = "next"; //右箭头ID
      scrollPic_02.frameWidth = 1102; //显示框宽    sfdasdfakfl;jlkajka;d度
      scrollPic_02.pageWidth = 226; //翻页宽度
      scrollPic_02.speed = 10; //移动速度(毫秒，越小越快)
      scrollPic_02.space = 20; //每次移动像素(单位px，越大越快)
      scrollPic_02.autoPlay = true; //自动播放:true|false
      scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒)
      scrollPic_02.initialize(); //初始化
       //--><!]]>
    </script>
  </body>

</html>
登录后复制

 其中：样式自己调试，最主要的是最下面的script，设置好这些就能达到效果了。

  下次要写的轮播的话，只要改变样式就可以了，对于script中的一些数据进行改变就可以了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

相关标签：
js 图片 轮播
来源：php.cn
上一篇：javascript实现的简单的表单验证_javascript技巧 下一篇：jQuery原生的动画效果_jquery
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在多个路由中声明的workerpool是否仍然可以保持其cpu使用率而不关心阈值 我希望找到一个带有workerpool的node.js系统来处理CPU密集型任务，但是对于多条路由中的cpu使用情况，我有些困惑。一个场景是这样的：route1.js:constw...
来自于 2024-04-06 19:54:23
0
1
444
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
显示隐藏的侧面板：选中 我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...
来自于 2024-04-06 15:49:33
0
1
319
我们是否应该使用 SSG 来部署使用 Nuxt.js 创建的仪表板？ 我们将使用Nuxt.js开发一个供内部使用的仪表板。由于这将是一个内部仪表板，因此不需要通用模式。一般大部分仪表板都是在SPA中开发的。但是SPA还需要服务器将初始HTML和js包...
来自于 2024-04-06 13:17:44
0
1
493
Electron 在预加载时获取 AppData 如何获取预加载的AppData目录？背景.js[...]asyncfunctioncreateWindow(){constwin=newBrowserWindow({width:8...
来自于 2024-04-06 11:05:31
0
1
417
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板