Heim > Artikel > Web-Frontend > Implementierung des Slider-Karusselleffekts mit Untermenüs und Steuerelementen in JavaScript

Implementierung des Slider-Karusselleffekts mit Untermenüs und Steuerelementen in JavaScript

黄舟Original: 2017-11-01 09:49:511913Durchsuche

Möglicherweise haben Sie das Projekt des unendlichen Scrollens von Bildern (Fotokarussell) durchgeführt. Wenn Sie jedoch das letzte Bild erreichen, scrollen Sie zurück zum ersten Bild. Dies ist eine sehr schlechte Benutzererfahrung. . In diesem Artikel werde ich Ihnen den Effekt des Slider-Karussells mit Untermenüs und Steuerelementen auf Basis von JavaScript vorstellen. Der spezifische Implementierungscode lautet wie folgt:

Erfolgseffekt:

Implementierungsprinzip:

// Schritte
// 1. Holen Sie sich die Ereignisquelle und zugehörige Elemente
// 2. Kopieren Sie das li an die Stelle, an der sich das erste Bild befindet, und fügen Sie es am Ende von ul hinzu
// 3. Fügen Sie li zu ol hinzu, der Zahl in ul -1, und beleuchten Sie den ersten Knopf
// 4 . Setzen Sie die Maus auf das Bild, um die Bilder zu wechseln
// 5. Fügen Sie einen Timer hinzu
// 6. Wechseln Sie die Bilder nach links und rechts (halten Sie die Maus darauf, um sie auszublenden, bewegen Sie sie weg, um sie anzuzeigen)

Implementierungscode:

<!DOCTYPE html>
<html>
<head>
  <title>轮播图</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      margin: 100px auto;
      position: relative;
      box-shadow: 1px 1px 5px #2d2d2d;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current{
      background-color: #03c03c;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      left: 5px;
      top: 50%;
      position: absolute;
      margin-top: -20px;
      background-color: #000;
      cursor: pointer;
      line-height: 35px;
      text-align: center;
      font-weight: bold;
      font-family: "微软雅黑";
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #2d2d2d;
    }
    #arr #right{
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<p class="all" id="all">
  <p class="screen" id="screen">
    <ul id="ul">
      <li><img src="./images/01.jpg" width="500" height="200"></li>
      <li><img src="./images/02.jpg" width="500" height="200"></li>
      <li><img src="./images/03.jpg" width="500" height="200"></li>
      <li><img src="./images/04.jpg" width="500" height="200"></li>
      <li><img src="./images/05.jpg" width="500" height="200"></li>
    </ul>
    <!-- 图片子菜单 -->
    <ol>
    </ol>
    <!-- 左右切换按钮 -->
    <p id="arr">
      <span id="left"><</span>
      <span id="right">></span>
    </p>
  </p>
</p>
<!-- script -->
<script type="text/javascript">
  // 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张
  // 步骤
  // 1. 获取事件源以及相关元素
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  // 4. 鼠标放到ol的li上切换图片
  // 5. 添加定时器
  // 6. 左右切换图片（鼠标放上去隐藏，移开显示）
  // 1. 获取事件源以及相关元素
  var all = document.getElementById("all");
  var screen = all.firstElementChild || all.firstChild;
  var imgWidth = screen.offsetWidth;
  var ul = screen.firstElementChild || screen.firstChild;
  var ol = screen.children[1];
  var p = screen.lastElementChild || screen.lastChild;
  var spanArr = p.children;
  // 2. 复制第一张图片所在的li，添加到ul的最后面
  var ulNewLi = ul.children[0].cloneNode(true);
  ul.appendChild(ulNewLi);
  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
  for(var i=0; i<ul.children.length-1; i++){
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i+1;
    ol.appendChild(olNewLi);
  } 
  var olLiArr = ol.children;
  olLiArr[0].className = "current";
  // 4. 鼠标放到ol的li上切换图片
  for(var i=0; i<olLiArr.length; i++){
    // 自定义属性，把索引值绑定到元素的index属性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function(){
      // 排他思想
      for(var j=0; j<olLiArr.length; j++){
        olLiArr[j].className = "";
      }
      this.className = "current"
      // 鼠标放到小方块上时，索引值和key以及square同步
      // key = this.index;
      // square = this.index;
      key = square = this.index;
      // 移动盒子
      animate(ul, -this.index*imgWidth);
    }
  }
  // 5. 添加定时器
  var timer = setInterval(autoPlay, 1000);
  // 固定向右切换图片
  // 两个定时器（一个记录图片，一个记录子菜单栏）
  var key = 0;
  var square = 0;
  function autoPlay(){
    // 通过key的自增来模拟图片的索引值，然后移动ul
    key++;
    if(key > olLiArr.length){
      // 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张
      ul.style.left = 0;
      key = 1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮盒子
    // 排他思想做小方块
    square++;
    if(square > olLiArr.length-1){
      // 索引值不能大于5，如果大于5则立即变为0；
      square = 0;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  // 鼠标放上去清除定时器，移开启动定时器
  all.onmouseover = function(){
    p.style.display = "block";
    clearInterval(timer);
  }
  all.onmouseout = function(){
    p.style.display = "none";
    timer = setInterval(autoPlay,1000);
  }
  // 6. 左右切换图片（鼠标放上去显示，移开隐藏）
  spanArr[0].onclick = function(){
    // 通过控制key的自增来模拟图片的索引值，然后移动ul
    key--;
    if(key<0){
      // 先移到最后一张，然后key的值取前一张的索引值，然后向前移动
      ul.style.left = -imgWidth*(olLiArr.length) + "px";
      key = olLiArr.length-1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值，然后点亮小方块
    square--;
    if(square<0){
      // 索引值不能大于等于5，如果为5，立即变为0
      square = olLiArr.length-1;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  spanArr[1].onclick = function(){
    // 右侧的和定时器一模一样
    autoPlay();
  }
  // 动画封装
  var absSpeed = 10; //设定步长
  function animate(ele, target){
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    ele.timer = setInterval(function(){
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      if(Math.abs(val) < Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    }, 10)
  }
</script>
</body>
</html>

Zusammenfassung

Das obige ist der detaillierte Inhalt vonImplementierung des Slider-Karusselleffekts mit Untermenüs und Steuerelementen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery verwendet Ajax, um lokale JSON-Dateien zu lesenNächster Artikel：jQuery verwendet Ajax, um lokale JSON-Dateien zu lesen

In Verbindung stehende Artikel

Mehr sehen