js實作圖片點擊左右輪播_javascript技巧-js教程-PHP中文網

這個相當於一個小框架，拿來就可以用：

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 &#63; 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" />
          </div>
          <div class="nav-name"><a>BI系统1</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统2</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统3</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统4</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统5</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统6</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统7</a>
          </div>
        </div>
      </div>
      <a class="last-next" id="last">
        <img src="img/last.png" />
      </a>
      <a class="last-next" id="next">
        <img src="img/next.png" />
      </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中的一些資料進行改變就可以了。

以上所述就是本文的全部內容了，希望大家能夠喜歡。