suchen

Heim  >  Artikel  >  Web-Frontend  >  Ein einfaches Beispiel für die Implementierung des Bildkarusselleffekts durch JavaScript

Ein einfaches Beispiel für die Implementierung des Bildkarusselleffekts durch JavaScript

黄舟
黄舟Original
2018-05-10 15:48:393813Durchsuche

In diesem Artikel wird hauptsächlich JavaScript zum Implementieren eines einfachen Bildkarusselleffekts vorgestellt. Es hat einen bestimmten Referenzwert.

Das Beispiel in diesem Artikel ist Jeder Teilen Sie den spezifischen Code zur Implementierung eines einfachen Bildkarussells in js und erreichen Sie schließlich das Rendering

Codeblock

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder Script Home unterstützt. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
     <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 490px;
      height: 170px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 490px;
      height: 170px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }

    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .inner li {
      float: left;
    }

    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }

    .square span.current {
      background-color: orangered;
      color: #fff;
    }
  </style>
  </head>
  <body>
    <p class="box" id="box">
      <p class="inner">
        <ul>
          <li><a href="#"><img src="images/01.jpg" /></a></li>
          <li><a href="#"><img src="images/02.jpg" /></a></li>
          <li><a href="#"><img src="images/03.jpg" /></a></li>
          <li><a href="#"><img src="images/04.jpg" /></a></li>
          <li><a href="#"><img src="images/05.jpg" /></a></li>
        </ul>
        <p class="square">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </p>
      </p>
    </p>
  <script type="text/javascript">
    //鼠标经过按钮 按钮排他
    var box = document.getElementById("box");
    var inner = box.children[0];      //获取box下的第一个元素，也就是inner
    var ul = inner.children[0];       //获取inner下的ul
    var squareList = inner.children[1];   //获取inner下的第二个元素
    var squares = squareList.children;   //获取所有的按钮
    var imgWidth = inner.offsetWidth;
//   alert(imgWidth);
    //给每个按钮注册鼠标经过事件
    for(var i=0; i<squares.length; i++){
      squares[i].index = i;      //把索引保存在自定义属性中
      squares[i].onmouseover = function(){  //鼠标经过事件
        //排他 干掉所有人 
        for(var j=0; j<squares.length; j++){
          squares[j].className = "";
        }
        //留下我自己
        this.className = "current";
        //以动画的方式把ul移动到指定的位置
        //目标 和当前按钮索引有关，和图片宽度有关 而且是负数
        var target = -this.index * imgWidth;  //获取到索引
        animate(ul,target);
      }
    }
    function animate(obj, target) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var step = 20;
        var step = obj.offsetLeft < target ? step : -step;
        if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
          obj.style.left = obj.offsetLeft + step + "px";
        } else {
          obj.style.left = target + "px";
          clearInterval(obj.timer);
        }
      }, 15)
    }
  </script>
  </body>
</html>

Das obige ist der detaillierte Inhalt vonEin einfaches Beispiel für die Implementierung des Bildkarusselleffekts durch 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：Beispielhafte Einführung in den JavaScript-Konstruktor und den neuen OperatorNächster Artikel：Beispielhafte Einführung in den JavaScript-Konstruktor und den neuen Operator

In Verbindung stehende Artikel

Mehr sehen