js-Bildkarusselleffekt-Implementierung, Code_Javascript-Kenntnisse-js-Tutorial-php.cn

js-Bildkarusselleffekt-Implementierung, Code_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:32:43

Original

1435 Leute haben es durchsucht

Lassen Sie mich zunächst einen Blick auf den js-Bildkarusselleffekt werfen, wie unten gezeigt

Spezifische Ideen:

1. Laden Sie die Seite, holen Sie sich den gesamten Container, alle li für den numerischen Index und ul für die Bildliste, definieren Sie die Variable für den Timer und den Variablenindex zum Speichern des aktuellen Index
2. Fügen Sie einen Timer hinzu, erhöhen Sie den Index alle 2 Sekunden und rufen Sie die Bildwechselfunktion
auf Tipps:
1. Der Index kann nicht unbegrenzt weiter steigen und es muss eine Beurteilung vorgenommen werden
2. Beim Aufruf der Funktion „Bild wechseln“ müssen Sie den inkrementierten Index als Parameter
übergeben 3. Bildwechselfunktion definieren
Tipps:
1. Durchlaufen Sie alle Li mit numerischem Index und entfernen Sie die Klassen auf jedem Li.
2. Suchen Sie das entsprechende li entsprechend dem übergebenen Indexwert, fügen Sie eine Klasse hinzu und legen Sie es als aktuelles Highlight fest.
3. Berechnen Sie den oberen Wert von ul, an dem das Bild platziert wird, basierend auf dem übergebenen Indexwert
4. Ändern Sie den Wert des Index so, dass er dem übergebenen Parameterwert
entspricht Hinweis: Der oberste Wert von ul, an dem das Bild platziert wird =-index*height eines einzelnen Bildes (alle Bilder müssen die gleiche Höhe haben)
4. Wenn sich die Maus über den gesamten Container bewegt, hört das Bild auf zu wechseln, verlassen Sie und fahren Sie fort
Tipps:
1. Löschen Sie den Timer, wenn die Maus über den gesamten Container gleitet
2. Führen Sie beim Verlassen der Maus den Timer weiter aus und wechseln Sie zum nächsten Bild
5. Durchlaufen Sie alle Lis, die Zahlen enthalten, fügen Sie ihnen Indizes hinzu und wechseln Sie zu den entsprechenden Bildern, wenn die Maus darüber bewegt wird.
Wenn die Maus darüber gleitet, wird die Bildumschaltfunktion aufgerufen und der Index des darüber gleitenden Li übergeben.
Der spezifische Code lautet wie folgt:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
  width:490px;
  margin:60px auto;
  overflow: hidden;
  position: relative;
  margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
   right:5px;
   bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
    background:#ccc;
    border:solid 1px #666;
    margin-left:5px;
    color:#000;
    float:left;
    line-height:center;
    text-align:center;
    cursor:pointer;}
 .wrap ol .on{background:#E97305;
    color:#fff;}

 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById('wrap'),
  pic=document.getElementById('pic').getElementsByTagName("li"),
  list=document.getElementById('list').getElementsByTagName('li'),
  index=0,
  timer=null;

  // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

  // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function () {
  clearInterval(timer);
 }

  // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
  timer = setInterval(autoPlay, 2000);
 }
  // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
  list[i].onmouseover = function () {
  clearInterval(timer);
  index = this.innerText - 1;
  changePic(index);
  };
 };

 function autoPlay () {
  if (++index >= pic.length) index = 0;
  changePic(index);
 }

  // 定义图片切换函数
 function changePic (curIndex) {
  for (var i = 0; i < pic.length; ++i) {
  pic[i].style.display = "none";
  list[i].className = "";
  }
  pic[curIndex].style.display = "block";
  list[curIndex].className = "on";
 }

 };

 </script> 
</head>
<body>
 <div class="wrap" id='wrap'>
 <ul id="pic">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  <li><img src="4.jpg" alt=""></li>
  <li><img src="5.jpg" alt=""></li> 
 </ul>
 <ol id="list">
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ol>
 </div>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen. Sie können die Bilder nach Ihren Wünschen ändern und Ihren eigenen Bildkarusselleffekt erstellen.