js implémente le carrousel d'images gauche et droite en cliquant sur les compétences it_javascript

C'est l'équivalent d'un petit framework, vous pouvez l'utiliser tout de suite :

1. Fonction :

Comme le montre l'image ci-dessus : cliquez sur les deux boutons à gauche et à droite pour faire défiler l'image vers la gauche et la droite, ou définissez vous-même le nombre de secondes pour faire défiler.

2. Créez d'abord un fichier js nommé play.js (à condition qu'il soit le même que l'introduction en 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 ? 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. Créez un fichier 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>

Parmi eux : déboguez le style par vous-même, le plus important est le script en bas, définissez-le pour obtenir l'effet.

Si vous souhaitez écrire un carrousel la prochaine fois, il vous suffit de changer le style et de modifier certaines données dans le script.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.